Fix broken WebGLPoints examples, clarify 10.3.0 patch notes

changelog/v10.3.0.md

@@ -8,6 +8,40 @@ In addition to many important bug fixes, the 10.3 release adds several improveme
 
 Previously, the `transform()` function from the `ol/proj` module would apply the identity transform if either the source or the destination projections were unrecognized. Now this function will throw an error if it cannot perform the transform. You can check whether a projection is registered by calling the `get()` function from `ol/proj` - this function returns `null` if the projection definition for a provided identifier is not known.
 
+#### The format of the style for `WebGLPointsLayer` has changed
+
+Such a layer would previously be created this way:
+```js
+// Before
+new WebGLPointsLayer({
+  style: {
+    // variables were part of the `style` object
+    variables: {
+      minYear: 1850,
+      maxYear: 2015,
+    },
+    filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
+  },
+  source: vectorSource,
+})
+```
+
+From this release on, **variables are now set as a separate object** at the root of the options object:
+```js
+// Now
+new WebGLPointsLayer({
+  style: {
+    filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
+  },
+  variables: {
+    minYear: 1850,
+    maxYear: 2015,
+  },
+  source: vectorSource,
+})
+```
+
+
 ### List of all changes
 
 See below for a complete list of features and fixes.

examples/filter-points-webgl.js

@@ -34,10 +34,6 @@ const animRatio = [
 ];
 
 const style = {
-  variables: {
-    minYear: 1850,
-    maxYear: 2015,
-  },
   filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
   'circle-radius': [
     '*',
@@ -56,6 +52,16 @@ const style = {
   'circle-opacity': ['-', 1.0, ['*', animRatio, 0.75]],
 };
 
+const pointsLayer = new WebGLPointsLayer({
+  variables: {
+    minYear: 1850,
+    maxYear: 2015,
+  },
+  style: style,
+  source: vectorSource,
+  disableHitDetection: true,
+});
+
 // handle input values & events
 const minYearInput = document.getElementById('min-year');
 const maxYearInput = document.getElementById('max-year');
@@ -67,11 +73,11 @@ function updateStatusText() {
 }
 
 minYearInput.addEventListener('input', function () {
-  style.variables.minYear = parseInt(minYearInput.value);
+  pointsLayer.updateStyleVariables({minYear: parseInt(minYearInput.value)});
   updateStatusText();
 });
 maxYearInput.addEventListener('input', function () {
-  style.variables.maxYear = parseInt(maxYearInput.value);
+  pointsLayer.updateStyleVariables({maxYear: parseInt(minYearInput.value)});
   updateStatusText();
 });
 updateStatusText();
@@ -116,11 +122,7 @@ const map = new Map({
         layer: 'stamen_toner',
       }),
     }),
-    new WebGLPointsLayer({
-      style: style,
-      source: vectorSource,
-      disableHitDetection: true,
-    }),
+    pointsLayer,
   ],
   target: document.getElementById('map'),
   view: new View({

examples/icon-sprite-webgl.js

@@ -34,9 +34,6 @@ const oldColor = [255, 160, 110];
 const newColor = [180, 255, 200];
 
 const style = {
-  variables: {
-    filterShape: 'all',
-  },
   filter: [
     'any',
     ['==', ['var', 'filterShape'], 'all'],
@@ -77,9 +74,20 @@ const style = {
   'icon-scale': 0.5,
 };
 
+const pointsLayer = new WebGLPointsLayer({
+  variables: {
+    filterShape: 'all',
+  },
+  source: new VectorSource({
+    features: [],
+    attributions: 'National UFO Reporting Center',
+  }),
+  style: style,
+});
+
 const shapeSelect = document.getElementById('shape-filter');
 shapeSelect.addEventListener('input', function () {
-  style.variables.filterShape = shapeSelect.value;
+  pointsLayer.updateStyleVariables({filterShape: shapeSelect.value});
   map.render();
 });
 function fillShapeSelect(shapeTypes) {
@@ -127,15 +135,8 @@ client.addEventListener('load', function () {
     );
   }
   shapeTypes['all'] = features.length;
-  map.addLayer(
-    new WebGLPointsLayer({
-      source: new VectorSource({
-        features: features,
-        attributions: 'National UFO Reporting Center',
-      }),
-      style: style,
-    }),
-  );
+  pointsLayer.getSource().addFeatures(features);
+  map.addLayer(pointsLayer);
   fillShapeSelect(shapeTypes);
 });
 client.send();