diff --git a/examples/select-features.html b/examples/select-features.html new file mode 100644 index 0000000000..a764084d44 --- /dev/null +++ b/examples/select-features.html @@ -0,0 +1,50 @@ + + + + + + + + + + + Select features example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Select features example

+

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

+
+

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

+
+
select, vector
+
+ +
+ +
+ + + + + + diff --git a/examples/select-features.js b/examples/select-features.js new file mode 100644 index 0000000000..388a411351 --- /dev/null +++ b/examples/select-features.js @@ -0,0 +1,60 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.interaction'); +goog.require('ol.interaction.Select'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.render.FeaturesOverlay'); +goog.require('ol.source.GeoJSON'); +goog.require('ol.source.MapQuest'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + +var raster = new ol.layer.Tile({ + source: new ol.source.MapQuest({layer: 'sat'}) +}); + +var unselectedStyle = [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255,255,255,0.25)' + }), + stroke: new ol.style.Stroke({ + color: '#6666ff' + }) +})]; + +var selectedStyle = [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255,255,255,0.5)' + }) +})]; + +var vector = new ol.layer.Vector({ + source: new ol.source.GeoJSON({ + url: 'data/geojson/countries.geojson' + }), + styleFunction: function(feature, layer) { + return unselectedStyle; + } +}); + +var select = new ol.interaction.Select({ + featuresOverlay: new ol.render.FeaturesOverlay({ + styleFunction: function(feature, layer) { + return selectedStyle; + } + }) +}); + +var map = new ol.Map({ + interactions: ol.interaction.defaults().extend([select]), + layers: [raster, vector], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +});