]> dev.renevier.net Git - syp.git/blob - openlayers/examples/overviewmap.html
forbird creation or deletion of item; forbids adding or deleting an image
[syp.git] / openlayers / examples / overviewmap.html
1 <html>
2     <head>
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>
7         <style>
8         #map1 {
9             width: 500px; 
10             height: 300px;
11             border: 1px solid gray;
12         }
13         #map2 {
14             width: 500px; 
15             height: 300px;
16             border: 1px solid gray;
17         }
18         </style>
19     </head>
20     <body>
21         <h1 id="title">Overview Map</h1>
22
23         <div id="tags">
24         </div>
25         <p id="shortdesc">
26             Enable a small Overview Map that moves/interacts with your main map.
27         </p>
28         <div id="map1"></div>
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>
32         <div id="map2"></div>
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
37         set in this way.</p>
38         <script defer="defer" type="text/javascript">
39         
40         // create the top map (with default overview map control)
41         var map1 = new OpenLayers.Map('map1');
42         
43         var ol = new OpenLayers.Layer.WMS(
44             "OpenLayers WMS", 
45             "http://labs.metacarta.com/wms/vmap0",
46             {layers: 'basic'}
47         );
48         
49         var jpl = new OpenLayers.Layer.WMS(
50             "NASA Global Mosaic", 
51             "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
52             {layers: "landsat7"}
53         );
54         
55         map1.addLayers([ol, jpl]);
56         map1.addControl(new OpenLayers.Control.LayerSwitcher());
57         
58         // create an overview map control with the default options
59         var overview1 = new OpenLayers.Control.OverviewMap();
60         map1.addControl(overview1);
61         
62         map1.setCenter(new OpenLayers.LonLat(0, 0), 2);
63         
64         // expand the overview map control
65         overview1.maximizeControl();
66         
67         
68         // create the bottom map (with advanced overview map control)
69         var mapOptions = {
70             maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), 
71             maxResolution: 296985/1024,
72             projection: "EPSG:2805",
73             units: "m"
74         };
75
76         var map2 = new OpenLayers.Map('map2', mapOptions);
77         
78         var bos = new OpenLayers.Layer.WMS(
79             "Boston", 
80             "http://boston.freemap.in/cgi-bin/mapserv",
81             {
82                 map: '/www/freemap.in/boston/map/gmaps.map', 
83                 layers: 'border,water,roads,rapid_transit,buildings', 
84                 format: 'png'
85             }
86         );
87         
88         map2.addLayers([bos]);
89         map2.addControl(new OpenLayers.Control.LayerSwitcher());
90         
91         // create an overview map control with non-default options
92         var controlOptions = {
93             mapOptions: mapOptions
94         }
95         var overview2 = new OpenLayers.Control.OverviewMap(controlOptions);
96         map2.addControl(overview2);
97         
98         map2.setCenter(new OpenLayers.LonLat(182500, 868500), 3);
99         
100         // expand the overview map control
101         overview2.maximizeControl();
102
103         </script>
104     </body>
105 </html>