@mapwhit/tilerenderer 0.51.1 → 0.52.1

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.51.0"
+  "version": "0.52.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.51.1",
+  "version": "0.52.1",
   "exports": {
     ".": "./src/index.js",
     "./worker": "./src/worker.js"
@@ -19,18 +19,18 @@
     "@mapwhit/events": "^0.0.1",
     "@mapwhit/geojson-rewind": "^1.0.0",
     "@mapwhit/pbf": "^1.0.0",
-    "@mapwhit/style-expressions": "^0.0.2",
-    "@mapwhit/vector-tile": "^1.0.0",
-    "@mapwhit/vt-pbf": "^1.0.0",
+    "@mapwhit/style-expressions": "^1.1.0",
+    "@mapwhit/vector-tile": "^2.0.1",
+    "@mapwhit/vt-pbf": "^2.0.0",
     "@pirxpilot/nanoassert": "~1",
     "csscolorparser": "^1.0.3",
     "earcut": "^3.0.1",
     "geojson-vt": "^4.0.2",
     "grid-index": "^1.1.0",
     "murmurhash-js": "^1.0.0",
-    "potpack": "^1.0.1",
+    "potpack": "^2.1.0",
     "quickselect": "^3.0.0",
-    "supercluster": "^2.0.1",
+    "supercluster": "^8.0.1",
     "tinyqueue": "^3.0.0"
   },
   "browser": {

package/src/data/bucket/circle_bucket.js

@@ -23,6 +23,7 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
 class CircleBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -37,7 +38,9 @@ class CircleBucket {
 
   populate(features, options) {
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
+      if (
+        this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      ) {
         const geometry = loadGeometry(feature);
         this.addFeature(feature, geometry, index);
         options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
@@ -47,7 +50,10 @@ class CircleBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   isEmpty() {
@@ -109,7 +115,10 @@ class CircleBucket {
       }
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {});
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions: {},
+      globalState: this.globalState
+    });
   }
 }
 

package/src/data/bucket/fill_bucket.js

