1 <html xmlns="http://www.w3.org/1999/xhtml">
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">
11 <script src="../lib/OpenLayers.js"></script>
12 <script type="text/javascript">
13 var map, drawControls;
14 OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
16 map = new OpenLayers.Map('map');
17 var wmsLayer = new OpenLayers.Layer.WMS(
19 "http://labs.metacarta.com/wms/vmap0",
23 var vectors = new OpenLayers.Layer.Vector("Vector Layer");
24 map.addLayers([wmsLayer, vectors]);
25 map.addControl(new OpenLayers.Control.LayerSwitcher());
28 point: new OpenLayers.Control.DrawFeature(
29 vectors, OpenLayers.Handler.Point
31 line: new OpenLayers.Control.DrawFeature(
32 vectors, OpenLayers.Handler.Path
34 polygon: new OpenLayers.Control.DrawFeature(
35 vectors, OpenLayers.Handler.Polygon
37 select: new OpenLayers.Control.SelectFeature(
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
47 selecthover: new OpenLayers.Control.SelectFeature(
50 multiple: false, hover: true,
51 toggleKey: "ctrlKey", // ctrl key removes from selection
52 multipleKey: "shiftKey" // shift key adds to selection
57 for(var key in drawControls) {
58 map.addControl(drawControls[key]);
60 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
64 function toggleControl(element) {
65 for(key in drawControls) {
66 var control = drawControls[key];
67 if(element.value == key && element.checked) {
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();
86 <body onload="init()">
87 <h1 id="title">OpenLayers Select Feature Example</h1>
89 Select a feature on hover or click with the Control.SelectFeature on a
92 <div id="map" class="smallmap"></div>
93 <ul id="controlToggle">
95 <input type="radio" name="type" value="none" id="noneToggle"
96 onclick="toggleControl(this);" checked="checked" />
97 <label for="noneToggle">navigate</label>
100 <input type="radio" name="type" value="point" id="pointToggle"
101 onclick="toggleControl(this);" />
102 <label for="pointToggle">draw point</label>
105 <input type="radio" name="type" value="line" id="lineToggle"
106 onclick="toggleControl(this);" />
107 <label for="lineToggle">draw line</label>
110 <input type="radio" name="type" value="polygon" id="polygonToggle"
111 onclick="toggleControl(this);" />
112 <label for="polygonToggle">draw polygon</label>
115 <input type="radio" name="type" value="selecthover" id="selecthoverToggle"
116 onclick="toggleControl(this);" />
117 <label for="selecthoverToggle">Select features on hover</label>
120 <input type="radio" name="type" value="select" id="selectToggle"
121 onclick="toggleControl(this);" />
122 <label for="selectToggle">select feature</label>
125 <input id="box" type="checkbox" checked="checked"
126 name="box" onchange="update()" />
127 <label for="box">select features in a box</label>
130 <input id="clickout" type="checkbox"
131 name="clickout" onchange="update()" />
132 <label for="clickout">click out to unselect features</label>
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>