3 <title>Overview Map Example</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <script src="../lib/OpenLayers.js" type="text/javascript"></script>
11 border: 1px solid gray;
16 border: 1px solid gray;
21 <h1 id="title">Overview Map</h1>
26 Enable a small Overview Map that moves/interacts with your main map.
29 <p>The above map has an overview map control that is created with
30 the default options. Much like a regular map, the map contained by
31 the overview map control defaults to a geographic projection.</p>
33 <p>The second map has an overview map control that is created with
34 non-default options. In this case, the mapOptions property of the
35 control has been set to use non-default projection related properties.
36 In addition, any other properties of the overview map control can be
38 <script defer="defer" type="text/javascript">
40 // create the top map (with default overview map control)
41 var map1 = new OpenLayers.Map('map1');
43 var ol = new OpenLayers.Layer.WMS(
45 "http://labs.metacarta.com/wms/vmap0",
49 var jpl = new OpenLayers.Layer.WMS(
51 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
55 map1.addLayers([ol, jpl]);
56 map1.addControl(new OpenLayers.Control.LayerSwitcher());
58 // create an overview map control with the default options
59 var overview1 = new OpenLayers.Control.OverviewMap();
60 map1.addControl(overview1);
62 map1.setCenter(new OpenLayers.LonLat(0, 0), 2);
64 // expand the overview map control
65 overview1.maximizeControl();
68 // create the bottom map (with advanced overview map control)
70 maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656),
71 maxResolution: 296985/1024,
72 projection: "EPSG:2805",
76 var map2 = new OpenLayers.Map('map2', mapOptions);
78 var bos = new OpenLayers.Layer.WMS(
80 "http://boston.freemap.in/cgi-bin/mapserv",
82 map: '/www/freemap.in/boston/map/gmaps.map',
83 layers: 'border,water,roads,rapid_transit,buildings',
88 map2.addLayers([bos]);
89 map2.addControl(new OpenLayers.Control.LayerSwitcher());
91 // create an overview map control with non-default options
92 var controlOptions = {
93 mapOptions: mapOptions
95 var overview2 = new OpenLayers.Control.OverviewMap(controlOptions);
96 map2.addControl(overview2);
98 map2.setCenter(new OpenLayers.LonLat(182500, 868500), 3);
100 // expand the overview map control
101 overview2.maximizeControl();