Website updates

Author: ahocevar

dist/en/main/apidoc/module-ol_style_Icon-Icon.html

@@ -1264,7 +1264,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L547">line 547</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L583">line 583</a>
         </div>
 
     </div>
@@ -1354,7 +1354,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L417">line 417</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L453">line 453</a>
         </div>
 
     </div>
@@ -1582,7 +1582,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L462">line 462</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L498">line 498</a>
         </div>
 
     </div>
@@ -1672,7 +1672,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L428">line 428</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L464">line 464</a>
         </div>
 
     </div>
@@ -2083,7 +2083,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L522">line 522</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L558">line 558</a>
         </div>
 
     </div>
@@ -2173,7 +2173,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L497">line 497</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L533">line 533</a>
         </div>
 
     </div>
@@ -2263,7 +2263,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L531">line 531</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L567">line 567</a>
         </div>
 
     </div>
@@ -2353,7 +2353,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L586">line 586</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L622">line 622</a>
         </div>
 
     </div>
@@ -3076,7 +3076,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L565">line 565</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L601">line 601</a>
         </div>
 
     </div>
@@ -3205,7 +3205,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js">style/Icon.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L506">line 506</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/style/Icon.js#L542">line 542</a>
         </div>
 
     </div>

dist/en/main/examples/common.js

@@ -756,7 +756,20 @@ function buildIcon(flatStyle, context) {
     flatStyle,
     prefix + 'anchor-y-units',
   );
-  const color = optionalColorLike(flatStyle, prefix + 'color');
+  const colorValue = getExpressionValue(flatStyle, prefix + 'color');
+  let color;
+  let evaluateColor = null;
+  if (colorValue !== undefined) {
+    const isColorExpression =
+      Array.isArray(colorValue) &&
+      colorValue.length > 0 &&
+      typeof colorValue[0] === 'string';
+    if (isColorExpression) {
+      evaluateColor = colorLikeEvaluator(flatStyle, prefix + 'color', context);
+    } else {
+      color = requireColorLike(colorValue, prefix + 'color');
+    }
+  }
   const crossOrigin = optionalString(flatStyle, prefix + 'cross-origin');
   const offset = optionalNumberArray(flatStyle, prefix + 'offset');
   const offsetOrigin = optionalIconOrigin(flatStyle, prefix + 'offset-origin');
@@ -768,22 +781,34 @@ function buildIcon(flatStyle, context) {
     prefix + 'declutter-mode',
   );
 
-  const icon = new Icon({
+  const iconOptions = {
     src,
     anchorOrigin,
     anchorXUnits,
     anchorYUnits,
-    color,
     crossOrigin,
     offset,
     offsetOrigin,
     height,
     width,
     size,
     declutterMode,
-  });
+  };
+
+  let icon = null;
 
   return function (context) {
+    if (!icon) {
+      // lazily create the icon to allow for expression evaluation
+      const initialColor = evaluateColor ? evaluateColor(context) : color;
+      icon = new Icon(
+        initialColor !== undefined
+          ? Object.assign({}, iconOptions, {color: initialColor})
+          : Object.assign({}, iconOptions),
+      );
+    } else if (evaluateColor) {
+      icon.setColor(evaluateColor(context));
+    }
     if (evaluateOpacity) {
       icon.setOpacity(evaluateOpacity(context));
     }
@@ -1311,19 +1336,6 @@ function optionalDeclutterMode(flatStyle, property) {
   return encoded;
 }
 
-/**
- * @param {FlatStyle} flatStyle The flat style.
- * @param {string} property The symbolizer property.
- * @return {string|Array<number>|undefined} A string or an array of color values or undefined.
- */
-function optionalColorLike(flatStyle, property) {
-  const encoded = flatStyle[property];
-  if (encoded === undefined) {
-    return undefined;
-  }
-  return requireColorLike(encoded, property);
-}
-
 /**
  * @param {any} value The value.
  * @param {string} property The property.