ol 10.2.2-dev.1732295358287 → 10.2.2-dev.1732628402738

package/render/webgl/VectorStyleRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorStyleRenderer.d.ts","sourceRoot":"","sources":["VectorStyleRenderer.js"],"names":[],"mappings":";;;;yBA4BU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmBF,CAAS,IAAwD,EAAnD,OAAO,yBAAyB,EAAE,iBAAiB,EAAE,IAAmC,EAAnC,OAAO,eAAe,EAAE,WAAW,KAAE,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC;;mCAK7H;QAAO,MAAM,GAAE,mBAAmB;CAAC;iCACnC;QAAO,MAAM,GAAE,OAAO,oBAAoB,EAAE,YAAY;CAAC;;;;;oBAKxD,KAAK,CAAC,gBAAgB,CAAC;;;;uBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;kBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;6BACvB,OAAO,oBAAoB,EAAE,SAAS;;;;;;yBAKtC,YAAY,GAAC,IAAI;;;;4BACjB,YAAY,GAAC,IAAI;;;;uBACjB,YAAY,GAAC,IAAI;;;;;;;;;YAKjB,MAAM;;;;cACN,MAAM;;;;;;aAKN,OAAO,8BAA8B,EAAE,aAAa;;;;;;;;;;;;;;;0BAOrD,OAAO,sBAAsB,EAAE,UAAU,GAAC,YAAY;AA5CnE;;;;;;;GAOG;AAEH;;;GAGG;AAEH;;;;;;GAMG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AAEH;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;;;OAIG;IACH,4BAJW,WAAW,UACX,OAAO,uBAAuB,EAAE,OAAO,sBACvC,OAAO,EAsMjB;IAnMC;;;OAGG;IACH,gBAAY;IAEZ;;OAEG;IACH,6BAA8C;IAgB9C;;;OAGG;IACH,qBAAiB;IAEjB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,iBAAuD;IAErD;;OAEG;IACH,0BAA8D;IAC9D;;OAEG;IACH,4BAAkE;IAGpE;;;OAGG;IACH,mBAA2D;IAEzD;;OAEG;IACH,4BAAkE;IAClE;;OAEG;IACH,8BAAsE;IAGxE;;;OAGG;IACH,mBAA2D;IAEzD;;OAEG;IACH,4BAAkE;IAClE;;OAEG;IACH,8BAAsE;IAcxE;;OAEG;IACH,0BAIC;IACD;;OAEG;IACH,kBAAiC;IASjC;;;OAGG;IACH,+BAOC;IACD;;;OAGG;IACH,kCAqCC;IACD;;;OAGG;IACH,6BAYC;IAKH;;;;OAIG;IACH,+BAJW,OAAO,yBAAyB,EAAE,OAAO,aACzC,OAAO,oBAAoB,EAAE,SAAS,GACrC,OAAO,CAAC,YAAY,CAAC,CAqChC;IAED;;;;;OAKG;IACH,oCA+BC;IAED;;;;;;OAMG;IACH,gCAuEC;IAED;;;;;OAKG;IACH,gBAJW,YAAY,cACZ,OAAO,cAAc,EAAE,UAAU,qBACjC,MAAY,IAAI,QA8B1B;IAED;;;;;;;;OAQG;IACH,wBAkBC;IAED;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,YACvC,YAAY,QAuCtB;CACF;6BA5jB4B,uBAAuB"}
+{"version":3,"file":"VectorStyleRenderer.d.ts","sourceRoot":"","sources":["VectorStyleRenderer.js"],"names":[],"mappings":";;;;yBA4BU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmBF,CAAS,IAAwD,EAAnD,OAAO,yBAAyB,EAAE,iBAAiB,EAAE,IAAmC,EAAnC,OAAO,eAAe,EAAE,WAAW,KAAE,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC;;mCAK7H;QAAO,MAAM,GAAE,mBAAmB;CAAC;iCACnC;QAAO,MAAM,GAAE,OAAO,oBAAoB,EAAE,YAAY;CAAC;;;;;oBAKxD,KAAK,CAAC,gBAAgB,CAAC;;;;uBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;kBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;6BACvB,OAAO,oBAAoB,EAAE,SAAS;;;;;;yBAKtC,YAAY,GAAC,IAAI;;;;4BACjB,YAAY,GAAC,IAAI;;;;uBACjB,YAAY,GAAC,IAAI;;;;;;;;;YAKjB,MAAM;;;;cACN,MAAM;;;;;;aAKN,OAAO,8BAA8B,EAAE,aAAa;;;;;;;;;;;;;;;0BAOrD,OAAO,sBAAsB,EAAE,UAAU,GAAC,YAAY;AA5CnE;;;;;;;GAOG;AAEH;;;GAGG;AAEH;;;;;;GAMG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AAEH;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;;;;OAKG;IACH,4BALW,WAAW,aACX,OAAO,qBAAqB,EAAE,cAAc,UAC5C,OAAO,uBAAuB,EAAE,OAAO,sBACvC,OAAO,EAuMjB;IApMC;;;OAGG;IACH,gBAAY;IAEZ;;OAEG;IACH,6BAA8C;IAiB9C;;;OAGG;IACH,qBAAiB;IAEjB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,iBAAuD;IAErD;;OAEG;IACH,0BAA8D;IAC9D;;OAEG;IACH,4BAAkE;IAGpE;;;OAGG;IACH,mBAA2D;IAEzD;;OAEG;IACH,4BAAkE;IAClE;;OAEG;IACH,8BAAsE;IAGxE;;;OAGG;IACH,mBAA2D;IAEzD;;OAEG;IACH,4BAAkE;IAClE;;OAEG;IACH,8BAAsE;IAcxE;;OAEG;IACH,0BAIC;IACD;;OAEG;IACH,kBAAiC;IASjC;;;OAGG;IACH,+BAOC;IACD;;;OAGG;IACH,kCAqCC;IACD;;;OAGG;IACH,6BAYC;IAKH;;;;OAIG;IACH,+BAJW,OAAO,yBAAyB,EAAE,OAAO,aACzC,OAAO,oBAAoB,EAAE,SAAS,GACrC,OAAO,CAAC,YAAY,CAAC,CAqChC;IAED;;;;;OAKG;IACH,oCA+BC;IAED;;;;;;OAMG;IACH,gCAuEC;IAED;;;;;OAKG;IACH,gBAJW,YAAY,cACZ,OAAO,cAAc,EAAE,UAAU,qBACjC,MAAY,IAAI,QA8B1B;IAED;;;;;;;;OAQG;IACH,wBAkBC;IAED;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,YACvC,YAAY,QAuCtB;CACF;6BA9jB4B,uBAAuB"}

