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,7 +76,28 @@ const style = {
   }
 };
 
-function loadData() {
+// key is shape name, value is sightings count
+const shapeTypes = {
+  all: 0
+};
+const shapeSelect = document.getElementById('shape-filter');
+shapeSelect.addEventListener('input', function() {
+  style.variables.filterShape = shapeSelect.options[shapeSelect.selectedIndex].value;
+  map.render();
+});
+function fillShapeSelect() {
+  Object.keys(shapeTypes)
+    .sort(function(a, b) {
+      return shapeTypes[b] - shapeTypes[a];
+    })
+    .forEach(function(shape) {
+      const option = document.createElement('option');
+      option.text = `${shape} (${shapeTypes[shape]} sightings)`;
+      option.value = shape;
+      shapeSelect.appendChild(option);
+    });
+}
+
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/ufo_sighting_data.csv');
 client.onload = function() {
@@ -72,40 +118,29 @@ function loadData() {
       continue;
     }
 
+    const shape = line[2];
+    shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1;
+    shapeTypes['all']++;
+
     features.push(new Feature({
       datetime: line[0],
       year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
-        shape: line[2],
+      shape: shape,
       duration: line[3],
       geometry: new Point(coords)
     }));
   }
   vectorSource.addFeatures(features);
+  fillShapeSelect();
 };
 client.send();
-}
 
-loadData();
+map.addLayer(
-
-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'
-      })
-    }),
   new WebGLPointsLayer({
     source: vectorSource,
     style: style
   })
-  ],
+);
-  target: document.getElementById('map'),
-  view: new View({
-    center: [0, 4000000],
-    zoom: 2
-  })
-});
 
 const info = document.getElementById('info');
 map.on('pointermove', function(evt) {