diff --git a/examples/select-features.html b/examples/select-features.html index 8e3905f067..7930f4b29d 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -33,7 +33,17 @@

Select features example

-

Example of using the Select interaction. Select features by clicking polygons. Hold the Shift-key to toggle the feature in the selection.

+

Example of using the Select interaction. Choose between Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

+

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

+
+ + +

See the select-features.js source to see how this is done.

diff --git a/examples/select-features.js b/examples/select-features.js index 5cd47a3729..7386fa95cf 100644 --- a/examples/select-features.js +++ b/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(); diff --git a/src/ol/events/condition.js b/src/ol/events/condition.js index a1c61faf7d..eaca8869c2 100644 --- a/src/ol/events/condition.js +++ b/src/ol/events/condition.js @@ -55,6 +55,26 @@ ol.events.condition.altShiftKeysOnly = function(mapBrowserEvent) { ol.events.condition.always = goog.functions.TRUE; +/** + * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event. + * @return {boolean} True if the event is a map `click` event. + * @todo api + */ +ol.events.condition.click = function(mapBrowserEvent) { + return mapBrowserEvent.type == ol.MapBrowserEvent.EventType.CLICK; +}; + + +/** + * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event. + * @return {boolean} True if the browser event is a `mousemove` event. + * @todo api + */ +ol.events.condition.mouseMove = function(mapBrowserEvent) { + return mapBrowserEvent.originalEvent.type == 'mousemove'; +}; + + /** * Always false. * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event. @@ -66,7 +86,7 @@ ol.events.condition.never = goog.functions.FALSE; /** * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event. - * @return {boolean} True if the event is a `singleclick` event. + * @return {boolean} True if the event is a map `singleclick` event. * @todo api */ ol.events.condition.singleClick = function(mapBrowserEvent) {