]> dev.renevier.net Git - syp.git/blob - openlayers/examples/select-feature.html
forbird creation or deletion of item; forbids adding or deleting an image
[syp.git] / openlayers / examples / select-feature.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>SelectFeature Control on Layer.Vector</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, drawControls;
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 vectors = new OpenLayers.Layer.Vector("Vector Layer");
24             map.addLayers([wmsLayer, vectors]);
25             map.addControl(new OpenLayers.Control.LayerSwitcher());
26             
27             drawControls = {
28                 point: new OpenLayers.Control.DrawFeature(
29                     vectors, OpenLayers.Handler.Point
30                 ),
31                 line: new OpenLayers.Control.DrawFeature(
32                     vectors, OpenLayers.Handler.Path
33                 ),
34                 polygon: new OpenLayers.Control.DrawFeature(
35                     vectors, OpenLayers.Handler.Polygon
36                 ),
37                 select: new OpenLayers.Control.SelectFeature(
38                     vectors,
39                     {
40                         clickout: false, toggle: false,
41                         multiple: false, hover: false,
42                         toggleKey: "ctrlKey", // ctrl key removes from selection
43                         multipleKey: "shiftKey", // shift key adds to selection
44                         box: true
45                     }
46                 ),
47                 selecthover: new OpenLayers.Control.SelectFeature(
48                     vectors,
49                     {
50                         multiple: false, hover: true,
51                         toggleKey: "ctrlKey", // ctrl key removes from selection
52                         multipleKey: "shiftKey" // shift key adds to selection
53                     }
54                 )
55             };
56             
57             for(var key in drawControls) {
58                 map.addControl(drawControls[key]);
59             }
60             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
61
62         }
63
64         function toggleControl(element) {
65             for(key in drawControls) {
66                 var control = drawControls[key];
67                 if(element.value == key && element.checked) {
68                     control.activate();
69                 } else {
70                     control.deactivate();
71                 }
72             }
73         }
74
75         function update() {
76             var clickout = document.getElementById("clickout").checked;
77             drawControls.select.clickout = clickout;
78             drawControls.select.box = document.getElementById("box").checked;
79             if(drawControls.select.active) {
80                 drawControls.select.deactivate();
81                 drawControls.select.activate();
82             }
83         }
84     </script>
85   </head>
86   <body onload="init()">
87     <h1 id="title">OpenLayers Select Feature Example</h1>
88     <p id="shortdesc">
89       Select a feature on hover or click with the Control.SelectFeature on a
90       vector layer.
91     </p>  
92     <div id="map" class="smallmap"></div>
93     <ul id="controlToggle">
94         <li>
95             <input type="radio" name="type" value="none" id="noneToggle"
96                    onclick="toggleControl(this);" checked="checked" />
97             <label for="noneToggle">navigate</label>
98         </li>
99         <li>
100             <input type="radio" name="type" value="point" id="pointToggle"
101                    onclick="toggleControl(this);" />
102             <label for="pointToggle">draw point</label>
103         </li>
104         <li>
105             <input type="radio" name="type" value="line" id="lineToggle"
106                    onclick="toggleControl(this);" />
107             <label for="lineToggle">draw line</label>
108         </li>
109         <li>
110             <input type="radio" name="type" value="polygon" id="polygonToggle"
111                    onclick="toggleControl(this);" />
112             <label for="polygonToggle">draw polygon</label>
113         </li>
114         <li>
115             <input type="radio" name="type" value="selecthover" id="selecthoverToggle"
116                    onclick="toggleControl(this);" />
117             <label for="selecthoverToggle">Select features on hover</label>
118         </li>
119         <li>
120             <input type="radio" name="type" value="select" id="selectToggle"
121                    onclick="toggleControl(this);" />
122             <label for="selectToggle">select feature</label>
123             <ul>
124                 <li>
125                     <input id="box" type="checkbox" checked="checked"
126                            name="box" onchange="update()" />
127                     <label for="box">select features in a box</label>
128                 </li>
129                 <li>
130                     <input id="clickout" type="checkbox"
131                            name="clickout" onchange="update()" />
132                     <label for="clickout">click out to unselect features</label>
133                 </li>
134             </ul>
135         </li>
136     </ul>
137     <p>Use the shift key to select multiple features.  Use the ctrl key to
138     toggle selection on features one at a time.  Note: the "clickout" option has no
139     effect when "hover" is selected.</p>
140   </body>
141 </html>