package/render/webgl/VectorStyleRenderer.js

@@ -104,10 +104,11 @@ export const Attributes = {
 class VectorStyleRenderer {
   /**
    * @param {VectorStyle} styleOrShaders Literal style or custom shaders
+   * @param {import('../../style/flat.js').StyleVariables} variables Style variables
    * @param {import('../../webgl/Helper.js').default} helper Helper
    * @param {boolean} enableHitDetection Whether to enable the hit detection (needs compatible shader)
    */
-  constructor(styleOrShaders, helper, enableHitDetection) {
+  constructor(styleOrShaders, variables, helper, enableHitDetection) {
     /**
      * @private
      * @type {import('../../webgl/Helper.js').default}
@@ -125,6 +126,7 @@ class VectorStyleRenderer {
         /** @type {import('../../style/webgl.js').WebGLStyle} */ (
           styleOrShaders
         ),
+        variables,
       );
       shaders = {
         builder: parseResult.builder,
@@ -225,7 +227,7 @@ class VectorStyleRenderer {
 
     const customAttributesDesc = Object.entries(this.customAttributes_).map(
       ([name, value]) => ({
-        name: `a_prop_${name}`,
+        name: `a_${name}`,
         size: value.size || 1,
         type: AttributeType.FLOAT,
       }),

package/renderer/webgl/PointsLayer.js

@@ -178,7 +178,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     const customAttributes = options.attributes
       ? options.attributes.map(function (attribute) {
           return {
-            name: 'a_prop_' + attribute.name,
+            name: 'a_' + attribute.name,
             size: 1,
             type: AttributeType.FLOAT,
           };
@@ -205,7 +205,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
 
     if (this.hitDetectionEnabled_) {
       this.attributes.push({
-        name: 'a_prop_hitColor',
+        name: 'a_hitColor',
         size: 4,
         type: AttributeType.FLOAT,
       });

package/renderer/webgl/VectorLayer.d.ts

@@ -23,6 +23,12 @@ export type Options = {
      * Vector style as literal style or shaders; can also accept an array of styles
      */
     style: VectorStyle | Array<VectorStyle>;
+    /**
+     * Style variables
+     */
+    variables: {
+        [x: string]: number | Array<number> | string | boolean;
+    };
     /**
      * Setting this to true will provide a slight performance boost, but will
      * prevent all hit detection on the layer.
@@ -40,6 +46,7 @@ export type Options = {
  * @typedef {Object} Options
  * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {Object<string, number|Array<number>|string|boolean>} variables Style variables
  * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
  * prevent all hit detection on the layer.
  * @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
@@ -111,6 +118,11 @@ declare class WebGLVectorLayerRenderer extends WebGLLayerRenderer<any> {
      * @private
      */
     private currentFrameStateTransform_;
+    /**
+     * @type {import('../../style/flat.js').StyleVariables}
+     * @private
+     */
+    private styleVariables_;
     /**
      * @type {Array<VectorStyle>}
      * @private

package/renderer/webgl/VectorLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["VectorLayer.js"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;;EAKE;;0BAGW,OAAO,2CAA2C,EAAE,WAAW;;;;;;;;;WAM9D,WAAW,GAAC,KAAK,CAAC,WAAW,CAAC;;;;;;;;;;;AAP5C;;GAEG;AAEH;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAoGjB;IAtFC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,yBAAqB;IAErB;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,wBAAoC;IAEpC;;;;;;OAMG;IACH,0BAA0C;IAE1C;;OAEG;IACH,mBAAwB;IACxB;;OAEG;IACH,sBAAsC;IACtC;;OAEG;IACH,iBAA4B;IAE5B;;;OAGG;IACH,oCAAoD;IAEpD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;OAGG;IACH,iBAAkB;IAIlB;;OAEG;IACH,eAAsC;IAEtC;;;OAGG;IACH,8BAAkC;IAElC;;;OAGG;IACH,0BAA6B;IAG/B;;;OAGG;IACH,4BAoCC;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAMC;IAED;;OAEG;IACH,mCAMC;IAoBD;;;;OAIG;IACH,kCAGC;IAED;;;OAGG;IACH,oCAGC;IAED;;;OAGG;IACH,mCAGC;IAED;;OAEG;IACH,kCAEC;IAED;;;OAGG;IACH,uBAsBC;IAED;;;;;OAKG;IACH,iCAJW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CAgCtB;IAwED;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAuChB;IA0CD;;;OAGG;IACH,wBAFW,OAAO,2CAA2C,EAAE,YAAY,QAkB1E;CAkBF;+BA7iB8B,YAAY"}
+{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["VectorLayer.js"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;;EAKE;;0BAGW,OAAO,2CAA2C,EAAE,WAAW;;;;;;;;;WAM9D,WAAW,GAAC,KAAK,CAAC,WAAW,CAAC;;;;eAC9B;YAAO,MAAM,GAAE,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC,GAAC,MAAM,GAAC,OAAO;KAAC;;;;;;;;;;;AARjE;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EA0GjB;IA5FC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,yBAAqB;IAErB;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,wBAAoC;IAEpC;;;;;;OAMG;IACH,0BAA0C;IAE1C;;OAEG;IACH,mBAAwB;IACxB;;OAEG;IACH,sBAAsC;IACtC;;OAEG;IACH,iBAA4B;IAE5B;;;OAGG;IACH,oCAAoD;IAEpD;;;OAGG;IACH,wBAAyB;IAEzB;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;OAGG;IACH,iBAAkB;IAIlB;;OAEG;IACH,eAAsC;IAEtC;;;OAGG;IACH,8BAAkC;IAElC;;;OAGG;IACH,0BAA6B;IAG/B;;;OAGG;IACH,4BAoCC;IAED;;;OAGG;IACH,sBAKC;IAED;;OAEG;IACH,yBAWC;IAED;;OAEG;IACH,mCAMC;IAoBD;;;;OAIG;IACH,kCAGC;IAED;;;OAGG;IACH,oCAGC;IAED;;;OAGG;IACH,mCAGC;IAED;;OAEG;IACH,kCAEC;IAED;;;OAGG;IACH,uBAsBC;IAED;;;;;OAKG;IACH,iCAJW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CAoCtB;IAwED;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAuChB;IA0CD;;;OAGG;IACH,wBAFW,OAAO,2CAA2C,EAAE,YAAY,QAkB1E;CAkBF;+BA9jB8B,YAAY"}

package/renderer/webgl/VectorLayer.js

@@ -48,6 +48,7 @@ export const Uniforms = {
  * @typedef {Object} Options
  * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {Object<string, number|Array<number>|string|boolean>} variables Style variables
  * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
  * prevent all hit detection on the layer.
  * @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
@@ -138,6 +139,12 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
      */
     this.currentFrameStateTransform_ = createTransform();
 
+    /**
+     * @type {import('../../style/flat.js').StyleVariables}
+     * @private
+     */
+    this.styleVariables_ = {};
+
     /**
      * @type {Array<VectorStyle>}
      * @private
@@ -223,6 +230,7 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
    * @private
    */
   applyOptions_(options) {
+    this.styleVariables_ = options.variables;
     this.styles_ = Array.isArray(options.style)
       ? options.style
       : [options.style];
@@ -235,7 +243,12 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     this.buffers_ = [];
     this.styleRenderers_ = this.styles_.map(
       (style) =>
-        new VectorStyleRenderer(style, this.helper, this.hitDetectionEnabled_),
+        new VectorStyleRenderer(
+          style,
+          this.styleVariables_,
+          this.helper,
+          this.hitDetectionEnabled_,
+        ),
     );
   }
 
@@ -349,7 +362,11 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     // draw the normal canvas
     this.helper.prepareDraw(frameState);
     this.renderWorlds(frameState, false, startWorld, endWorld, worldWidth);
-    this.helper.finalizeDraw(frameState);
+    this.helper.finalizeDraw(
+      frameState,
+      this.dispatchPreComposeEvent,
+      this.dispatchPostComposeEvent,
+    );
 
     const canvas = this.helper.getCanvas();
     const layerState = frameState.layerStatesArray[frameState.layerIndex];

package/renderer/webgl/VectorTileLayer.d.ts

@@ -22,6 +22,14 @@ export type Options = {
      * Vector style as literal style or shaders; can also accept an array of styles
      */
     style: VectorStyle | Array<VectorStyle>;
+    /**
+     * Style variables. Each variable must hold a literal value (not
+     * an expression). These variables can be used as {@link import ("../../expr/expression.js").ExpressionValue expressions} in the styles properties
+     * using the `['var', 'varName']` operator.
+     */
+    variables?: {
+        [x: string]: string | number | boolean | number[];
+    } | undefined;
     /**
      * Setting this to true will provide a slight performance boost, but will
      * prevent all hit detection on the layer.
@@ -39,6 +47,9 @@ export type LayerType = import("../../layer/BaseTile.js").default<any, any>;
 /**
  * @typedef {Object} Options
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {import('../../style/flat.js').StyleVariables} [variables] Style variables. Each variable must hold a literal value (not
+ * an expression). These variables can be used as {@link import("../../expr/expression.js").ExpressionValue expressions} in the styles properties
+ * using the `['var', 'varName']` operator.
  * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
  * prevent all hit detection on the layer.
  * @property {number} [cacheSize=512] The vector tile cache size.
@@ -67,6 +78,11 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
      * @private
      */
     private styles_;
+    /**
+     * @type {import('../../style/flat.js').StyleVariables}
+     * @private
+     */
+    private styleVariables_;
     /**
      * @type {Array<VectorStyleRenderer>}
      * @private

package/renderer/webgl/VectorTileLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["VectorTileLayer.js"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;EAIE;;;;;0BAOW,OAAO,2CAA2C,EAAE,WAAW;;;;;WAK9D,WAAW,GAAC,KAAK,CAAC,WAAW,CAAC;;;;;;;;;;;wBAO/B,mDAAyC;AAbtD;;GAEG;AAEH;;;;;;GAMG;AAEH;;GAEG;AAEH;;;;GAIG;AACH;IACE;;;OAGG;IACH,uBAHW,SAAS,WACT,OAAO,EAiFjB;IAtEC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;;;;OAMG;IACH,oCAAoD;IAEpD;;OAEG;IACH,sBAAsC;IACtC;;OAEG;IACH,iBAA4B;IAE5B;;;OAGG;IACH,wBAA2B;IAE3B;;OAEG;IACH,yBAGC;IAGD;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,yBAAqB;IAKvB;;;OAGG;IACH,wBAHW,OAAO,QAWjB;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAwCC;IAED;;OAEG;IACH,sBAYC;IAUD;;OAEG;IACH,8DAWC;IAED;;OAEG;IACH,uEAMC;IAED;;OAEG;IACH,yDA0BC;IAED;;OAEG;IACH,4FAeC;IAED;;;;;;;OAOG;IACH,uBAoBC;IAED;;OAEG;IACH,sNA4BC;IAED;;;OAGG;IACH,4BAFW,OAAO,cAAc,EAAE,UAAU,QAEd;CAS/B;uCA/XM,oBAAoB;yBALF,6BAA6B"}
+{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["VectorTileLayer.js"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;EAIE;;;;;0BAOW,OAAO,2CAA2C,EAAE,WAAW;;;;;WAK9D,WAAW,GAAC,KAAK,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;wBAU/B,mDAAyC;AAhBtD;;GAEG;AAEH;;;;;;;;;GASG;AAEH;;GAEG;AAEH;;;;GAIG;AACH;IACE;;;OAGG;IACH,uBAHW,SAAS,WACT,OAAO,EAuFjB;IA5EC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAA8C;IAE9C;;;OAGG;IACH,wBAAyB;IAEzB;;;;;;OAMG;IACH,oCAAoD;IAEpD;;OAEG;IACH,sBAAsC;IACtC;;OAEG;IACH,iBAA4B;IAE5B;;;OAGG;IACH,wBAA2B;IAE3B;;OAEG;IACH,yBAGC;IAGD;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,yBAAqB;IAKvB;;;OAGG;IACH,wBAHW,OAAO,QAWjB;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBA0CC;IAED;;OAEG;IACH,sBAYC;IAUD;;OAEG;IACH,8DAWC;IAED;;OAEG;IACH,uEAMC;IAED;;OAEG;IACH,yDA0BC;IAED;;OAEG;IACH,4FAeC;IAED;;;;;;;OAOG;IACH,uBAoBC;IAED;;OAEG;IACH,sNA4BC;IAED;;;OAGG;IACH,4BAFW,OAAO,cAAc,EAAE,UAAU,QAEd;CAS/B;uCA1YM,oBAAoB;yBALF,6BAA6B"}

package/renderer/webgl/VectorTileLayer.js

@@ -42,6 +42,9 @@ export const Attributes = {
 /**
  * @typedef {Object} Options
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {import('../../style/flat.js').StyleVariables} [variables] Style variables. Each variable must hold a literal value (not
+ * an expression). These variables can be used as {@link import("../../expr/expression.js").ExpressionValue expressions} in the styles properties
+ * using the `['var', 'varName']` operator.
  * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
  * prevent all hit detection on the layer.
  * @property {number} [cacheSize=512] The vector tile cache size.
@@ -82,6 +85,12 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
      */
     this.styles_ = [];
 
+    /**
+     * @type {import('../../style/flat.js').StyleVariables}
+     * @private
+     */
+    this.styleVariables_ = options.variables || {};
+
     /**
      * @type {Array<VectorStyleRenderer>}
      * @private
@@ -188,6 +197,7 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
       if (!isShaders) {
         const parseResult = parseLiteralStyle(
           /** @type {import('../../style/webgl.js').WebGLStyle} */ (style),
+          this.styleVariables_,
         );
         addBuilderParams(parseResult.builder);
         shaders = {
@@ -205,6 +215,7 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
       }
       return new VectorStyleRenderer(
         shaders,
+        this.styleVariables_,
         this.helper,
         this.hitDetectionEnabled_,
       );

package/style/flat.d.ts

@@ -798,4 +798,12 @@ export type Rule = {
      */
     else?: boolean | undefined;
 };
+/**
+ * Style variables are provided as an object. The variables can be read in a {@link import ("../expr/expression.js").ExpressionValue style expression}
+ * using the `['var', 'varName']` operator.
+ * Each variable must hold a literal value (not an expression).
+ */
+export type StyleVariables = {
+    [x: string]: number | Array<number> | string | boolean;
+};
 //# sourceMappingURL=flat.d.ts.map

package/style/flat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flat.d.ts","sourceRoot":"","sources":["flat.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH;;;;GAIG;AAEH;;;;GAIG;AAEH;;;;GAIG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AAEH;;;;GAIG;AAEH;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,sCAFY,YAAY,CAYvB;;;;gCA/OY,OAAO,QAAM;;;;+BAMb,MAAM,QAAM;;;;+BAMZ,MAAM,QAAM;;;;;8BAOZ,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,QAAM;;;;oCAMxC,KAAK,CAAC,MAAM,CAAC,QAAM;;;;6BAMnB,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC,QAAM;;;;;wBAQ1B,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU;;;;4BAMpE,SAAS,GAAC,KAAK,CAAC,SAAS,CAAC,GAAC,KAAK,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4KrC,MAAM;;;;oBACN,MAAM;;;;oBACN,MAAM;;;;qBACN,MAAM;;;;yBACN,MAAM;;;;2BACN,MAAM;;;;2BACN,MAAM;;;;;;;;;;WAuBN,SAAS,GAAC,KAAK,CAAC,SAAS,CAAC"}
+{"version":3,"file":"flat.d.ts","sourceRoot":"","sources":["flat.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH;;;;GAIG;AAEH;;;;GAIG;AAEH;;;;GAIG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AAEH;;;;GAIG;AAEH;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,sCAFY,YAAY,CAYvB;;;;gCA/OY,OAAO,QAAM;;;;+BAMb,MAAM,QAAM;;;;+BAMZ,MAAM,QAAM;;;;;8BAOZ,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,QAAM;;;;oCAMxC,KAAK,CAAC,MAAM,CAAC,QAAM;;;;6BAMnB,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC,QAAM;;;;;wBAQ1B,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU;;;;4BAMpE,SAAS,GAAC,KAAK,CAAC,SAAS,CAAC,GAAC,KAAK,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4KrC,MAAM;;;;oBACN,MAAM;;;;oBACN,MAAM;;;;qBACN,MAAM;;;;yBACN,MAAM;;;;2BACN,MAAM;;;;2BACN,MAAM;;;;;;;;;;WAuBN,SAAS,GAAC,KAAK,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;6BAY3B;QAAO,MAAM,GAAE,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC,GAAC,MAAM,GAAC,OAAO;CAAC"}

package/style/flat.js

@@ -300,3 +300,10 @@ export function createDefaultStyle() {
  * @property {boolean} [else] If true, the rule applies only if no other previous rule applies.
  * If the else rule also has a filter, the rule will not apply if the filter does not match.
  */
+
+/**
+ * Style variables are provided as an object. The variables can be read in a {@link import("../expr/expression.js").ExpressionValue style expression}
+ * using the `['var', 'varName']` operator.
+ * Each variable must hold a literal value (not an expression).
+ * @typedef {Object<string, number|Array<number>|string|boolean>} StyleVariables
+ */

package/style/webgl.d.ts

@@ -6,13 +6,6 @@ export type BaseProps = {
      * point will be displayed. If undefined, all points will show.
      */
     filter?: import("../expr/expression.js").ExpressionValue | undefined;
-    /**
-     * Style variables; each variable must hold a number.
-     * Note: **this object is meant to be mutated**: changes to the values will immediately be visible on the rendered features
-     */
-    variables?: {
-        [x: string]: string | number | boolean | number[];
-    } | undefined;
 };
 export type FillProps = {
     /**

package/style/webgl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["webgl.js"],"names":[],"mappings":"8BAMa,OAAO,uBAAuB,EAAE,eAAe;8BAG/C,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,KAAK,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA0HzD,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU"}
+{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["webgl.js"],"names":[],"mappings":"8BAMa,OAAO,uBAAuB,EAAE,eAAe;8BAG/C,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,KAAK,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAwHzD,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU"}

package/style/webgl.js

@@ -14,8 +14,6 @@
  * @typedef {Object} BaseProps
  * @property {ExpressionValue} [filter] Filter expression. If it resolves to a number strictly greater than 0, the
  * point will be displayed. If undefined, all points will show.
- * @property {Object<string, number | Array<number> | string | boolean>} [variables] Style variables; each variable must hold a number.
- * Note: **this object is meant to be mutated**: changes to the values will immediately be visible on the rendered features
  */
 
 /**

package/util.js

@@ -33,4 +33,4 @@ export function getUid(obj) {
  * OpenLayers version.
  * @type {string}
  */
-export const VERSION = '10.2.2-dev.1732295358287';
+export const VERSION = '10.2.2-dev.1732628402738';

package/webgl/ShaderBuilder.js

@@ -479,7 +479,7 @@ ${this.uniforms_
   .join('\n')}
 attribute vec2 a_position;
 attribute float a_index;
-attribute vec4 a_prop_hitColor;
+attribute vec4 a_hitColor;
 ${this.attributes_
   .map(function (attribute) {
     return 'attribute ' + attribute + ';';
@@ -487,7 +487,7 @@ ${this.attributes_
   .join('\n')}
 varying vec2 v_texCoord;
 varying vec2 v_quadCoord;
-varying vec4 v_prop_hitColor;
+varying vec4 v_hitColor;
 varying vec2 v_centerPx;
 varying float v_angle;
 varying vec2 v_quadSizePx;
@@ -531,7 +531,7 @@ void main(void) {
   float u = a_index == 0.0 || a_index == 3.0 ? texCoord.s : texCoord.p;
   float v = a_index == 2.0 || a_index == 3.0 ? texCoord.t : texCoord.q;
   v_texCoord = vec2(u, v);
-  v_prop_hitColor = a_prop_hitColor;
+  v_hitColor = a_hitColor;
   v_angle = angle;
   c = cos(-v_angle);
   s = sin(-v_angle);
@@ -561,7 +561,7 @@ ${this.uniforms_
   })
   .join('\n')}
 varying vec2 v_texCoord;
-varying vec4 v_prop_hitColor;
+varying vec4 v_hitColor;
 varying vec2 v_centerPx;
 varying float v_angle;
 varying vec2 v_quadSizePx;
@@ -582,7 +582,7 @@ void main(void) {
   gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.05) { discard; };
-    gl_FragColor = v_prop_hitColor;
+    gl_FragColor = v_hitColor;
   }
 }`;
   }
@@ -609,7 +609,7 @@ attribute float a_measureEnd;
 attribute float a_parameters;
 attribute float a_distance;
 attribute vec2 a_joinAngles;
-attribute vec4 a_prop_hitColor;
+attribute vec4 a_hitColor;
 ${this.attributes_
   .map(function (attribute) {
     return 'attribute ' + attribute + ';';
@@ -620,7 +620,7 @@ varying vec2 v_segmentEnd;
 varying float v_angleStart;
 varying float v_angleEnd;
 varying float v_width;
-varying vec4 v_prop_hitColor;
+varying vec4 v_hitColor;
 varying float v_distanceOffsetPx;
 varying float v_measureStart;
 varying float v_measureEnd;
@@ -699,7 +699,7 @@ void main(void) {
   v_segmentStart = segmentStartPx;
   v_segmentEnd = segmentEndPx;
   v_width = lineWidth;
-  v_prop_hitColor = a_prop_hitColor;
+  v_hitColor = a_hitColor;
   v_distanceOffsetPx = a_distance / u_resolution - (lineOffsetPx * angleTangentSum);
   v_measureStart = a_measureStart;
   v_measureEnd = a_measureEnd;
@@ -732,7 +732,7 @@ varying vec2 v_segmentEnd;
 varying float v_angleStart;
 varying float v_angleEnd;
 varying float v_width;
-varying vec4 v_prop_hitColor;
+varying vec4 v_hitColor;
 varying float v_distanceOffsetPx;
 varying float v_measureStart;
 varying float v_measureEnd;
@@ -870,7 +870,7 @@ void main(void) {
   gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.1) { discard; };
-    gl_FragColor = v_prop_hitColor;
+    gl_FragColor = v_hitColor;
   }
 }`;
   }
@@ -892,13 +892,13 @@ ${this.uniforms_
   })
   .join('\n')}
 attribute vec2 a_position;
-attribute vec4 a_prop_hitColor;
+attribute vec4 a_hitColor;
 ${this.attributes_
   .map(function (attribute) {
     return 'attribute ' + attribute + ';';
   })
   .join('\n')}
-varying vec4 v_prop_hitColor;
+varying vec4 v_hitColor;
 ${this.varyings_
   .map(function (varying) {
     return 'varying ' + varying.type + ' ' + varying.name + ';';
@@ -907,7 +907,7 @@ ${this.varyings_
 ${this.vertexShaderFunctions_.join('\n')}
 void main(void) {
   gl_Position = u_projectionMatrix * vec4(a_position, u_depth, 1.0);
-  v_prop_hitColor = a_prop_hitColor;
+  v_hitColor = a_hitColor;
 ${this.varyings_
   .map(function (varying) {
     return '  ' + varying.name + ' = ' + varying.expression + ';';
@@ -931,7 +931,7 @@ ${this.uniforms_
     return 'uniform ' + uniform + ';';
   })
   .join('\n')}
-varying vec4 v_prop_hitColor;
+varying vec4 v_hitColor;
 ${this.varyings_
   .map(function (varying) {
     return 'varying ' + varying.type + ' ' + varying.name + ';';
@@ -970,7 +970,7 @@ void main(void) {
   gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.1) { discard; };
-    gl_FragColor = v_prop_hitColor;
+    gl_FragColor = v_hitColor;
   }
 }`;
   }

package/webgl/styleparser.d.ts

@@ -34,9 +34,10 @@ export function computeHash(input: any | string): string;
  * {@link module:ol/renderer/webgl/PointsLayer~WebGLPointsLayerRenderer}.
  *
  * @param {import("../style/webgl.js").WebGLStyle} style Literal style.
+ * @param {import('../style/flat.js').StyleVariables} variables Style variables.
  * @return {StyleParseResult} Result containing shader params, attributes and uniforms.
  */
-export function parseLiteralStyle(style: import("../style/webgl.js").WebGLStyle): StyleParseResult;
+export function parseLiteralStyle(style: import("../style/webgl.js").WebGLStyle, variables: import("../style/flat.js").StyleVariables): StyleParseResult;
 export type StyleParseResult = {
     /**
      * Shader builder pre-configured according to a given style

package/webgl/styleparser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleparser.d.ts","sourceRoot":"","sources":["styleparser.js"],"names":[],"mappings":"AAsBA;;;;;;;GAOG;AACH,qDALW,OAAO,gBAAgB,EAAE,kBAAkB,SAC3C,OAAO,uBAAuB,EAAE,iBAAiB,sCAEhD,MAAM,CAUjB;AAED;;;;GAIG;AACH,iCAHW,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GACjC,KAAK,CAAC,MAAM,CAAC,CASxB;AAqCD;;;;GAIG;AACH,mCAHW,MAAO,MAAM,GACZ,MAAM,CAOjB;AA4uBD;;;;;GAKG;AAEH;;;;;;;;;;GAUG;AACH,yCAHW,OAAO,mBAAmB,EAAE,UAAU,GACrC,gBAAgB,CAuI3B;;;;;aArJa,aAAa;;;;cACb,OAAO,wCAAwC,EAAE,kBAAkB;;;;gBACnE,OAAO,wCAAwC,EAAE,oBAAoB;;8BAt0BvD,oBAAoB"}
+{"version":3,"file":"styleparser.d.ts","sourceRoot":"","sources":["styleparser.js"],"names":[],"mappings":"AA0BA;;;;;;;GAOG;AACH,qDALW,OAAO,gBAAgB,EAAE,kBAAkB,SAC3C,OAAO,uBAAuB,EAAE,iBAAiB,sCAEhD,MAAM,CAUjB;AAED;;;;GAIG;AACH,iCAHW,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GACjC,KAAK,CAAC,MAAM,CAAC,CASxB;AAqCD;;;;GAIG;AACH,mCAHW,MAAO,MAAM,GACZ,MAAM,CAOjB;AA4uBD;;;;;GAKG;AAEH;;;;;;;;;;;GAWG;AACH,yCAJW,OAAO,mBAAmB,EAAE,UAAU,aACtC,OAAO,kBAAkB,EAAE,cAAc,GACxC,gBAAgB,CAoK3B;;;;;aAnLa,aAAa;;;;cACb,OAAO,wCAAwC,EAAE,kBAAkB;;;;gBACnE,OAAO,wCAAwC,EAAE,oBAAoB;;8BAh0BvD,oBAAoB"}

package/webgl/styleparser.js

@@ -9,16 +9,20 @@ import {
   NumberType,
   SizeType,
   StringType,
+  computeGeometryType,
   newParsingContext,
 } from '../expr/expression.js';
-import {ShaderBuilder} from './ShaderBuilder.js';
-import {asArray} from '../color.js';
 import {
+  FEATURE_ID_PROPERTY_NAME,
+  GEOMETRY_TYPE_PROPERTY_NAME,
   buildExpression,
   getStringNumberEquivalent,
+  newCompilationContext,
   stringToGlsl,
   uniformNameForVariable,
 } from '../expr/gpu.js';
+import {ShaderBuilder} from './ShaderBuilder.js';
+import {asArray} from '../color.js';
 
 /**
  * Recursively parses a style expression and outputs a GLSL-compatible string. Takes in a compilation context that
@@ -861,29 +865,19 @@ function parseFillProperties(
  * {@link module:ol/renderer/webgl/PointsLayer~WebGLPointsLayerRenderer}.
  *
  * @param {import("../style/webgl.js").WebGLStyle} style Literal style.
+ * @param {import('../style/flat.js').StyleVariables} variables Style variables.
  * @return {StyleParseResult} Result containing shader params, attributes and uniforms.
  */
-export function parseLiteralStyle(style) {
-  /**
-   * @type {import("../expr/gpu.js").CompilationContext}
-   */
-  const vertContext = {
-    inFragmentShader: false,
-    properties: {},
-    variables: {},
-    functions: {},
-    style,
-  };
+export function parseLiteralStyle(style, variables) {
+  const vertContext = newCompilationContext();
 
   /**
    * @type {import("../expr/gpu.js").CompilationContext}
    */
   const fragContext = {
+    ...newCompilationContext(),
     inFragmentShader: true,
     variables: vertContext.variables,
-    properties: {},
-    functions: {},
-    style,
   };
 
   const builder = new ShaderBuilder();
@@ -914,10 +908,15 @@ export function parseLiteralStyle(style) {
   for (const varName in fragContext.variables) {
     const variable = fragContext.variables[varName];
     const uniformName = uniformNameForVariable(variable.name);
-    builder.addUniform(`${getGlslTypeFromType(variable.type)} ${uniformName}`);
+    let glslType = getGlslTypeFromType(variable.type);
+    if (variable.type === ColorType) {
+      // we're not packing colors when they're passed as uniforms
+      glslType = 'vec4';
+    }
+    builder.addUniform(`${glslType} ${uniformName}`);
 
     uniforms[uniformName] = () => {
-      const value = style.variables[variable.name];
+      const value = variables[variable.name];
       if (typeof value === 'number') {
         return value;
       }
@@ -925,7 +924,7 @@ export function parseLiteralStyle(style) {
         return value ? 1 : 0;
       }
       if (variable.type === ColorType) {
-        return packColor([...asArray(value || '#eee')]);
+        return asArray(value || '#eee');
       }
       if (typeof value === 'string') {
         return getStringNumberEquivalent(value);
@@ -971,12 +970,12 @@ export function parseLiteralStyle(style) {
    * @type {import('../render/webgl/VectorStyleRenderer.js').AttributeDefinitions}
    */
   const attributes = {};
+
+  // Define attributes with their callback for each property used in the vertex shader
   for (const propName in vertContext.properties) {
     const property = vertContext.properties[propName];
     const callback = (feature) => {
-      const value = property.evaluator
-        ? property.evaluator(feature)
-        : feature.get(property.name);
+      const value = feature.get(property.name);
       if (property.type === ColorType) {
         return packColor([...asArray(value || '#eee')]);
       }
@@ -989,11 +988,46 @@ export function parseLiteralStyle(style) {
       return value;
     };
 
-    attributes[property.name] = {
+    attributes[`prop_${property.name}`] = {
       size: getGlslSizeFromType(property.type),
       callback,
     };
   }
 
+  // Define attributes for special inputs
+  function defineSpecialInput(contextPropName, glslPropName, type, callback) {
+    const inVertContext = vertContext[contextPropName];
+    const inFragContext = fragContext[contextPropName];
+    if (!inVertContext && !inFragContext) {
+      return;
+    }
+    const glslType = getGlslTypeFromType(type);
+    const attrSize = getGlslSizeFromType(type);
+    builder.addAttribute(`${glslType} a_${glslPropName}`);
+    if (inFragContext) {
+      builder.addVarying(`v_${glslPropName}`, glslType, `a_${glslPropName}`);
+    }
+    attributes[glslPropName] = {
+      size: attrSize,
+      callback,
+    };
+  }
+  defineSpecialInput(
+    'geometryType',
+    GEOMETRY_TYPE_PROPERTY_NAME,
+    StringType,
+    (feature) =>
+      getStringNumberEquivalent(computeGeometryType(feature.getGeometry())),
+  );
+  defineSpecialInput(
+    'featureId',
+    FEATURE_ID_PROPERTY_NAME,
+    StringType | NumberType,
+    (feature) => {
+      const id = feature.getId() ?? null;
+      return typeof id === 'string' ? getStringNumberEquivalent(id) : id;
+    },
+  );
+
   return {builder, attributes, uniforms};
 }