maplibre-gl 3.3.1 → 3.4.1

package/dist/maplibre-gl-dev.js

@@ -1,4 +1,4 @@
-/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.3.1/LICENSE.txt */
+/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.4.1/LICENSE.txt */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
@@ -465,6 +465,52 @@ UnitBezier.prototype = {
 
 var UnitBezier$1 = /*@__PURE__*/getDefaultExportFromCjs(unitbezier);
 
+let supportsOffscreenCanvas;
+function offscreenCanvasSupported() {
+    if (supportsOffscreenCanvas == null) {
+        supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' &&
+            new OffscreenCanvas(1, 1).getContext('2d') &&
+            typeof createImageBitmap === 'function';
+    }
+    return supportsOffscreenCanvas;
+}
+
+let offscreenCanvasDistorted;
+/**
+ * Some browsers don't return the exact pixels from a canvas to prevent user fingerprinting (see #3185).
+ * This function writes pixels to an OffscreenCanvas and reads them back using getImageData, returning false
+ * if they don't match.
+ *
+ * @returns true if the browser supports OffscreenCanvas but it distorts getImageData results, false otherwise.
+ */
+function isOffscreenCanvasDistorted() {
+    if (offscreenCanvasDistorted == null) {
+        offscreenCanvasDistorted = false;
+        if (offscreenCanvasSupported()) {
+            const size = 5;
+            const canvas = new OffscreenCanvas(size, size);
+            const context = canvas.getContext('2d', { willReadFrequently: true });
+            if (context) {
+                // fill each pixel with an RGB value that should make the byte at index i equal to i (except alpha channel):
+                // [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 10, 255, ...]
+                for (let i = 0; i < size * size; i++) {
+                    const base = i * 4;
+                    context.fillStyle = `rgb(${base},${base + 1},${base + 2})`;
+                    context.fillRect(i % size, Math.floor(i / size), 1, 1);
+                }
+                const data = context.getImageData(0, 0, size, size).data;
+                for (let i = 0; i < size * size * 4; i++) {
+                    if (i % 4 !== 3 && data[i] !== i) {
+                        offscreenCanvasDistorted = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    return offscreenCanvasDistorted || false;
+}
+
 /**
  * Given a value `t` that varies between 0 and 1, return
  * an interpolation function that eases between 0 and 1 in a pleasing
@@ -934,6 +980,139 @@ function arrayBufferToImage(data, callback) {
     const blob = new Blob([new Uint8Array(data)], { type: 'image/png' });
     img.src = data.byteLength ? URL.createObjectURL(blob) : transparentPngUrl;
 }
+/**
+ * Computes the webcodecs VideoFrame API options to select a rectangle out of
+ * an image and write it into the destination rectangle.
+ *
+ * Rect (x/y/width/height) select the overlapping rectangle from the source image
+ * and layout (offset/stride) write that overlapping rectangle to the correct place
+ * in the destination image.
+ *
+ * Offset is the byte offset in the dest image that the first pixel appears at
+ * and stride is the number of bytes to the start of the next row:
+ * ┌───────────┐
+ * │  dest     │
+ * │       ┌───┼───────┐
+ * │offset→│▓▓▓│ source│
+ * │       │▓▓▓│       │
+ * │       └───┼───────┘
+ * │stride ⇠╌╌╌│
+ * │╌╌╌╌╌╌→    │
+ * └───────────┘
+ *
+ * @param image - source image containing a width and height attribute
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns the layout and rect options to pass into VideoFrame API
+ */
+function computeVideoFrameParameters(image, x, y, width, height) {
+    const destRowOffset = Math.max(-x, 0) * 4;
+    const firstSourceRow = Math.max(0, y);
+    const firstDestRow = firstSourceRow - y;
+    const offset = firstDestRow * width * 4 + destRowOffset;
+    const stride = width * 4;
+    const sourceLeft = Math.max(0, x);
+    const sourceTop = Math.max(0, y);
+    const sourceRight = Math.min(image.width, x + width);
+    const sourceBottom = Math.min(image.height, y + height);
+    return {
+        rect: {
+            x: sourceLeft,
+            y: sourceTop,
+            width: sourceRight - sourceLeft,
+            height: sourceBottom - sourceTop
+        },
+        layout: [{ offset, stride }]
+    };
+}
+/**
+ * Reads pixels from an ImageBitmap/Image/canvas using webcodec VideoFrame API.
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image, or the error if an error occurred
+ */
+async function readImageUsingVideoFrame(image, x, y, width, height) {
+    if (typeof VideoFrame === 'undefined') {
+        throw new Error('VideoFrame not supported');
+    }
+    const frame = new VideoFrame(image, { timestamp: 0 });
+    try {
+        const format = frame === null || frame === void 0 ? void 0 : frame.format;
+        if (!format || !(format.startsWith('BGR') || format.startsWith('RGB'))) {
+            throw new Error(`Unrecognized format ${format}`);
+        }
+        const swapBR = format.startsWith('BGR');
+        const result = new Uint8ClampedArray(width * height * 4);
+        await frame.copyTo(result, computeVideoFrameParameters(image, x, y, width, height));
+        if (swapBR) {
+            for (let i = 0; i < result.length; i += 4) {
+                const tmp = result[i];
+                result[i] = result[i + 2];
+                result[i + 2] = tmp;
+            }
+        }
+        return result;
+    }
+    finally {
+        frame.close();
+    }
+}
+let offscreenCanvas;
+let offscreenCanvasContext;
+/**
+ * Reads pixels from an ImageBitmap/Image/canvas using OffscreenCanvas
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image, or the error if an error occurred
+ */
+function readImageDataUsingOffscreenCanvas(imgBitmap, x, y, width, height) {
+    const origWidth = imgBitmap.width;
+    const origHeight = imgBitmap.height;
+    // Lazily initialize OffscreenCanvas
+    if (!offscreenCanvas || !offscreenCanvasContext) {
+        // Dem tiles are typically 256x256
+        offscreenCanvas = new OffscreenCanvas(origWidth, origHeight);
+        offscreenCanvasContext = offscreenCanvas.getContext('2d', { willReadFrequently: true });
+    }
+    offscreenCanvas.width = origWidth;
+    offscreenCanvas.height = origHeight;
+    offscreenCanvasContext.drawImage(imgBitmap, 0, 0, origWidth, origHeight);
+    const imgData = offscreenCanvasContext.getImageData(x, y, width, height);
+    offscreenCanvasContext.clearRect(0, 0, origWidth, origHeight);
+    return imgData.data;
+}
+/**
+ * Reads RGBA pixels from an preferring OffscreenCanvas, but falling back to VideoFrame if supported and
+ * the browser is mangling OffscreenCanvas getImageData results.
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image
+ */
+async function getImageData(image, x, y, width, height) {
+    if (isOffscreenCanvasDistorted()) {
+        try {
+            return await readImageUsingVideoFrame(image, x, y, width, height);
+        }
+        catch (e) {
+            // fall back to OffscreenCanvas
+        }
+    }
+    return readImageDataUsingOffscreenCanvas(image, x, y, width, height);
+}
 
 const now = typeof performance !== 'undefined' && performance && performance.now ?
     performance.now.bind(performance) :
@@ -1577,10 +1756,28 @@ var source_raster_dem = {
 			terrarium: {
 			},
 			mapbox: {
+			},
+			custom: {
 			}
 		},
 		"default": "mapbox"
 	},
+	redFactor: {
+		type: "number",
+		"default": 1
+	},
+	blueFactor: {
+		type: "number",
+		"default": 1
+	},
+	greenFactor: {
+		type: "number",
+		"default": 1
+	},
+	baseShift: {
+		type: "number",
+		"default": 0
+	},
 	volatile: {
 		type: "boolean",
 		"default": false
@@ -8878,6 +9075,9 @@ class ZoomDependentExpression {
         }
     }
 }
+function isZoomExpression(expression) {
+    return expression._styleExpression !== undefined;
+}
 function createPropertyExpression(expressionInput, propertySpec) {
     const expression = createExpression(expressionInput, propertySpec);
     if (expression.result === 'error') {
@@ -10392,6 +10592,9 @@ function validateLayer(options) {
             else if (sourceType === 'vector' && type === 'raster') {
                 errors.push(new ValidationError(key, layer.source, `layer "${layer.id}" requires a raster source`));
             }
+            else if (sourceType !== 'raster-dem' && type === 'hillshade') {
+                errors.push(new ValidationError(key, layer.source, `layer "${layer.id}" requires a raster-dem source`));
+            }
             else if (sourceType === 'raster' && type !== 'raster') {
                 errors.push(new ValidationError(key, layer.source, `layer "${layer.id}" requires a vector source`));
             }
@@ -10478,6 +10681,47 @@ function validateString(options) {
     return [];
 }
 
+function validateRasterDEMSource(options) {
+    var _a;
+    const sourceName = (_a = options.sourceName) !== null && _a !== void 0 ? _a : '';
+    const rasterDEM = options.value;
+    const styleSpec = options.styleSpec;
+    const rasterDEMSpec = styleSpec.source_raster_dem;
+    const style = options.style;
+    let errors = [];
+    const rootType = getType(rasterDEM);
+    if (rasterDEM === undefined) {
+        return errors;
+    }
+    else if (rootType !== 'object') {
+        errors.push(new ValidationError('source_raster_dem', rasterDEM, `object expected, ${rootType} found`));
+        return errors;
+    }
+    const encoding = unbundle(rasterDEM.encoding);
+    const isCustomEncoding = encoding === 'custom';
+    const customEncodingKeys = ['redFactor', 'greenFactor', 'blueFactor', 'baseShift'];
+    const encodingName = options.value.encoding ? `"${options.value.encoding}"` : 'Default';
+    for (const key in rasterDEM) {
+        if (!isCustomEncoding && customEncodingKeys.includes(key)) {
+            errors.push(new ValidationError(key, rasterDEM[key], `In "${sourceName}": "${key}" is only valid when "encoding" is set to "custom". ${encodingName} encoding found`));
+        }
+        else if (rasterDEMSpec[key]) {
+            errors = errors.concat(options.validateSpec({
+                key,
+                value: rasterDEM[key],
+                valueSpec: rasterDEMSpec[key],
+                validateSpec: options.validateSpec,
+                style,
+                styleSpec
+            }));
+        }
+        else {
+            errors.push(new ValidationError(key, rasterDEM[key], `unknown property "${key}"`));
+        }
+    }
+    return errors;
+}
+
 const objectElementValidators = {
     promoteId: validatePromoteId
 };
@@ -10495,7 +10739,6 @@ function validateSource$1(options) {
     switch (type) {
         case 'vector':
         case 'raster':
-        case 'raster-dem':
             errors = validateObject({
                 key,
                 value,
@@ -10506,6 +10749,15 @@ function validateSource$1(options) {
                 validateSpec,
             });
             return errors;
+        case 'raster-dem':
+            errors = validateRasterDEMSource({
+                sourceName: key,
+                value,
+                style: options.style,
+                styleSpec,
+                validateSpec,
+            });
+            return errors;
         case 'geojson':
             errors = validateObject({
                 key,
@@ -10922,6 +11174,7 @@ const expression = {
     createPropertyExpression,
     isExpression,
     isExpressionFilter,
+    isZoomExpression,
     normalizePropertyExpression,
 };
 const styleFunction = {
@@ -25473,8 +25726,13 @@ class LineStyleLayer extends StyleLayer {
     }
     _handleSpecialPaintPropertyUpdate(name) {
         if (name === 'line-gradient') {
-            const expression = this._transitionablePaint._values['line-gradient'].value.expression;
-            this.stepInterpolant = expression._styleExpression.expression instanceof Step;
+            const expression = this.gradientExpression();
+            if (isZoomExpression(expression)) {
+                this.stepInterpolant = expression._styleExpression.expression instanceof Step;
+            }
+            else {
+                this.stepInterpolant = false;
+            }
             this.gradientVersion = (this.gradientVersion + 1) % Number.MAX_SAFE_INTEGER;
         }
     }
@@ -29150,29 +29408,45 @@ function getQuadkey(z, x, y) {
 register('CanonicalTileID', CanonicalTileID);
 register('OverscaledTileID', OverscaledTileID, { omit: ['posMatrix'] });
 
-// DEMData is a data structure for decoding, backfilling, and storing elevation data for processing in the hillshade shaders
-// data can be populated either from a pngraw image tile or from serliazed data sent back from a worker. When data is initially
-// loaded from a image tile, we decode the pixel values using the appropriate decoding formula, but we store the
-// elevation data as an Int32 value. we add 65536 (2^16) to eliminate negative values and enable the use of
-// integer overflow when creating the texture used in the hillshadePrepare step.
-// DEMData also handles the backfilling of data from a tile's neighboring tiles. This is necessary because we use a pixel's 8
-// surrounding pixel values to compute the slope at that pixel, and we cannot accurately calculate the slope at pixels on a
-// tile's edge without backfilling from neighboring tiles.
 class DEMData {
     // RGBAImage data has uniform 1px padding on all sides: square tile edge size defines stride
     // and dim is calculated as stride - 2.
-    constructor(uid, data, encoding) {
+    constructor(uid, data, encoding, redFactor = 1.0, greenFactor = 1.0, blueFactor = 1.0, baseShift = 0.0) {
         this.uid = uid;
         if (data.height !== data.width)
             throw new RangeError('DEM tiles must be square');
-        if (encoding && encoding !== 'mapbox' && encoding !== 'terrarium') {
-            warnOnce(`"${encoding}" is not a valid encoding type. Valid types include "mapbox" and "terrarium".`);
+        if (encoding && !['mapbox', 'terrarium', 'custom'].includes(encoding)) {
+            warnOnce(`"${encoding}" is not a valid encoding type. Valid types include "mapbox", "terrarium" and "custom".`);
             return;
         }
         this.stride = data.height;
         const dim = this.dim = data.height - 2;
         this.data = new Uint32Array(data.data.buffer);
-        this.encoding = encoding || 'mapbox';
+        switch (encoding) {
+            case 'terrarium':
+                // unpacking formula for mapzen terrarium:
+                // https://aws.amazon.com/public-datasets/terrain/
+                this.redFactor = 256.0;
+                this.greenFactor = 1.0;
+                this.blueFactor = 1.0 / 256.0;
+                this.baseShift = 32768.0;
+                break;
+            case 'custom':
+                this.redFactor = redFactor;
+                this.greenFactor = greenFactor;
+                this.blueFactor = blueFactor;
+                this.baseShift = baseShift;
+                break;
+            case 'mapbox':
+            default:
+                // unpacking formula for mapbox.terrain-rgb:
+                // https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb
+                this.redFactor = 6553.6;
+                this.greenFactor = 25.6;
+                this.blueFactor = 0.1;
+                this.baseShift = 10000.0;
+                break;
+        }
         // in order to avoid flashing seams between tiles, here we are initially populating a 1px border of pixels around the image
         // with the data of the nearest pixel from the image. this data is eventually replaced when the tile's neighboring
         // tiles are loaded and the accurate data can be backfilled using DEMData#backfillBorder
@@ -29207,26 +29481,18 @@ class DEMData {
     get(x, y) {
         const pixels = new Uint8Array(this.data.buffer);
         const index = this._idx(x, y) * 4;
-        const unpack = this.encoding === 'terrarium' ? this._unpackTerrarium : this._unpackMapbox;
-        return unpack(pixels[index], pixels[index + 1], pixels[index + 2]);
+        return this.unpack(pixels[index], pixels[index + 1], pixels[index + 2]);
     }
     getUnpackVector() {
-        return this.encoding === 'terrarium' ? [256.0, 1.0, 1.0 / 256.0, 32768.0] : [6553.6, 25.6, 0.1, 10000.0];
+        return [this.redFactor, this.greenFactor, this.blueFactor, this.baseShift];
     }
     _idx(x, y) {
         if (x < -1 || x >= this.dim + 1 || y < -1 || y >= this.dim + 1)
             throw new RangeError('out of range source coordinates for DEM data');
         return (y + 1) * this.stride + (x + 1);
     }
-    _unpackMapbox(r, g, b) {
-        // unpacking formula for mapbox.terrain-rgb:
-        // https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb
-        return ((r * 256 * 256 + g * 256.0 + b) / 10.0 - 10000.0);
-    }
-    _unpackTerrarium(r, g, b) {
-        // unpacking formula for mapzen terrarium:
-        // https://aws.amazon.com/public-datasets/terrain/
-        return ((r * 256 + g + b / 256) - 32768.0);
+    unpack(r, g, b) {
+        return (r * this.redFactor + g * this.greenFactor + b * this.blueFactor - this.baseShift);
     }
     getPixels() {
         return new RGBAImage({ width: this.stride, height: this.stride }, new Uint8Array(this.data.buffer));
@@ -29911,10 +30177,11 @@ function getGlyphQuads(anchor, shaping, textOffset, layer, alongLine, feature, i
                 verticalizedLabelOffset = builtInOffset;
                 builtInOffset = [0, 0];
             }
+            const textureScale = positionedGlyph.metrics.isDoubleResolution ? 2 : 1;
             const x1 = (positionedGlyph.metrics.left - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
             const y1 = (-positionedGlyph.metrics.top - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
-            const x2 = x1 + textureRect.w * positionedGlyph.scale / pixelRatio;
-            const y2 = y1 + textureRect.h * positionedGlyph.scale / pixelRatio;
+            const x2 = x1 + textureRect.w / textureScale * positionedGlyph.scale / pixelRatio;
+            const y2 = y1 + textureRect.h / textureScale * positionedGlyph.scale / pixelRatio;
             const tl = new Point$2(x1, y1);
             const tr = new Point$2(x2, y1);
             const bl = new Point$2(x1, y2);
@@ -31316,6 +31583,7 @@ exports.getAnchorAlignment = getAnchorAlignment;
 exports.getAnchorJustification = getAnchorJustification;
 exports.getArrayBuffer = getArrayBuffer;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+exports.getImageData = getImageData;
 exports.getJSON = getJSON;
 exports.getOverlapMode = getOverlapMode;
 exports.getProtocolAction = getProtocolAction;
@@ -31327,6 +31595,7 @@ exports.identity = identity$2;
 exports.interpolate = interpolate;
 exports.invert = invert$2;
 exports.isImageBitmap = isImageBitmap;
+exports.isOffscreenCanvasDistorted = isOffscreenCanvasDistorted;
 exports.isSafari = isSafari;
 exports.isWorker = isWorker;
 exports.keysDifference = keysDifference;
@@ -31341,6 +31610,7 @@ exports.mul$1 = mul$3;
 exports.multiply = multiply$5;
 exports.nextPowerOfTwo = nextPowerOfTwo;
 exports.normalize = normalize$4;
+exports.offscreenCanvasSupported = offscreenCanvasSupported;
 exports.operations = operations;
 exports.ortho = ortho;
 exports.parseCacheControl = parseCacheControl;
@@ -31353,6 +31623,7 @@ exports.plugin = plugin;
 exports.pointGeometry = pointGeometry;
 exports.polygonIntersectsPolygon = polygonIntersectsPolygon;
 exports.potpack = potpack;
+exports.readImageUsingVideoFrame = readImageUsingVideoFrame;
 exports.register = register;
 exports.registerForPluginStateChange = registerForPluginStateChange;
 exports.renderColorRamp = renderColorRamp;
@@ -31667,12 +31938,27 @@ function loadVectorTile(params, callback) {
             callback(err);
         }
         else if (data) {
-            callback(null, {
-                vectorTile: new performance.vectorTile.VectorTile(new performance.Protobuf(data)),
-                rawData: data,
-                cacheControl,
-                expires
-            });
+            try {
+                const vectorTile = new performance.vectorTile.VectorTile(new performance.Protobuf(data));
+                callback(null, {
+                    vectorTile,
+                    rawData: data,
+                    cacheControl,
+                    expires
+                });
+            }
+            catch (ex) {
+                const bytes = new Uint8Array(data);
+                const isGzipped = bytes[0] === 0x1f && bytes[1] === 0x8b;
+                let errorMessage = `Unable to parse the tile at ${params.request.url}, `;
+                if (isGzipped) {
+                    errorMessage += 'please make sure the data is not gzipped and that you have configured the relevant header in the server';
+                }
+                else {
+                    errorMessage += `got error: ${ex.messge}`;
+                }
+                callback(new Error(errorMessage));
+            }
         }
     });
     return () => {
@@ -31820,30 +32106,18 @@ class RasterDEMTileWorkerSource {
     constructor() {
         this.loaded = {};
     }
-    loadTile(params, callback) {
-        const { uid, encoding, rawImageData } = params;
-        // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
-        const imagePixels = performance.isImageBitmap(rawImageData) ? this.getImageData(rawImageData) : rawImageData;
-        const dem = new performance.DEMData(uid, imagePixels, encoding);
+    async loadTile(params, callback) {
+        const { uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift } = params;
+        const width = rawImageData.width + 2;
+        const height = rawImageData.height + 2;
+        const imagePixels = performance.isImageBitmap(rawImageData) ?
+            new performance.RGBAImage({ width, height }, await performance.getImageData(rawImageData, -1, -1, width, height)) :
+            rawImageData;
+        const dem = new performance.DEMData(uid, imagePixels, encoding, redFactor, greenFactor, blueFactor, baseShift);
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;
         callback(null, dem);
     }
-    getImageData(imgBitmap) {
-        // Lazily initialize OffscreenCanvas
-        if (!this.offscreenCanvas || !this.offscreenCanvasContext) {
-            // Dem tiles are typically 256x256
-            this.offscreenCanvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
-            this.offscreenCanvasContext = this.offscreenCanvas.getContext('2d', { willReadFrequently: true });
-        }
-        this.offscreenCanvas.width = imgBitmap.width;
-        this.offscreenCanvas.height = imgBitmap.height;
-        this.offscreenCanvasContext.drawImage(imgBitmap, 0, 0, imgBitmap.width, imgBitmap.height);
-        // Insert an additional 1px padding around the image to allow backfilling for neighboring data.
-        const imgData = this.offscreenCanvasContext.getImageData(-1, -1, imgBitmap.width + 2, imgBitmap.height + 2);
-        this.offscreenCanvasContext.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
-        return new performance.RGBAImage({ width: imgData.width, height: imgData.height }, imgData.data);
-    }
     removeTile(params) {
         const loaded = this.loaded, uid = params.uid;
         if (loaded && loaded[uid]) {
@@ -34029,7 +34303,7 @@ define(['./shared'], (function (performance) { 'use strict';
 
 var name = "maplibre-gl";
 var description = "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library";
-var version$2 = "3.3.1";
+var version$2 = "3.4.1";
 var main = "dist/maplibre-gl.js";
 var style = "dist/maplibre-gl.css";
 var license = "BSD-3-Clause";
@@ -34048,12 +34322,12 @@ var dependencies = {
 	"@mapbox/unitbezier": "^0.0.1",
 	"@mapbox/vector-tile": "^1.3.1",
 	"@mapbox/whoots-js": "^3.1.0",
-	"@maplibre/maplibre-gl-style-spec": "^19.3.0",
-	"@types/geojson": "^7946.0.10",
+	"@maplibre/maplibre-gl-style-spec": "^19.3.2",
+	"@types/geojson": "^7946.0.11",
 	"@types/mapbox__point-geometry": "^0.1.2",
-	"@types/mapbox__vector-tile": "^1.3.0",
-	"@types/pbf": "^3.0.2",
-	"@types/supercluster": "^7.1.0",
+	"@types/mapbox__vector-tile": "^1.3.1",
+	"@types/pbf": "^3.0.3",
+	"@types/supercluster": "^7.1.1",
 	earcut: "^2.2.4",
 	"geojson-vt": "^3.2.1",
 	"gl-matrix": "^3.4.3",
@@ -34070,56 +34344,56 @@ var dependencies = {
 var devDependencies = {
 	"@mapbox/mapbox-gl-rtl-text": "^0.2.3",
 	"@mapbox/mvt-fixtures": "^3.10.0",
-	"@rollup/plugin-commonjs": "^25.0.4",
-	"@rollup/plugin-json": "^6.0.0",
-	"@rollup/plugin-node-resolve": "^15.2.1",
-	"@rollup/plugin-replace": "^5.0.2",
-	"@rollup/plugin-strip": "^3.0.2",
-	"@rollup/plugin-terser": "^0.4.3",
-	"@rollup/plugin-typescript": "^11.1.3",
-	"@types/benchmark": "^2.1.2",
+	"@rollup/plugin-commonjs": "^25.0.5",
+	"@rollup/plugin-json": "^6.0.1",
+	"@rollup/plugin-node-resolve": "^15.2.3",
+	"@rollup/plugin-replace": "^5.0.3",
+	"@rollup/plugin-strip": "^3.0.3",
+	"@rollup/plugin-terser": "^0.4.4",
+	"@rollup/plugin-typescript": "^11.1.5",
+	"@types/benchmark": "^2.1.3",
 	"@types/cssnano": "^5.0.0",
-	"@types/d3": "^7.4.0",
-	"@types/diff": "^5.0.3",
-	"@types/earcut": "^2.1.1",
-	"@types/eslint": "^8.44.2",
-	"@types/gl": "^6.0.2",
+	"@types/d3": "^7.4.1",
+	"@types/diff": "^5.0.5",
+	"@types/earcut": "^2.1.2",
+	"@types/eslint": "^8.44.3",
+	"@types/gl": "^6.0.3",
 	"@types/glob": "^8.1.0",
 	"@types/jest": "^29.5.3",
-	"@types/jsdom": "^21.1.2",
-	"@types/minimist": "^1.2.2",
+	"@types/jsdom": "^21.1.3",
+	"@types/minimist": "^1.2.3",
 	"@types/murmurhash-js": "^1.0.4",
-	"@types/nise": "^1.4.1",
-	"@types/node": "^20.5.7",
-	"@types/offscreencanvas": "^2019.7.0",
+	"@types/nise": "^1.4.2",
+	"@types/node": "^20.8.3",
+	"@types/offscreencanvas": "^2019.7.1",
 	"@types/pixelmatch": "^5.2.4",
-	"@types/pngjs": "^6.0.1",
-	"@types/react": "^18.2.21",
-	"@types/react-dom": "^18.2.7",
-	"@types/request": "^2.48.8",
+	"@types/pngjs": "^6.0.2",
+	"@types/react": "^18.2.25",
+	"@types/react-dom": "^18.2.11",
+	"@types/request": "^2.48.9",
 	"@types/shuffle-seed": "^1.1.0",
 	"@types/window-or-global": "^1.0.4",
-	"@typescript-eslint/eslint-plugin": "^6.4.1",
-	"@typescript-eslint/parser": "^6.4.1",
-	address: "^1.2.2",
+	"@typescript-eslint/eslint-plugin": "^6.7.4",
+	"@typescript-eslint/parser": "^6.7.4",
+	address: "^2.0.1",
 	benchmark: "^2.1.4",
 	canvas: "^2.11.2",
 	cssnano: "^6.0.1",
 	d3: "^7.8.5",
 	"d3-queue": "^3.0.7",
-	"devtools-protocol": "^0.0.1188743",
+	"devtools-protocol": "^0.0.1206220",
 	diff: "^5.1.0",
 	"dts-bundle-generator": "^8.0.1",
-	eslint: "^8.48.0",
+	eslint: "^8.51.0",
 	"eslint-config-mourner": "^3.0.0",
 	"eslint-plugin-html": "^7.1.0",
 	"eslint-plugin-import": "^2.28.1",
-	"eslint-plugin-jest": "^27.2.3",
+	"eslint-plugin-jest": "^27.4.2",
 	"eslint-plugin-react": "^7.33.2",
 	"eslint-plugin-tsdoc": "0.2.17",
-	expect: "^29.6.4",
+	expect: "^29.7.0",
 	gl: "^6.0.2",
-	glob: "^10.3.3",
+	glob: "^10.3.10",
 	"is-builtin-module": "^3.2.1",
 	jest: "^29.6.2",
 	"jest-canvas-mock": "^2.5.2",
@@ -34135,14 +34409,14 @@ var devDependencies = {
 	"pdf-merger-js": "^4.3.0",
 	pixelmatch: "^5.3.0",
 	pngjs: "^7.0.0",
-	postcss: "^8.4.28",
+	postcss: "^8.4.31",
 	"postcss-cli": "^10.1.0",
 	"postcss-inline-svg": "^6.0.0",
 	"pretty-bytes": "^6.1.1",
-	puppeteer: "^21.1.0",
+	puppeteer: "^21.3.8",
 	react: "^18.2.0",
 	"react-dom": "^18.2.0",
-	rollup: "^3.28.1",
+	rollup: "^4.0.2",
 	"rollup-plugin-sourcemaps": "^0.6.3",
 	rw: "^1.3.3",
 	semver: "^7.5.4",
@@ -34154,10 +34428,10 @@ var devDependencies = {
 	"ts-jest": "^29.1.1",
 	"ts-node": "^10.9.1",
 	tslib: "^2.6.2",
-	typedoc: "^0.24.8",
+	typedoc: "^0.25.2",
 	"typedoc-plugin-markdown": "^3.16.0",
 	"typedoc-plugin-missing-exports": "^2.1.0",
-	typescript: "^5.1.6"
+	typescript: "^5.2.2"
 };
 var overrides = {
 	"postcss-inline-svg": {
@@ -35354,6 +35628,9 @@ class GlyphManager {
         if (!this._doesCharSupportLocalGlyph(id)) {
             return;
         }
+        // Client-generated glyphs are rendered at 2x texture scale,
+        // because CJK glyphs are more detailed than others.
+        const textureScale = 2;
         let tinySDF = entry.tinySDF;
         if (!tinySDF) {
             let fontWeight = '400';
@@ -35367,9 +35644,9 @@ class GlyphManager {
                 fontWeight = '200';
             }
             tinySDF = entry.tinySDF = new GlyphManager.TinySDF({
-                fontSize: 24,
-                buffer: 3,
-                radius: 8,
+                fontSize: 24 * textureScale,
+                buffer: 3 * textureScale,
+                radius: 8 * textureScale,
                 cutoff: 0.25,
                 fontFamily,
                 fontWeight
@@ -35389,16 +35666,18 @@ class GlyphManager {
          * To approximately align TinySDF glyphs with server-provided glyphs, we use this baseline adjustment
          * factor calibrated to be in between DIN Pro and Arial Unicode (but closer to Arial Unicode)
          */
-        const topAdjustment = 27;
+        const topAdjustment = 27.5;
+        const leftAdjustment = 0.5;
         return {
             id,
-            bitmap: new performance.AlphaImage({ width: char.width || 30, height: char.height || 30 }, char.data),
+            bitmap: new performance.AlphaImage({ width: char.width || 30 * textureScale, height: char.height || 30 * textureScale }, char.data),
             metrics: {
-                width: char.glyphWidth || 24,
-                height: char.glyphHeight || 24,
-                left: char.glyphLeft || 0,
-                top: char.glyphTop - topAdjustment || -8,
-                advance: char.glyphAdvance || 24
+                width: char.glyphWidth / textureScale || 24,
+                height: char.glyphHeight / textureScale || 24,
+                left: (char.glyphLeft / textureScale + leftAdjustment) || 0,
+                top: char.glyphTop / textureScale - topAdjustment || -8,
+                advance: char.glyphAdvance / textureScale || 24,
+                isDoubleResolution: true
             }
         };
     }
@@ -36229,7 +36508,7 @@ class VectorTileSource extends performance.Evented {
  * ```ts
  * map.addSource('raster-source', {
  *     'type': 'raster',
- *     'tiles': ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'],
+ *     'tiles': ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'],
  *     'tileSize': 256,
  * });
  * ```
@@ -36355,16 +36634,6 @@ class RasterTileSource extends performance.Evented {
     }
 }
 
-let supportsOffscreenCanvas;
-function offscreenCanvasSupported() {
-    if (supportsOffscreenCanvas == null) {
-        supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' &&
-            new OffscreenCanvas(1, 1).getContext('2d') &&
-            typeof createImageBitmap === 'function';
-    }
-    return supportsOffscreenCanvas;
-}
-
 /**
  * A source containing raster DEM tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
  * This source can be used to show hillshading and 3D terrain
@@ -36388,12 +36657,16 @@ class RasterDEMTileSource extends RasterTileSource {
         this.maxzoom = 22;
         this._options = performance.extend({ type: 'raster-dem' }, options);
         this.encoding = options.encoding || 'mapbox';
+        this.redFactor = options.redFactor;
+        this.greenFactor = options.greenFactor;
+        this.blueFactor = options.blueFactor;
+        this.baseShift = options.baseShift;
     }
     loadTile(tile, callback) {
         const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
-        tile.request = ImageRequest.getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this), this.map._refreshExpiredTiles);
+        const request = this.map._requestManager.transformRequest(url, ResourceType.Tile);
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
-        function imageLoaded(err, img) {
+        tile.request = ImageRequest.getImage(request, async (err, img, expiry) => {
             delete tile.request;
             if (tile.aborted) {
                 tile.state = 'unloaded';
@@ -36405,23 +36678,38 @@ class RasterDEMTileSource extends RasterTileSource {
             }
             else if (img) {
                 if (this.map._refreshExpiredTiles)
-                    tile.setExpiryData(img);
-                delete img.cacheControl;
-                delete img.expires;
-                const transfer = performance.isImageBitmap(img) && offscreenCanvasSupported();
-                const rawImageData = transfer ? img : performance.browser.getImageData(img, 1);
+                    tile.setExpiryData(expiry);
+                const transfer = performance.isImageBitmap(img) && performance.offscreenCanvasSupported();
+                const rawImageData = transfer ? img : await readImageNow(img);
                 const params = {
                     uid: tile.uid,
                     coord: tile.tileID,
                     source: this.id,
                     rawImageData,
-                    encoding: this.encoding
+                    encoding: this.encoding,
+                    redFactor: this.redFactor,
+                    greenFactor: this.greenFactor,
+                    blueFactor: this.blueFactor,
+                    baseShift: this.baseShift
                 };
                 if (!tile.actor || tile.state === 'expired') {
                     tile.actor = this.dispatcher.getActor();
-                    tile.actor.send('loadDEMTile', params, done.bind(this));
+                    tile.actor.send('loadDEMTile', params, done);
+                }
+            }
+        }, this.map._refreshExpiredTiles);
+        async function readImageNow(img) {
+            if (typeof VideoFrame !== 'undefined' && performance.isOffscreenCanvasDistorted()) {
+                const width = img.width + 2;
+                const height = img.height + 2;
+                try {
+                    return new performance.RGBAImage({ width, height }, await performance.readImageUsingVideoFrame(img, -1, -1, width, height));
+                }
+                catch (e) {
+                    // fall-back to browser canvas decoding
                 }
             }
+            return performance.browser.getImageData(img, 1);
         }
         function done(err, data) {
             if (err) {
@@ -41955,6 +42243,8 @@ class Style extends performance.Evented {
             this[op.command].apply(this, op.args);
         }
         this.stylesheet = nextState;
+        // reset serialization field, to be populated only when needed
+        this._serializedLayers = null;
         return true;
     }
     addImage(id, image) {
@@ -49369,6 +49659,12 @@ class ScrollZoomHandler {
     }
     reset() {
         this._active = false;
+        this._zooming = false;
+        delete this._targetZoom;
+        if (this._finishTimeout) {
+            clearTimeout(this._finishTimeout);
+            delete this._finishTimeout;
+        }
     }
 }
 
@@ -50148,7 +50444,7 @@ class HandlerManager {
             this._updatingCamera = true;
             const inertialEase = this._inertia._onMoveEnd(this._map.dragPan._inertiaOptions);
             const shouldSnapToNorth = bearing => bearing !== 0 && -this._bearingSnap < bearing && bearing < this._bearingSnap;
-            if (inertialEase) {
+            if (inertialEase && (inertialEase.essential || !performance.browser.prefersReducedMotion)) {
                 if (shouldSnapToNorth(inertialEase.bearing || this._map.getBearing())) {
                     inertialEase.bearing = 0;
                 }
@@ -53974,6 +54270,7 @@ let Map$1 = class Map extends Camera {
      * @param name - The name of the paint property to set.
      * @param value - The value of the paint property to set.
      * Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/).
+     * Pass `null` to unset the existing value.
      * @param options - Options object.
      * @returns `this`
      * @example
@@ -55131,6 +55428,10 @@ class Marker extends performance.Evented {
         this._update = (e) => {
             if (!this._map)
                 return;
+            const isFullyLoaded = this._map.loaded() && !this._map.isMoving();
+            if ((e === null || e === void 0 ? void 0 : e.type) === 'terrain' || ((e === null || e === void 0 ? void 0 : e.type) === 'render' && !isFullyLoaded)) {
+                this._map.once('render', this._update);
+            }
             if (this._map.transform.renderWorldCopies) {
                 this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
             }
@@ -55354,6 +55655,7 @@ class Marker extends performance.Evented {
         map.getCanvasContainer().appendChild(this._element);
         map.on('move', this._update);
         map.on('moveend', this._update);
+        map.on('terrain', this._update);
         this.setDraggable(this._draggable);
         this._update();
         // If we attached the `click` listener to the marker element, the popup