Website updates

Author: tschaub

dist/en/main/examples/filter-points-webgl.html

@@ -254,10 +254,6 @@ <h5 class="source-heading">main.js</h5>
 ];
 
 const style &#x3D; {
-  variables: {
-    minYear: 1850,
-    maxYear: 2015,
-  },
   filter: [&#x27;between&#x27;, [&#x27;get&#x27;, &#x27;year&#x27;], [&#x27;var&#x27;, &#x27;minYear&#x27;], [&#x27;var&#x27;, &#x27;maxYear&#x27;]],
   &#x27;circle-radius&#x27;: [
     &#x27;*&#x27;,
@@ -276,6 +272,16 @@ <h5 class="source-heading">main.js</h5>
   &#x27;circle-opacity&#x27;: [&#x27;-&#x27;, 1.0, [&#x27;*&#x27;, animRatio, 0.75]],
 };
 
+const pointsLayer &#x3D; new WebGLPointsLayer({
+  variables: {
+    minYear: 1850,
+    maxYear: 2015,
+  },
+  style: style,
+  source: vectorSource,
+  disableHitDetection: true,
+});
+
 // handle input values &amp; events
 const minYearInput &#x3D; document.getElementById(&#x27;min-year&#x27;);
 const maxYearInput &#x3D; document.getElementById(&#x27;max-year&#x27;);
@@ -287,11 +293,11 @@ <h5 class="source-heading">main.js</h5>
 }
 
 minYearInput.addEventListener(&#x27;input&#x27;, function () {
-  style.variables.minYear &#x3D; parseInt(minYearInput.value);
+  pointsLayer.updateStyleVariables({minYear: parseInt(minYearInput.value)});
   updateStatusText();
 });
 maxYearInput.addEventListener(&#x27;input&#x27;, function () {
-  style.variables.maxYear &#x3D; parseInt(maxYearInput.value);
+  pointsLayer.updateStyleVariables({maxYear: parseInt(minYearInput.value)});
   updateStatusText();
 });
 updateStatusText();
@@ -336,11 +342,7 @@ <h5 class="source-heading">main.js</h5>
         layer: &#x27;stamen_toner&#x27;,
       }),
     }),
-    new WebGLPointsLayer({
-      style: style,
-      source: vectorSource,
-      disableHitDetection: true,
-    }),
+    pointsLayer,
   ],
   target: document.getElementById(&#x27;map&#x27;),
   view: new View({

dist/en/main/examples/filter-points-webgl.js

@@ -239,9 +239,6 @@ <h5 class="source-heading">main.js</h5>
 const newColor &#x3D; [180, 255, 200];
 
 const style &#x3D; {
-  variables: {
-    filterShape: &#x27;all&#x27;,
-  },
   filter: [
     &#x27;any&#x27;,
     [&#x27;&#x3D;&#x3D;&#x27;, [&#x27;var&#x27;, &#x27;filterShape&#x27;], &#x27;all&#x27;],
@@ -282,9 +279,20 @@ <h5 class="source-heading">main.js</h5>
   &#x27;icon-scale&#x27;: 0.5,
 };
 
+const pointsLayer &#x3D; new WebGLPointsLayer({
+  variables: {
+    filterShape: &#x27;all&#x27;,
+  },
+  source: new VectorSource({
+    features: [],
+    attributions: &#x27;National UFO Reporting Center&#x27;,
+  }),
+  style: style,
+});
+
 const shapeSelect &#x3D; document.getElementById(&#x27;shape-filter&#x27;);
 shapeSelect.addEventListener(&#x27;input&#x27;, function () {
-  style.variables.filterShape &#x3D; shapeSelect.value;
+  pointsLayer.updateStyleVariables({filterShape: shapeSelect.value});
   map.render();
 });
 function fillShapeSelect(shapeTypes) {
@@ -332,15 +340,8 @@ <h5 class="source-heading">main.js</h5>
     );
   }
   shapeTypes[&#x27;all&#x27;] &#x3D; features.length;
-  map.addLayer(
-    new WebGLPointsLayer({
-      source: new VectorSource({
-        features: features,
-        attributions: &#x27;National UFO Reporting Center&#x27;,
-      }),
-      style: style,
-    }),
-  );
+  pointsLayer.getSource().addFeatures(features);
+  map.addLayer(pointsLayer);
   fillShapeSelect(shapeTypes);
 });
 client.send();