Feature selecting examples

examples/select-features.html

@@ -1,22 +0,0 @@
----
-layout: example.html
-title: Select Features
-shortdesc: Example of using the Select interaction.
-docs: >
-  Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</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>
-  <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
-tags: "select, vector"
----
-<div id="map" class="map"></div>
-<form class="form-inline">
-  <label>Action type &nbsp;</label>
-    <select id="type" class="form-control">
-      <option value="click" selected>Click</option>
-      <option value="singleclick">Single-click</option>
-      <option value="pointermove">Hover</option>
-      <option value="altclick">Alt+Click</option>
-      <option value="none">None</option>
-    </select>
-  <span id="status">&nbsp;0 selected features</span>
-</form>

examples/select-hover-features.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Select Features by Hover
+shortdesc: Example of selecting features by hovering.
+docs: >
+  In this example, a listener is registered on the map's <code>pointermove</code> to highlight the currently hovered feature.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<span id="status"></span>

examples/select-hover-features.js

@@ -0,0 +1,61 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+const vector = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  })
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+let selected = null;
+const status = document.getElementById('status');
+
+map.on('pointermove', function(e) {
+  if (selected !== null) {
+    selected.setStyle(undefined);
+    selected = null;
+  }
+
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    selected = f;
+    f.setStyle(highlightStyle);
+    return true;
+  });
+
+  if (selected) {
+    status.innerHTML = ' Hovering: ' + selected.get('name');
+  } else {
+    status.innerHTML = ' ';
+  }
+});

examples/select-multiple-features.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Select multiple Features
+shortdesc: Example of selecting multiple features.
+docs: >
+  In this example, a listener is registered on the map's <code>singleclick</code> event to add and remove features from an array.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<span id="status">&nbsp;0 selected features</span>

examples/select-multiple-features.js

@@ -0,0 +1,59 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+const vector = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  })
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    multiWorld: true
+  })
+});
+
+const selected = [];
+
+const status = document.getElementById('status');
+
+map.on('singleclick', function(e) {
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    const selIndex = selected.indexOf(f);
+    if (selIndex < 0) {
+      selected.push(f);
+      f.setStyle(highlightStyle);
+    } else {
+      selected.splice(selIndex, 1);
+      f.setStyle(undefined);
+    }
+  });
+
+  status.innerHTML = '&nbsp;' + selected.length + ' selected features';
+});