Modified the icon-sprite-webgl example to allow filtering on a string attribute

examples/icon-sprite-webgl.html

@@ -20,3 +20,7 @@ cloak:
 ---
 <div id="map" class="map"></div>
 <div>Current sighting: <span id="info"></span></div>
+<div>
+  Filter by UFO shape:
+  <select id="shape-filter"></select>
+</div>

examples/icon-sprite-webgl.js

@@ -10,6 +10,22 @@ import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new TileJSON({
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key,
+        crossOrigin: 'anonymous'
+      })
+    })
+  ],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0, 4000000],
+    zoom: 2
+  })
+});
+
 const vectorSource = new Vector({
   features: [],
   attributions: 'National UFO Reporting Center'
@@ -20,6 +36,15 @@ const newColor = [180, 255, 200];
 const size = 16;
 
 const style = {
+  variables: {
+    filterShape: 'all'
+  },
+  filter: [
+    'case',
+    ['!=', ['var', 'filterShape'], 'all'],
+    ['==', ['get', 'shape'], ['var', 'filterShape']],
+    true
+  ],
   symbol: {
     symbolType: 'image',
     src: 'data/ufo_shapes.png',
@@ -51,61 +76,71 @@ const style = {
   }
 };
 
-function loadData() {
+// key is shape name, value is sightings count
-  const client = new XMLHttpRequest();
+const shapeTypes = {
-  client.open('GET', 'data/csv/ufo_sighting_data.csv');
+  all: 0
-  client.onload = function() {
+};
-    const csv = client.responseText;
+const shapeSelect = document.getElementById('shape-filter');
-    const features = [];
+shapeSelect.addEventListener('input', function() {
-
+  style.variables.filterShape = shapeSelect.options[shapeSelect.selectedIndex].value;
-    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
+  map.render();
-
+});
-    let curIndex;
+function fillShapeSelect() {
-    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+  Object.keys(shapeTypes)
-      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+    .sort(function(a, b) {
-      prevIndex = curIndex + 1;
+      return shapeTypes[b] - shapeTypes[a];
-
+    })
-      const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);
+    .forEach(function(shape) {
-
+      const option = document.createElement('option');
-      // only keep valid points
+      option.text = `${shape} (${shapeTypes[shape]} sightings)`;
-      if (isNaN(coords[0]) || isNaN(coords[1])) {
+      option.value = shape;
-        continue;
+      shapeSelect.appendChild(option);
-      }
+    });
-
-      features.push(new Feature({
-        datetime: line[0],
-        year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
-        shape: line[2],
-        duration: line[3],
-        geometry: new Point(coords)
-      }));
-    }
-    vectorSource.addFeatures(features);
-  };
-  client.send();
 }
 
-loadData();
+const client = new XMLHttpRequest();
+client.open('GET', 'data/csv/ufo_sighting_data.csv');
+client.onload = function() {
+  const csv = client.responseText;
+  const features = [];
 
-const map = new Map({
+  let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
-  layers: [
+
-    new TileLayer({
+  let curIndex;
-      source: new TileJSON({
+  while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key,
+    const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
-        crossOrigin: 'anonymous'
+    prevIndex = curIndex + 1;
-      })
+
-    }),
+    const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);
-    new WebGLPointsLayer({
+
-      source: vectorSource,
+    // only keep valid points
-      style: style
+    if (isNaN(coords[0]) || isNaN(coords[1])) {
-    })
+      continue;
-  ],
+    }
-  target: document.getElementById('map'),
+
-  view: new View({
+    const shape = line[2];
-    center: [0, 4000000],
+    shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1;
-    zoom: 2
+    shapeTypes['all']++;
+
+    features.push(new Feature({
+      datetime: line[0],
+      year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
+      shape: shape,
+      duration: line[3],
+      geometry: new Point(coords)
+    }));
+  }
+  vectorSource.addFeatures(features);
+  fillShapeSelect();
+};
+client.send();
+
+map.addLayer(
+  new WebGLPointsLayer({
+    source: vectorSource,
+    style: style
   })
-});
+);
 
 const info = document.getElementById('info');
 map.on('pointermove', function(evt) {