]> dev.renevier.net Git - syp.git/blob - openlayers/examples/select-feature-multilayer.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / openlayers / examples / select-feature-multilayer.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>SelectFeature Control on multiple vector layers</title> 
4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5     <link rel="stylesheet" href="style.css" type="text/css" />
6     <style type="text/css">
7         #controlToggle li {
8             list-style: none;
9         }
10     </style>
11     <script src="../lib/OpenLayers.js"></script>
12     <script type="text/javascript">
13         var map, selectControl;
14         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
15         function init(){
16             map = new OpenLayers.Map('map');
17             var wmsLayer = new OpenLayers.Layer.WMS(
18                 "OpenLayers WMS", 
19                 "http://labs.metacarta.com/wms/vmap0",
20                 {layers: 'basic'}
21             ); 
22
23             var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
24                 styleMap: new OpenLayers.StyleMap({
25                     "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
26                         externalGraphic: "../img/marker-green.png",
27                         graphicOpacity: 1,
28                         rotation: -45,
29                         pointRadius: 10
30                     }, OpenLayers.Feature.Vector.style["default"])),
31                     "select": new OpenLayers.Style({
32                         externalGraphic: "../img/marker-blue.png"
33                     })
34                 })
35             });
36             var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {
37                 styleMap: new OpenLayers.StyleMap({
38                     "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
39                         fillColor: "red",
40                         strokeColor: "gray",
41                         graphicName: "square",
42                         rotation: 45,
43                         pointRadius: 15
44                     }, OpenLayers.Feature.Vector.style["default"])),
45                     "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
46                         graphicName: "square",
47                         rotation: 45,
48                         pointRadius: 15
49                     }, OpenLayers.Feature.Vector.style["select"]))
50                 })
51             });
52             map.addLayers([wmsLayer, vectors1, vectors2]);
53             map.addControl(new OpenLayers.Control.LayerSwitcher());
54             
55             selectControl = new OpenLayers.Control.SelectFeature(
56                 [vectors1, vectors2],
57                 {
58                     clickout: true, toggle: false,
59                     multiple: false, hover: false,
60                     toggleKey: "ctrlKey", // ctrl key removes from selection
61                     multipleKey: "shiftKey" // shift key adds to selection
62                 }
63             );
64             
65             map.addControl(selectControl);
66             selectControl.activate();
67             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
68             vectors1.addFeatures(createFeatures());
69             vectors2.addFeatures(createFeatures());
70             
71             vectors1.events.on({
72                 "featureselected": function(e) {
73                     showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
74                 },
75                 "featureunselected": function(e) {
76                     showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
77                 }
78             });
79             vectors2.events.on({
80                 "featureselected": function(e) {
81                     showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
82                 },
83                 "featureunselected": function(e) {
84                     showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
85                 }
86             });
87         }
88         
89         function createFeatures() {
90             var extent = map.getExtent();
91             var features = [];
92             for(var i=0; i<10; ++i) {
93                 features.push(new OpenLayers.Feature.Vector(
94                     new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(),
95                     extent.bottom + (extent.top - extent.bottom) * Math.random()
96                 )));
97             }
98             return features;
99         }
100         
101         function showStatus(text) {
102             document.getElementById("status").innerHTML = text;            
103         }
104
105     </script>
106   </head>
107   <body onload="init()">
108     <h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>
109     <p id="shortdesc">
110       Select a feature on click with the Control.SelectFeature on multiple 
111       vector layers.
112     </p>  
113     <div id="map" class="smallmap"></div>
114     <div id="status"></div>
115   </body>
116 </html>