Add "action type" select to select-features example

Making it possible to choose between three select interactions, one that works on "singleclick", one that works on "click", and one that works on "mousemove".

examples/select-features.html

@@ -33,7 +33,17 @@
 
         <div class="span12">
           <h4 id="title">Select features example</h4>
-          <p id="shortdesc">Example of using the Select interaction. Select features by clicking polygons. Hold the Shift-key to toggle the feature in the selection.</p>
+          <p id="shortdesc">Example of using the Select interaction. Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
+          <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
+          <form class="form-inline">
+            <label>Action type &nbsp;</label>
+              <select id="type">
+                <option value="none" selected>None</option>
+                <option value="singleclick">Single-click</option>
+                <option value="click">Click</option>
+                <option value="mousemove">Hover</option>
+              </select>
+          </form>
           <div id="docs">
             <p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>
           </div>

examples/select-features.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.events.condition');
 goog.require('ol.interaction');
 goog.require('ol.interaction.Select');
 goog.require('ol.layer.Tile');
@@ -18,10 +19,7 @@ var vector = new ol.layer.Vector({
   })
 });
 
-var select = new ol.interaction.Select();
-
 var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([select]),
   layers: [raster, vector],
   target: 'map',
   view: new ol.View({
@@ -29,3 +27,46 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+var select = null;  // ref to currently selected interaction
+
+// select interaction working on "singleclick"
+var selectSingleClick = new ol.interaction.Select();
+
+// select interaction working on "click"
+var selectClick = new ol.interaction.Select({
+  condition: ol.events.condition.click
+});
+
+// select interaction working on "mousemove"
+var selectMouseMove = new ol.interaction.Select({
+  condition: ol.events.condition.mouseMove
+});
+
+var selectElement = document.getElementById('type');
+
+var changeInteraction = function() {
+  if (select !== null) {
+    map.removeInteraction(select);
+  }
+  var value = selectElement.value;
+  if (value == 'singleclick') {
+    select = selectSingleClick;
+  } else if (value == 'click') {
+    select = selectClick;
+  } else if (value == 'mousemove') {
+    select = selectMouseMove;
+  } else {
+    select = null;
+  }
+  if (select !== null) {
+    map.addInteraction(select);
+  }
+};
+
+
+/**
+ * onchange callback on the select element.
+ */
+selectElement.onchange = changeInteraction;
+changeInteraction();