1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <html> <head> <title>Overview Map Example</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script src="../lib/OpenLayers.js" type="text/javascript"></script> <style> #map1 { width: 500px; height: 300px; border: 1px solid gray; } #map2 { width: 500px; height: 300px; border: 1px solid gray; } </style> </head> <body> <h1 id="title">Overview Map</h1> <div id="tags"> </div> <p id="shortdesc"> Enable a small Overview Map that moves/interacts with your main map. </p> <div id="map1"></div> <p>The above map has an overview map control that is created with the default options. Much like a regular map, the map contained by the overview map control defaults to a geographic projection.</p> <div id="map2"></div> <p>The second map has an overview map control that is created with non-default options. In this case, the mapOptions property of the control has been set to use non-default projection related properties. In addition, any other properties of the overview map control can be set in this way.</p> <script defer="defer" type="text/javascript"> // create the top map (with default overview map control) var map1 = new OpenLayers.Map('map1'); var ol = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var jpl = new OpenLayers.Layer.WMS( "NASA Global Mosaic", "http://t1.hypercube.telascience.org/cgi-bin/landsat7", {layers: "landsat7"} ); map1.addLayers([ol, jpl]); map1.addControl(new OpenLayers.Control.LayerSwitcher()); // create an overview map control with the default options var overview1 = new OpenLayers.Control.OverviewMap(); map1.addControl(overview1); map1.setCenter(new OpenLayers.LonLat(0, 0), 2); // expand the overview map control overview1.maximizeControl(); // create the bottom map (with advanced overview map control) var mapOptions = { maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), maxResolution: 296985/1024, projection: "EPSG:2805", units: "m" }; var map2 = new OpenLayers.Map('map2', mapOptions); var bos = new OpenLayers.Layer.WMS( "Boston", "http://boston.freemap.in/cgi-bin/mapserv", { map: '/www/freemap.in/boston/map/gmaps.map', layers: 'border,water,roads,rapid_transit,buildings', format: 'png' } ); map2.addLayers([bos]); map2.addControl(new OpenLayers.Control.LayerSwitcher()); // create an overview map control with non-default options var controlOptions = { mapOptions: mapOptions } var overview2 = new OpenLayers.Control.OverviewMap(controlOptions); map2.addControl(overview2); map2.setCenter(new OpenLayers.LonLat(182500, 868500), 3); // expand the overview map control overview2.maximizeControl(); </script> </body> </html> |