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>