Website updates

Author: tschaub

dist/en/main/apidoc/module-ol_layer_WebGLTile-WebGLTileLayer.html

@@ -198,7 +198,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js">layer/WebGLTile.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js#L286">line 286</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js#L285">line 285</a>
         </div>
 
     </div>
@@ -1396,7 +1396,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js">layer/WebGLTile.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js#L517">line 517</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js#L516">line 516</a>
         </div>
 
     </div>
@@ -5869,7 +5869,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js">layer/WebGLTile.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js#L506">line 506</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/layer/WebGLTile.js#L505">line 505</a>
         </div>
 
     </div>

dist/en/main/apidoc/module-ol_style_flat.html

@@ -87,6 +87,7 @@
             <li data-name="rule"><a href="module-ol_style_flat.html#~Rule">Rule</a>
             <li data-name="sizeexpression"><a href="module-ol_style_flat.html#~SizeExpression">SizeExpression</a>
             <li data-name="stringexpression"><a href="module-ol_style_flat.html#~StringExpression">StringExpression</a>
+            <li data-name="stylevariables"><a href="module-ol_style_flat.html#~StyleVariables">StyleVariables</a>
         </ul>
     </div>
               <li class="loading">Loading …
@@ -3809,6 +3810,58 @@ <h4 class="name">
 
 
 
+    
+</dl>
+
+
+    
+</dd>
+
+            
+                
+<dt class="">
+    <div class="nameContainer">
+        <div class="anchor" id="~StyleVariables">
+        </div>
+        <h4 class="name">
+            StyleVariables<span class="type-signature type object.<string, (number|array.<number>|string|boolean)>">{Object.&lt;string, (number|Array.&lt;number>|string|boolean)>}</span> 
+            
+
+        </h4>
+    </div>
+    
+</dt>
+<dd class="">
+    
+    <div class="description">
+        <p>Style variables are provided as an object. The variables can be read in a <a href="module-ol_expr_expression.html#~ExpressionValue"><code>style expression</code></a>
+using the <code>['var', 'varName']</code> operator.
+Each variable must hold a literal value (not an expression).</p>
+    </div>
+    
+
+    
+<dl class="details">
+    
+        
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
 </dl>
 

dist/en/main/apidoc/navigation.tmpl.html

@@ -7125,6 +7125,7 @@
             <li data-name="rule"><a href="module-ol_style_flat.html#~Rule">Rule</a>
             <li data-name="sizeexpression"><a href="module-ol_style_flat.html#~SizeExpression">SizeExpression</a>
             <li data-name="stringexpression"><a href="module-ol_style_flat.html#~StringExpression">StringExpression</a>
+            <li data-name="stylevariables"><a href="module-ol_style_flat.html#~StyleVariables">StyleVariables</a>
         </ul>
     </div>
 <li class="item item-class" data-longname="module:ol/style/Icon~Icon" data-name="ol/style/icon">

dist/en/main/examples/common.js

@@ -309,17 +309,13 @@ <h5 class="modal-title" id="tag-example-title"></h5>
       <div class="row-fluid">
         <h5 class="source-heading">main.js</h5>
         <pre><code id="example-js-source" class="language-js">import IGC from &#x27;ol/format/IGC.js&#x27;;
-import Layer from &#x27;ol/layer/Layer.js&#x27;;
 import Map from &#x27;ol/Map.js&#x27;;
 import View from &#x27;ol/View.js&#x27;;
-import WebGLVectorLayerRenderer from &#x27;ol/renderer/webgl/VectorLayer.js&#x27;;
+import WebGLVectorLayer from &#x27;ol/layer/WebGLVector.js&#x27;;
 import {OSM, Vector as VectorSource} from &#x27;ol/source.js&#x27;;
 import {Tile as TileLayer} from &#x27;ol/layer.js&#x27;;
 
 const lineStyle &#x3D; {
-  variables: {
-    timestamp: 1303240000,
-  },
   &#x27;stroke-width&#x27;: 4,
   &#x27;stroke-color&#x27;: [
     &#x27;interpolate&#x27;,
@@ -333,15 +329,6 @@ <h5 class="source-heading">main.js</h5>
   filter: [&#x27;&lt;&#x3D;&#x27;, [&#x27;line-metric&#x27;], [&#x27;var&#x27;, &#x27;timestamp&#x27;]],
 };
 
-class WebGLLayer extends Layer {
-  createRenderer() {
-    return new WebGLVectorLayerRenderer(this, {
-      className: this.getClassName(),
-      style: lineStyle,
-    });
-  }
-}
-
 const igcUrls &#x3D; [
   &#x27;data/igc/Clement-Latour.igc&#x27;,
   &#x27;data/igc/Damien-de-Baenst.igc&#x27;,
@@ -366,8 +353,13 @@ <h5 class="source-heading">main.js</h5>
     });
 }
 
-const vectorLayer &#x3D; new WebGLLayer({
+let timestamp &#x3D; 1303240000;
+const vectorLayer &#x3D; new WebGLVectorLayer({
   source,
+  style: lineStyle,
+  variables: {
+    timestamp,
+  },
 });
 
 const map &#x3D; new Map({
@@ -385,11 +377,12 @@ <h5 class="source-heading">main.js</h5>
 });
 
 function showTime() {
-  const time &#x3D; new Date(lineStyle.variables.timestamp * 1000);
-  document.getElementById(&#x27;time-value&#x27;).textContent &#x3D; time.toUTCString();
+  const dateTime &#x3D; new Date(timestamp * 1000);
+  document.getElementById(&#x27;time-value&#x27;).textContent &#x3D; dateTime.toUTCString();
 }
 document.getElementById(&#x27;time-input&#x27;).addEventListener(&#x27;input&#x27;, (event) &#x3D;&gt; {
-  lineStyle.variables.timestamp &#x3D; parseFloat(event.target.value);
+  timestamp &#x3D; parseFloat(event.target.value);
+  vectorLayer.updateStyleVariables({timestamp});
   showTime();
   map.render();
 });