@@ -16,6 +16,7 @@ const EvaluationParameters = require('../../style/evaluation_parameters');
 class FillBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -35,7 +36,10 @@ class FillBucket {
     this.hasPattern = hasPattern('fill', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+      if (
+        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      )
+        continue;
 
       const geometry = loadGeometry(feature);
 
@@ -64,7 +68,10 @@ class FillBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   addFeatures(options, imagePositions) {
@@ -157,7 +164,10 @@ class FillBucket {
       triangleSegment.primitiveLength += indices.length / 3;
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 }
 

package/src/data/bucket/fill_extrusion_bucket.js

@@ -36,6 +36,7 @@ function addVertex(vertexArray, x, y, nx, ny, nz, t, e) {
 class FillExtrusionBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -53,7 +54,10 @@ class FillExtrusionBucket {
     this.hasPattern = hasPattern('fill-extrusion', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+      if (
+        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      )
+        continue;
 
       const geometry = loadGeometry(feature);
 
@@ -89,7 +93,10 @@ class FillExtrusionBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   isEmpty() {
@@ -225,7 +232,10 @@ class FillExtrusionBucket {
       segment.vertexLength += numVertices;
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 }
 

package/src/data/bucket/line_bucket.js

@@ -72,6 +72,7 @@ function addLineVertex(layoutVertexBuffer, point, extrude, round, up, dir, lines
 class LineBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -90,7 +91,10 @@ class LineBucket {
     this.hasPattern = hasPattern('line', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+      if (
+        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      )
+        continue;
 
       const geometry = loadGeometry(feature);
 
@@ -119,7 +123,10 @@ class LineBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   addFeatures(options, imagePositions) {
@@ -494,7 +501,10 @@ class LineBucket {
       startOfLine = false;
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   /**

package/src/data/bucket/symbol_bucket.js

@@ -176,6 +176,7 @@ class SymbolBucket {
   constructor(options) {
     this.collisionBoxArray = options.collisionBoxArray;
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -258,7 +259,7 @@ class SymbolBucket {
 
     const icons = options.iconDependencies;
     const stacks = options.glyphDependencies;
-    const globalProperties = new EvaluationParameters(this.zoom);
+    const globalProperties = new EvaluationParameters(this.zoom, { globalState: this.globalState });
 
     for (const { feature, index, sourceLayerIndex } of features) {
       if (!layer._featureFilter(globalProperties, feature)) {
@@ -327,8 +328,14 @@ class SymbolBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.text.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, imagePositions);
-    this.icon.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, imagePositions);
+    this.text.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
+      imagePositions,
+      globalState: this.globalState
+    });
+    this.icon.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   isEmpty() {
@@ -457,7 +464,10 @@ class SymbolBucket {
       false
     );
 
-    arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {});
+    arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {
+      imagePositions: {},
+      globalState: this.globalState
+    });
   }
 
   _addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, point, anchorX, anchorY, extrude) {

package/src/data/program_configuration.js

@@ -128,13 +128,13 @@ class SourceExpressionBinder {
 
   setConstantPatternPositions() {}
 
-  populatePaintArray(newLength, feature, imagePositions) {
+  populatePaintArray(newLength, feature, options) {
     const paintArray = this.paintVertexArray;
 
     const start = paintArray.length;
     paintArray.reserve(newLength);
 
-    const value = this.expression.evaluate(new EvaluationParameters(0), feature, {});
+    const value = this.expression.evaluate(new EvaluationParameters(0, options), feature, {});
 
     if (this.type === 'color') {
       const color = packColor(value);
@@ -150,9 +150,9 @@ class SourceExpressionBinder {
     }
   }
 
-  updatePaintArray(start, end, feature, featureState, imagePositions) {
+  updatePaintArray(start, end, feature, featureState, options) {
     const paintArray = this.paintVertexArray;
-    const value = this.expression.evaluate({ zoom: 0 }, feature, featureState);
+    const value = this.expression.evaluate(new EvaluationParameters(0, options), feature, featureState);
 
     if (this.type === 'color') {
       const color = packColor(value);
@@ -224,14 +224,14 @@ class CompositeExpressionBinder {
 
   setConstantPatternPositions() {}
 
-  populatePaintArray(newLength, feature) {
+  populatePaintArray(newLength, feature, options) {
     const paintArray = this.paintVertexArray;
 
     const start = paintArray.length;
     paintArray.reserve(newLength);
 
-    const min = this.expression.evaluate(new EvaluationParameters(this.zoom), feature, {});
-    const max = this.expression.evaluate(new EvaluationParameters(this.zoom + 1), feature, {});
+    const min = this.expression.evaluate(new EvaluationParameters(this.zoom, options), feature, {});
+    const max = this.expression.evaluate(new EvaluationParameters(this.zoom + 1, options), feature, {});
 
     if (this.type === 'color') {
       const minColor = packColor(min);
@@ -247,11 +247,11 @@ class CompositeExpressionBinder {
     }
   }
 
-  updatePaintArray(start, end, feature, featureState) {
+  updatePaintArray(start, end, feature, featureState, options) {
     const paintArray = this.paintVertexArray;
 
-    const min = this.expression.evaluate({ zoom: this.zoom }, feature, featureState);
-    const max = this.expression.evaluate({ zoom: this.zoom + 1 }, feature, featureState);
+    const min = this.expression.evaluate(new EvaluationParameters(this.zoom, options), feature, featureState);
+    const max = this.expression.evaluate(new EvaluationParameters(this.zoom + 1, options), feature, featureState);
 
     if (this.type === 'color') {
       const minColor = packColor(min);
@@ -331,7 +331,7 @@ class CrossFadedCompositeBinder {
 
   setConstantPatternPositions() {}
 
-  populatePaintArray(length, feature, imagePositions) {
+  populatePaintArray(length, feature, { imagePositions }) {
     // We populate two paint arrays because, for cross-faded properties, we don't know which direction
     // we're cross-fading to at layout time. In order to keep vertex attributes to a minimum and not pass
     // unnecessary vertex data to the shaders, we determine which to upload at draw time.
@@ -379,7 +379,7 @@ class CrossFadedCompositeBinder {
     }
   }
 
-  updatePaintArray(start, end, feature, featureState, imagePositions) {
+  updatePaintArray(start, end, feature, featureState, { imagePositions }) {
     // We populate two paint arrays because, for cross-faded properties, we don't know which direction
     // we're cross-fading to at layout time. In order to keep vertex attributes to a minimum and not pass
     // unnecessary vertex data to the shaders, we determine which to upload at draw time.
@@ -546,12 +546,12 @@ class ProgramConfiguration {
     return self;
   }
 
-  populatePaintArrays(newLength, feature, index, imagePositions) {
+  populatePaintArrays(newLength, feature, index, options) {
     for (const property in this.binders) {
       const binder = this.binders[property];
-      binder.populatePaintArray(newLength, feature, imagePositions);
+      binder.populatePaintArray(newLength, feature, options);
     }
-    if (feature.id) {
+    if (feature.id !== undefined) {
       const featureId = String(feature.id);
       this._idMap[featureId] = this._idMap[featureId] || [];
       this._idMap[featureId].push({
@@ -571,7 +571,7 @@ class ProgramConfiguration {
     }
   }
 
-  updatePaintArrays(featureStates, vtLayer, layer, imagePositions) {
+  updatePaintArrays(featureStates, vtLayer, layer, options) {
     let dirty = false;
     for (const id in featureStates) {
       const posArray = this._idMap[id];
@@ -588,7 +588,7 @@ class ProgramConfiguration {
             //AHM: Remove after https://github.com/mapbox/mapbox-gl-js/issues/6255
             const value = layer.paint.get(property);
             binder.expression = value.value;
-            binder.updatePaintArray(pos.start, pos.end, feature, featureState, imagePositions);
+            binder.updatePaintArray(pos.start, pos.end, feature, featureState, options);
             dirty = true;
           }
         }
@@ -687,17 +687,17 @@ class ProgramConfigurationSet {
     this.needsUpload = false;
   }
 
-  populatePaintArrays(length, feature, index, imagePositions) {
+  populatePaintArrays(length, feature, index, options) {
     for (const key in this.programConfigurations) {
-      this.programConfigurations[key].populatePaintArrays(length, feature, index, imagePositions);
+      this.programConfigurations[key].populatePaintArrays(length, feature, index, options);
     }
     this.needsUpload = true;
   }
 
-  updatePaintArrays(featureStates, vtLayer, layers, imagePositions) {
+  updatePaintArrays(featureStates, vtLayer, layers, options) {
     for (const layer of layers) {
       this.needsUpload =
-        this.programConfigurations[layer.id].updatePaintArrays(featureStates, vtLayer, layer, imagePositions) ||
+        this.programConfigurations[layer.id].updatePaintArrays(featureStates, vtLayer, layer, options) ||
         this.needsUpload;
     }
   }

package/src/render/glyph_atlas.js

@@ -1,6 +1,6 @@
 const { AlphaImage } = require('../util/image');
 const { register } = require('../util/transfer_registry');
-const potpack = require('potpack');
+const { default: potpack } = require('potpack');
 
 const padding = 1;
 

package/src/render/image_atlas.js

@@ -1,6 +1,6 @@
 const { RGBAImage } = require('../util/image');
 const { register } = require('../util/transfer_registry');
-const potpack = require('potpack');
+const { default: potpack } = require('potpack');
 
 const padding = 1;
 

package/src/render/image_manager.js

@@ -1,4 +1,4 @@
-const potpack = require('potpack');
+const { default: potpack } = require('potpack');
 
 const { RGBAImage } = require('../util/image');
 const { ImagePosition } = require('./image_atlas');

package/src/source/geojson_source.js

@@ -184,7 +184,8 @@ class GeoJSONSource extends Evented {
       tileSize: this.tileSize,
       source: this.id,
       pixelRatio: browser.devicePixelRatio,
-      showCollisionBoxes: this.map.showCollisionBoxes
+      showCollisionBoxes: this.map.showCollisionBoxes,
+      globalState: this.map.getGlobalState()
     };
 
     const justReloaded = tile.workerID != null;

package/src/source/geojson_worker_source.js

@@ -1,7 +1,7 @@
 const rewind = require('@mapwhit/geojson-rewind');
 const GeoJSONWrapper = require('./geojson_wrapper');
-const vtpbf = require('@mapwhit/vt-pbf');
-const supercluster = require('supercluster');
+const { fromVectorTileJs } = require('@mapwhit/vt-pbf');
+const { default: Supercluster } = require('supercluster');
 const { default: geojsonvt } = require('geojson-vt');
 const VectorTileWorkerSource = require('./vector_tile_worker_source');
 
@@ -29,7 +29,7 @@ function loadGeoJSONTile(params) {
   // Encode the geojson-vt tile into binary vector tile form.  This
   // is a convenience that allows `FeatureIndex` to operate the same way
   // across `VectorTileSource` and `GeoJSONSource` data.
-  let pbf = vtpbf(geojsonWrapper);
+  let pbf = fromVectorTileJs(geojsonWrapper);
   if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
     // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
     pbf = new Uint8Array(pbf);
@@ -81,7 +81,7 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
     this._createGeoJSONIndex = params.cluster
       ? () => {
           rewind(data, true);
-          return supercluster(params.superclusterOptions).load(data.features);
+          return new Supercluster(params.superclusterOptions).load(data.features);
         }
       : () => {
           rewind(data, true);

package/src/source/vector_tile_source.js

@@ -94,7 +94,8 @@ class VectorTileSource extends Evented {
         type: this.type,
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
-        showCollisionBoxes: this.map.showCollisionBoxes
+        showCollisionBoxes: this.map.showCollisionBoxes,
+        globalState: this.map.getGlobalState()
       };
       tile.workerID ??= this.dispatcher.nextWorkerId();
       const data = await this.dispatcher.send('loadTile', params, tile.workerID);

package/src/source/vector_tile_worker_source.js

@@ -49,6 +49,7 @@ class VectorTileWorkerSource {
     }
     const { vectorTile, rawData } = response;
     const workerTile = new WorkerTile(params);
+    workerTile.globalState = params.globalState;
     workerTile.vectorTile = vectorTile;
     const result = await workerTile.parse(vectorTile, this.layerIndex, this.resources);
     if (rawData) {

package/src/source/worker_tile.js

@@ -31,6 +31,7 @@ class WorkerTile {
     this.source = params.source;
     this.overscaling = this.tileID.overscaleFactor();
     this.showCollisionBoxes = params.showCollisionBoxes;
+    this.globalState = params.globalState;
   }
 
   async parse(data, layerIndex, resources) {
@@ -81,7 +82,7 @@ class WorkerTile {
         if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
         if (layer.visibility === 'none') continue;
 
-        recalculateLayers(family, this.zoom);
+        recalculateLayers(family, this.zoom, this.globalState);
 
         const bucket = (buckets[layer.id] = layer.createBucket({
           index: featureIndex.bucketLayerIDs.length,
@@ -91,7 +92,8 @@ class WorkerTile {
           overscaling: this.overscaling,
           collisionBoxArray: this.collisionBoxArray,
           sourceLayerIndex: sourceLayerIndex,
-          sourceID: this.source
+          sourceID: this.source,
+          globalState: this.globalState
         }));
 
         bucket.populate(features, options);
@@ -114,7 +116,7 @@ class WorkerTile {
     for (const key in buckets) {
       const bucket = buckets[key];
       if (bucket instanceof SymbolBucket) {
-        recalculateLayers(bucket.layers, this.zoom);
+        recalculateLayers(bucket.layers, this.zoom, this.globalState);
         performSymbolLayout(
           bucket,
           glyphMap,
@@ -127,7 +129,7 @@ class WorkerTile {
         bucket.hasPattern &&
         (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
       ) {
-        recalculateLayers(bucket.layers, this.zoom);
+        recalculateLayers(bucket.layers, this.zoom, this.globalState);
         bucket.addFeatures(options, imageAtlas.patternPositions);
       }
     }
@@ -143,9 +145,9 @@ class WorkerTile {
   }
 }
 
-function recalculateLayers(layers, zoom) {
+function recalculateLayers(layers, zoom, globalState) {
   // Layers are shared and may have been used by a WorkerTile with a different zoom.
-  const parameters = new EvaluationParameters(zoom);
+  const parameters = new EvaluationParameters(zoom, { globalState });
   for (const layer of layers) {
     layer.recalculate(parameters);
   }

package/src/style/evaluation_parameters.js

@@ -8,15 +8,17 @@ class EvaluationParameters {
     this.zoom = zoom;
 
     if (options) {
-      this.now = options.now;
-      this.fadeDuration = options.fadeDuration;
-      this.zoomHistory = options.zoomHistory;
-      this.transition = options.transition;
+      this.now = options.now || 0;
+      this.fadeDuration = options.fadeDuration || 0;
+      this.zoomHistory = options.zoomHistory || new ZoomHistory();
+      this.transition = options.transition || {};
+      this.globalState = options.globalState || {};
     } else {
       this.now = 0;
       this.fadeDuration = 0;
       this.zoomHistory = new ZoomHistory();
       this.transition = {};
+      this.globalState = {};
     }
   }
 

package/src/style/properties.js

@@ -75,6 +75,10 @@ class PropertyValue {
     return this.expression.kind === 'source' || this.expression.kind === 'composite';
   }
 
+  getGlobalStateRefs() {
+    return this.expression.globalStateRefs ?? new Set();
+  }
+
   possiblyEvaluate(parameters) {
     return this.property.possiblyEvaluate(this, parameters);
   }

package/src/style/style.js

@@ -41,6 +41,7 @@ class Style extends Evented {
     this.sourceCaches = {};
     this.zoomHistory = new ZoomHistory();
     this._loaded = false;
+    this._globalState = {};
 
     this._resetUpdates();
 
@@ -78,6 +79,78 @@ class Style extends Evented {
     });
   }
 
+  setGlobalStateProperty(name, value) {
+    this._checkLoaded();
+
+    const newValue = value === null ? (this.stylesheet.state?.[name]?.default ?? null) : value;
+
+    if (deepEqual(newValue, this._globalState[name])) {
+      return this;
+    }
+
+    this._globalState[name] = newValue;
+
+    this._applyGlobalStateChanges([name]);
+  }
+
+  getGlobalState() {
+    return this._globalState;
+  }
+
+  setGlobalState(newStylesheetState) {
+    this._checkLoaded();
+
+    const changedGlobalStateRefs = [];
+
+    for (const propertyName in newStylesheetState) {
+      const didChange = !deepEqual(this._globalState[propertyName], newStylesheetState[propertyName].default);
+
+      if (didChange) {
+        changedGlobalStateRefs.push(propertyName);
+        this._globalState[propertyName] = newStylesheetState[propertyName].default;
+      }
+    }
+
+    this._applyGlobalStateChanges(changedGlobalStateRefs);
+  }
+
+  /**
+   *  * Find all sources that are affected by the global state changes and reload them.
+   * Find all paint properties that are affected by the global state changes and update them.
+   * For example, if a layer filter uses global-state expression, this function will find the source id of that layer.
+   */
+  _applyGlobalStateChanges(globalStateRefs) {
+    if (globalStateRefs.length === 0) {
+      return;
+    }
+
+    const sourceIdsToReload = new Set();
+
+    for (const layerId in this._layers) {
+      const layer = this._layers[layerId];
+      const layoutAffectingGlobalStateRefs = layer.getLayoutAffectingGlobalStateRefs();
+      const paintAffectingGlobalStateRefs = layer.getPaintAffectingGlobalStateRefs();
+
+      for (const ref of globalStateRefs) {
+        if (layoutAffectingGlobalStateRefs.has(ref)) {
+          sourceIdsToReload.add(layer.source);
+        }
+        if (paintAffectingGlobalStateRefs.has(ref)) {
+          for (const { name, value } of paintAffectingGlobalStateRefs.get(ref)) {
+            this._updatePaintProperty(layer, name, value);
+          }
+        }
+      }
+    }
+
+    for (const id in this.sourceCaches) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
+  }
+
   loadJSON(json) {
     this.fire(new Event('dataloading', { dataType: 'style' }));
 
@@ -128,6 +201,8 @@ class Style extends Evented {
 
     this.light = new Light(this.stylesheet.light);
 
+    this.setGlobalState(this.stylesheet.state ?? null);
+
     this.fire(new Event('data', { dataType: 'style' }));
     this.fire(new Event('style.load'));
   }
@@ -547,12 +622,12 @@ class Style extends Evented {
     }
 
     if (filter === null || filter === undefined) {
-      layer.filter = undefined;
+      layer.setFilter(undefined);
       this._updateLayer(layer);
       return;
     }
 
-    layer.filter = clone(filter);
+    layer.setFilter(clone(filter));
     this._updateLayer(layer);
   }
 
@@ -605,13 +680,17 @@ class Style extends Evented {
 
     if (deepEqual(layer.getPaintProperty(name), value)) return;
 
+    this._updatePaintProperty(layer, name, value);
+  }
+
+  _updatePaintProperty(layer, name, value) {
     const requiresRelayout = layer.setPaintProperty(name, value);
     if (requiresRelayout) {
       this._updateLayer(layer);
     }
 
     this._changed = true;
-    this._updatedPaintProps[layerId] = true;
+    this._updatedPaintProps[layer.id] = true;
   }
 
   getPaintProperty(layer, name) {

package/src/style/style_layer.js

@@ -3,6 +3,7 @@ const { filterObject } = require('../util/object');
 const { Evented } = require('@mapwhit/events');
 const { Layout, Transitionable, PossiblyEvaluatedPropertyValue } = require('./properties');
 const { supportsPropertyExpression } = require('@mapwhit/style-expressions');
+const featureFilter = require('../style-spec/feature_filter');
 
 const TRANSITION_SUFFIX = '-transition';
 
@@ -23,9 +24,10 @@ class StyleLayer extends Evented {
       this.source = layer.source;
       this.sourceLayer = layer['source-layer'];
       this.filter = layer.filter;
+      this._featureFilter = featureFilter(layer.filter);
     }
 
-    this._featureFilter = () => true;
+    this._featureFilter ??= featureFilter.addGlobalStateRefs(() => true);
 
     if (properties.layout) {
       this._unevaluatedLayout = new Layout(properties.layout);
@@ -43,6 +45,11 @@ class StyleLayer extends Evented {
     this._transitioningPaint = this._transitionablePaint.untransitioned();
   }
 
+  setFilter(filter) {
+    this.filter = filter;
+    this._featureFilter = featureFilter(filter);
+  }
+
   getCrossfadeParameters() {
     return this._crossfadeParameters;
   }
@@ -55,6 +62,54 @@ class StyleLayer extends Evented {
     return this._unevaluatedLayout.getValue(name);
   }
 
+  /**
+   * Get list of global state references that are used within layout or filter properties.
+   * This is used to determine if layer source need to be reloaded when global state property changes.
+   *
+   */
+  getLayoutAffectingGlobalStateRefs() {
+    const globalStateRefs = new Set();
+
+    if (this._unevaluatedLayout) {
+      for (const propertyName in this._unevaluatedLayout._values) {
+        const value = this._unevaluatedLayout._values[propertyName];
+
+        for (const globalStateRef of value.getGlobalStateRefs()) {
+          globalStateRefs.add(globalStateRef);
+        }
+      }
+    }
+
+    for (const globalStateRef of this._featureFilter.getGlobalStateRefs()) {
+      globalStateRefs.add(globalStateRef);
+    }
+
+    return globalStateRefs;
+  }
+
+  /**
+   * Get list of global state references that are used within paint properties.
+   * This is used to determine if layer needs to be repainted when global state property changes.
+   *
+   */
+  getPaintAffectingGlobalStateRefs() {
+    const globalStateRefs = new Map();
+
+    if (this._transitionablePaint) {
+      for (const propertyName in this._transitionablePaint._values) {
+        const value = this._transitionablePaint._values[propertyName].value;
+
+        for (const globalStateRef of value.getGlobalStateRefs()) {
+          const properties = globalStateRefs.get(globalStateRef) ?? [];
+          properties.push({ name: propertyName, value: value.value });
+          globalStateRefs.set(globalStateRef, properties);
+        }
+      }
+    }
+
+    return globalStateRefs;
+  }
+
   setLayoutProperty(name, value) {
     if (name === 'visibility') {
       this.visibility = value === 'none' ? value : 'visible';

package/src/style-spec/feature_filter/index.js

@@ -1,8 +1,9 @@
-const { createExpression } = require('@mapwhit/style-expressions');
+const { createExpression, findGlobalStateRefs } = require('@mapwhit/style-expressions');
 
 module.exports = createFilter;
 
 createFilter.isExpressionFilter = isExpressionFilter;
+createFilter.addGlobalStateRefs = addGlobalStateRefs;
 
 function isExpressionFilter(filter) {
   if (filter === true || filter === false) {
@@ -66,7 +67,7 @@ const filterSpec = {
  */
 function createFilter(filter) {
   if (filter === null || filter === undefined) {
-    return () => true;
+    return addGlobalStateRefs(() => true);
   }
 
   if (!isExpressionFilter(filter)) {
@@ -77,7 +78,15 @@ function createFilter(filter) {
   if (compiled.result === 'error') {
     throw new Error(compiled.value.map(err => `${err.key}: ${err.message}`).join(', '));
   }
-  return (globalProperties, feature) => compiled.value.evaluate(globalProperties, feature);
+  return addGlobalStateRefs(
+    (globalProperties, feature) => compiled.value.evaluate(globalProperties, feature),
+    () => findGlobalStateRefs(compiled.value.expression)
+  );
+}
+
+function addGlobalStateRefs(filter, getGlobalStateRefs = () => new Set()) {
+  filter.getGlobalStateRefs = getGlobalStateRefs;
+  return filter;
 }
 
 // Comparison function to sort numbers and strings
@@ -86,7 +95,7 @@ function compare(a, b) {
 }
 
 function convertFilter(filter) {
-  if (!filter) return true;
+  if (!filter || filter.length === 0) return true;
   const [op, ...args] = filter;
   if (filter.length <= 1) return op !== 'any';
   switch (op) {

package/src/style-spec/reference/v8.json

@@ -48,6 +48,26 @@
       "doc": "Default pitch, in degrees. Zero is perpendicular to the surface, for a look straight down at the map, while a greater value like 60 looks ahead towards the horizon. The style pitch will be used only if the map has not been positioned by other means (e.g. map options or user interaction).",
       "example": 50
     },
+    "state": {
+      "type": "state",
+      "default": {},
+      "doc": "An object used to define default values when using the [`global-state`](https://maplibre.org/maplibre-style-spec/expressions/#global-state) expression.",
+      "example": {
+        "chargerType": {
+          "default": ["CCS", "CHAdeMO", "Type2"]
+        },
+        "minPreferredChargingSpeed": {
+          "default": 50
+        }
+      },
+      "sdk-support": {
+        "basic functionality": {
+          "js": "https://github.com/maplibre/maplibre-gl-js/issues/4964",
+          "android": "https://github.com/maplibre/maplibre-native/issues/3302",
+          "ios": "https://github.com/maplibre/maplibre-native/issues/3302"
+        }
+      }
+    },
     "light": {
       "type": "light",
       "doc": "The global light source.",
@@ -1293,8 +1313,8 @@
         },
         {
           "symbol-placement": [
-              "line",
-              "line-center"
+            "line",
+            "line-center"
           ]
         }
       ],
@@ -1816,10 +1836,10 @@
       "requires": [
         "text-field",
         {
-            "symbol-placement": [
-                "line",
-                "line-center"
-            ]
+          "symbol-placement": [
+            "line",
+            "line-center"
+          ]
         }
       ],
       "sdk-support": {
@@ -1907,10 +1927,10 @@
           "text-rotation-alignment": "map"
         },
         {
-            "symbol-placement": [
-                "line",
-                "line-center"
-            ]
+          "symbol-placement": [
+            "line",
+            "line-center"
+          ]
         }
       ],
       "sdk-support": {
@@ -2554,6 +2574,24 @@
           }
         }
       },
+      "global-state": {
+        "doc": "Retrieves a property value from global state that can be set with platform-specific APIs. Defaults can be provided using the [`state`](https://maplibre.org/maplibre-style-spec/root/#state) root property. Returns `null` if no value nor default value is set for the retrieved property.",
+        "group": "Lookup",
+        "example": {
+          "syntax": {
+            "method": ["string"],
+            "result": "value"
+          },
+          "value": ["global-state", "someProperty"]
+        },
+        "sdk-support": {
+          "basic functionality": {
+            "js": "https://github.com/maplibre/maplibre-gl-js/issues/4964",
+            "android": "https://github.com/maplibre/maplibre-native/issues/3302",
+            "ios": "https://github.com/maplibre/maplibre-native/issues/3302"
+          }
+        }
+      },
       "to-string": {
         "doc": "Converts the input value to a string. If the input is `null`, the result is `\"\"`. If the input is a boolean, the result is `\"true\"` or `\"false\"`. If the input is a number, it is converted to a string as specified by the [\"NumberToString\" algorithm](https://tc39.github.io/ecma262/#sec-tostring-applied-to-the-number-type) of the ECMAScript Language Specification. If the input is a color, it is converted to a string of the form `\"rgba(r,g,b,a)\"`, where `r`, `g`, and `b` are numerals ranging from 0 to 255, and `a` ranges from 0 to 1. Otherwise, the input is converted to a string in the format specified by the [`JSON.stringify`](https://tc39.github.io/ecma262/#sec-json.stringify) function of the ECMAScript Language Specification.",
         "group": "Types",
@@ -3722,7 +3760,9 @@
       },
       "expression": {
         "interpolated": false,
-        "parameters": ["zoom"]
+        "parameters": [
+          "zoom"
+        ]
       },
       "property-type": "data-constant"
     }
@@ -5232,10 +5272,10 @@
       "type": "enum",
       "values": {
         "map": {
-            "doc": "The hillshade illumination is relative to the north direction."
+          "doc": "The hillshade illumination is relative to the north direction."
         },
         "viewport": {
-            "doc": "The hillshade illumination is relative to the top of the viewport."
+          "doc": "The hillshade illumination is relative to the top of the viewport."
         }
       },
       "default": "viewport",

package/src/ui/map.js

@@ -201,6 +201,28 @@ class Map extends Camera {
     this.on('dataloading', this._onDataLoading);
   }
 
+  /**
+   * Sets a global state property that can be retrieved with the [`global-state` expression](https://maplibre.org/maplibre-style-spec/expressions/#global-state).
+   * If the value is null, it resets the property to its default value defined in the [`state` style property](https://maplibre.org/maplibre-style-spec/root/#state).
+   *
+   * @param propertyName - The name of the state property to set.
+   * @param value - The value of the state property to set.
+   */
+  setGlobalStateProperty(propertyName, value) {
+    if (!this.style.setGlobalStateProperty(propertyName, value)) {
+      return this._update(true);
+    }
+  }
+
+  /**
+   * Returns the global map state
+   *
+   * @returns The map state object.
+   */
+  getGlobalState() {
+    return this.style.getGlobalState();
+  }
+
   /**
    * Adds a {@link IControl} to the map, calling `control.onAdd(this)`.
    *
@@ -1248,7 +1270,8 @@ class Map extends Camera {
         now,
         fadeDuration: this._fadeDuration,
         zoomHistory: this.style.zoomHistory,
-        transition: this.style.getTransition()
+        transition: this.style.getTransition(),
+        globalState: this.style.getGlobalState()
       });
 
       const factor = parameters.crossFadingFactor();

package/src/util/transfer_registry.js

@@ -27,6 +27,7 @@ function register(name, klass, { omit, shallow } = {}) {
 }
 
 register('Object', Object);
+register('Set', Set);
 
 /**
  * Serialize the given object for transfer to or from a web worker.