@mapwhit/tilerenderer 0.51.1 → 0.52.0

package/build/min/package.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.51.1",
+  "version": "0.52.0",
   "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);

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);
 

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);
 

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);
 

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)) {

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, { globalState: 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, { globalState: 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, { globalState: this.globalState });
         bucket.addFeatures(options, imageAtlas.patternPositions);
       }
     }
@@ -143,9 +145,9 @@ class WorkerTile {
   }
 }
 
-function recalculateLayers(layers, zoom) {
+function recalculateLayers(layers, zoom, options) {
   // 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, options);
   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,80 @@ 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;
+
+    const sourceIdsToReload = this._findGlobalStateAffectedSources([name]);
+
+    for (const id in this.sourceCaches) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
+  }
+
+  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;
+      }
+    }
+
+    const sourceIdsToReload = this._findGlobalStateAffectedSources(changedGlobalStateRefs);
+
+    for (const id in this.sourceCaches) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
+  }
+
+  /**
+   * Find all sources that are affected by the global state changes.
+   * For example, if a layer filter uses global-state expression, this function will return the source id of that layer.
+   */
+  _findGlobalStateAffectedSources(globalStateRefs) {
+    if (globalStateRefs.length === 0) {
+      return new Set();
+    }
+
+    const sourceIdsToReload = new Set();
+
+    for (const layerId in this._layers) {
+      const layer = this._layers[layerId];
+      const layoutAffectingGlobalStateRefs = layer.getLayoutAffectingGlobalStateRefs();
+
+      for (const ref of globalStateRefs) {
+        if (layoutAffectingGlobalStateRefs.has(ref)) {
+          sourceIdsToReload.add(layer.source);
+        }
+      }
+    }
+
+    return sourceIdsToReload;
+  }
+
   loadJSON(json) {
     this.fire(new Event('dataloading', { dataType: 'style' }));
 
@@ -128,6 +203,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 +624,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);
   }
 

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,31 @@ 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;
+  }
+
   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,29 @@ 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).
+   *
+   * Note that changing `global-state` values defined in layout properties is not supported, and will be ignored.
+   *
+   * @param propertyName - The name of the state property to set.
+   * @param value - The value of the state property to set.
+   */
+  setGlobalStateProperty(propertyName, value) {
+    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 +1271,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.