]> dev.renevier.net Git - syp.git/blob - openlayers/examples/boxes.html
when selecting a cluster, zoom until features are detached
[syp.git] / openlayers / examples / boxes.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>OpenLayers Boxes 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"></script>
7         <script type="text/javascript">
8             var box_extents = [
9                 [-10, 50, 5, 60],
10                 [-75, 41, -71, 44],
11                 [-122.6, 37.6, -122.3, 37.9],
12                 [10, 10, 20, 20]
13             ];
14             var map;
15             function init(){
16                 map = new OpenLayers.Map('map');
17
18                 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
19                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
20
21                 var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );
22     
23                 for (var i = 0; i < box_extents.length; i++) {
24                     ext = box_extents[i];
25                     bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
26                     box = new OpenLayers.Marker.Box(bounds);
27                     box.events.register("click", box, function (e) {
28                         this.setBorder("yellow");
29                     });
30                     boxes.addMarker(box);
31                 }
32
33                 map.addLayers([ol_wms, boxes]);
34                 map.addControl(new OpenLayers.Control.LayerSwitcher());
35                 map.zoomToMaxExtent();
36             }
37         </script>
38     </head>
39     <body onload="init()">
40         <h1 id="title">Boxes Example</h1>
41
42         <div id="tags">
43         </div>
44
45         <p id="shortdesc">
46             Demonstrate marker and box type annotations on a map.
47         </p>
48         
49         <div id="map" class="smallmap"></div>
50
51         <div id="docs"></div>
52     </body>
53 </html>