azure-maps-control 3.0.2 → 3.1.0

package/dist/atlas-core-snr.js

@@ -91,10 +91,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 
 	var azuremapsMaplibreGlDev = {exports: {}};
 
-	/* Build timestamp: Tue, 15 Aug 2023 00:27:33 GMT */
+	/* Build timestamp: Thu, 16 Nov 2023 20:40:59 GMT */
 
 	(function (module, exports) {
-		/* The Azure Maps fork of 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.0/LICENSE.txt */
+		/* The Azure Maps fork of MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.6.1/LICENSE.txt */
 		(function (global, factory) {
 		module.exports = factory() ;
 		})(commonjsGlobal, (function () {
@@ -121,7 +121,22 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		}
 
 
-		define(['exports'], (function (exports) {
+		define(['exports'], (function (exports) {
+		function __awaiter(thisArg, _arguments, P, generator) {
+		    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+		    return new (P || (P = Promise))(function (resolve, reject) {
+		        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+		        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+		        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+		        step((generator = generator.apply(thisArg, _arguments || [])).next());
+		    });
+		}
+
+		typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+		    var e = new Error(message);
+		    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+		};
+
 		function getDefaultExportFromCjs (x) {
 			return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 		}
@@ -518,6 +533,52 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 
 		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
@@ -943,6 +1004,143 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    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
+		 */
+		function readImageUsingVideoFrame(image, x, y, width, height) {
+		    return __awaiter(this, void 0, void 0, function* () {
+		        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);
+		            yield 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
+		 */
+		function getImageData(image, x, y, width, height) {
+		    return __awaiter(this, void 0, void 0, function* () {
+		        if (isOffscreenCanvasDistorted()) {
+		            try {
+		                return yield 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) :
@@ -1579,10 +1777,28 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 					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
@@ -8856,6 +9072,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        }
 		    }
 		}
+		function isZoomExpression(expression) {
+		    return expression._styleExpression !== undefined;
+		}
 		function createPropertyExpression(expressionInput, propertySpec) {
 		    const expression = createExpression(expressionInput, propertySpec);
 		    if (expression.result === 'error') {
@@ -9871,6 +10090,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            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`));
 		            }
@@ -9957,6 +10179,47 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    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
 		};
@@ -9974,7 +10237,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    switch (type) {
 		        case 'vector':
 		        case 'raster':
-		        case 'raster-dem':
 		            errors = validateObject({
 		                key,
 		                value,
@@ -9985,6 +10247,15 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		                validateSpec,
 		            });
 		            return errors;
+		        case 'raster-dem':
+		            errors = validateRasterDEMSource({
+		                sourceName: key,
+		                value,
+		                style: options.style,
+		                styleSpec,
+		                validateSpec,
+		            });
+		            return errors;
 		        case 'geojson':
 		            errors = validateObject({
 		                key,
@@ -10698,7 +10969,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            klass.serialize(input, transferables) : {};
 		        if (!klass.serialize) {
 		            for (const key in input) {
-		                // any cast due to https://github.com/facebook/flow/issues/5393
 		                if (!input.hasOwnProperty(key))
 		                    continue; // eslint-disable-line no-prototype-builtins
 		                if (registry[name].omit.indexOf(key) >= 0)
@@ -18641,8 +18911,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    }
 		    _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;
 		        }
 		    }
@@ -20492,7 +20767,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		/**
 		 * Called when shapedIcon.image.contentMatch is set.
 		 * Determines the dimensions of a content rectangle using the value in contentMatch.
-		 * @param shapedIcon The icon that will be resized.
+		 *
+		 * @param shapedIcon - The icon that will be resized.
 		 * @returns Extents of the shapedIcon with contentMatch adjustments if necessary.
 		 */
 		function applyContentMatch(shapedIcon) {
@@ -21275,7 +21551,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		 */
 		function resolveTokens(properties, text) {
 		    return text.replace(/{([^{}]+)}/g, (match, key) => {
-		        return key in properties ? String(properties[key]) : '';
+		        return properties && key in properties ? String(properties[key]) : '';
 		    });
 		}
 
@@ -21769,8 +22045,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        if (callback) {
 		            this.callbacks[id] = callback;
 		        }
-		        const buffers = isSafari(this.globalScope) ? undefined : [];
-		        this.target.postMessage({
+		        const buffers = [];
+		        const message = {
 		            id,
 		            type,
 		            hasCallback: !!callback,
@@ -21778,19 +22054,21 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            mustQueue,
 		            sourceMapId: this.mapId,
 		            data: serialize(data, buffers)
-		        }, buffers);
+		        };
+		        this.target.postMessage(message, { transfer: buffers });
 		        return {
 		            cancel: () => {
 		                if (callback) {
 		                    // Set the callback to null so that it never fires after the request is aborted.
 		                    delete this.callbacks[id];
 		                }
-		                this.target.postMessage({
+		                const cancelMessage = {
 		                    id,
 		                    type: '<cancel>',
 		                    targetMapId,
 		                    sourceMapId: this.mapId
-		                });
+		                };
+		                this.target.postMessage(cancelMessage);
 		            }
 		        };
 		    }
@@ -21812,17 +22090,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        }
 		        else {
 		            let completed = false;
-		            const buffers = isSafari(this.globalScope) ? undefined : [];
+		            const buffers = [];
 		            const done = task.hasCallback ? (err, data) => {
 		                completed = true;
 		                delete this.cancelCallbacks[id];
-		                this.target.postMessage({
+		                const responseMessage = {
 		                    id,
 		                    type: '<response>',
 		                    sourceMapId: this.mapId,
 		                    error: err ? serialize(err) : null,
 		                    data: serialize(data, buffers)
-		                }, buffers);
+		                };
+		                this.target.postMessage(responseMessage, { transfer: buffers });
 		            } : (_) => {
 		                completed = true;
 		            };
@@ -21832,7 +22111,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		                // task.type == 'loadTile', 'removeTile', etc.
 		                callback = this.parent[task.type](task.sourceMapId, params, done);
 		            }
-		            else if (this.parent.getWorkerSource) {
+		            else if ('getWorkerSource' in this.parent) {
 		                // task.type == sourcetype.method
 		                const keys = task.type.split('.');
 		                const scope = this.parent.getWorkerSource(task.sourceMapId, keys[0], params.source);
@@ -22332,29 +22611,45 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		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
@@ -22389,26 +22684,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    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));
@@ -23107,10 +23394,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		                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);
@@ -23454,7 +23742,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        if (radialOffset < 0)
 		            radialOffset = 0; // Ignore negative offset.
 		        // solve for r where r^2 + r^2 = radialOffset^2
-		        const hypotenuse = radialOffset / Math.sqrt(2);
+		        const hypotenuse = radialOffset / Math.SQRT2;
 		        switch (anchor) {
 		            case 'top-right':
 		            case 'top-left':
@@ -24475,6 +24763,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		exports.UnwrappedTileID = UnwrappedTileID;
 		exports.ValidationError = ValidationError;
 		exports.ZoomHistory = ZoomHistory;
+		exports.__awaiter = __awaiter;
 		exports.add = add$4;
 		exports.addDynamicAttributes = addDynamicAttributes;
 		exports.arrayBufferToImage = arrayBufferToImage;
@@ -24520,6 +24809,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		exports.getAnchorJustification = getAnchorJustification;
 		exports.getArrayBuffer = getArrayBuffer;
 		exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+		exports.getImageData = getImageData;
 		exports.getJSON = getJSON;
 		exports.getOverlapMode = getOverlapMode;
 		exports.getProtocolAction = getProtocolAction;
@@ -24531,6 +24821,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		exports.interpolate = interpolate;
 		exports.invert = invert$2;
 		exports.isImageBitmap = isImageBitmap;
+		exports.isOffscreenCanvasDistorted = isOffscreenCanvasDistorted;
 		exports.isSafari = isSafari;
 		exports.isWorker = isWorker;
 		exports.keysDifference = keysDifference;
@@ -24545,6 +24836,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		exports.multiply = multiply$5;
 		exports.nextPowerOfTwo = nextPowerOfTwo;
 		exports.normalize = normalize$4;
+		exports.offscreenCanvasSupported = offscreenCanvasSupported;
 		exports.operations = operations;
 		exports.ortho = ortho;
 		exports.parseCacheControl = parseCacheControl;
@@ -24557,6 +24849,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		exports.pointGeometry = pointGeometry;
 		exports.polygonIntersectsPolygon = polygonIntersectsPolygon;
 		exports.potpack = potpack;
+		exports.readImageUsingVideoFrame = readImageUsingVideoFrame;
 		exports.register = register;
 		exports.registerForPluginStateChange = registerForPluginStateChange;
 		exports.renderColorRamp = renderColorRamp;
@@ -24871,12 +25164,27 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            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 () => {
@@ -25025,28 +25333,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        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);
-		        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);
+		        return performance.__awaiter(this, void 0, void 0, function* () {
+		            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 }, yield 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);
+		        });
 		    }
 		    removeTile(params) {
 		        const loaded = this.loaded, uid = params.uid;
@@ -26787,10 +27085,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            // note: removeAllProperties gives us a new properties object, so we can skip the clone step
 		            const cloneProperties = !update.removeAllProperties && (((_a = update.removeProperties) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = update.addOrUpdateProperties) === null || _b === void 0 ? void 0 : _b.length) > 0);
 		            if (cloneFeature || cloneProperties) {
-		                feature = { ...feature };
+		                feature = Object.assign({}, feature);
 		                updateable.set(update.id, feature);
 		                if (cloneProperties) {
-		                    feature.properties = { ...feature.properties };
+		                    feature.properties = Object.assign({}, feature.properties);
 		                }
 		            }
 		            if (update.newGeometry) {
@@ -26815,34 +27113,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    }
 		}
 
-		function loadGeoJSONTile(params, callback) {
-		    const canonical = params.tileID.canonical;
-		    if (!this._geoJSONIndex) {
-		        return callback(null, null); // we couldn't load the file
-		    }
-		    const geoJSONTile = this._geoJSONIndex.getTile(canonical.z, canonical.x, canonical.y);
-		    if (!geoJSONTile) {
-		        return callback(null, null); // nothing in the given tile
-		    }
-		    const geojsonWrapper = new GeoJSONWrapper$2(geoJSONTile.features);
-		    // 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);
-		    if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
-		        // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
-		        pbf = new Uint8Array(pbf);
-		    }
-		    callback(null, {
-		        vectorTile: geojsonWrapper,
-		        rawData: pbf.buffer
-		    });
-		}
 		/**
 		 * The {@link WorkerSource} implementation that supports {@link GeoJSONSource}.
 		 * This class is designed to be easily reused to support custom source types
 		 * for data formats that can be parsed/converted into an in-memory GeoJSON
-		 * representation.  To do so, create it with
+		 * representation. To do so, create it with
 		 * `new GeoJSONWorkerSource(actor, layerIndex, customLoadGeoJSONFunction)`.
 		 * For a full example, see [mapbox-gl-topojson](https://github.com/developmentseed/mapbox-gl-topojson).
 		 */
@@ -26853,7 +27128,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		     * See {@link GeoJSONWorkerSource#loadGeoJSON}.
 		     */
 		    constructor(actor, layerIndex, availableImages, loadGeoJSON) {
-		        super(actor, layerIndex, availableImages, loadGeoJSONTile);
+		        super(actor, layerIndex, availableImages);
 		        this._dataUpdateable = new Map();
 		        /**
 		         * Fetch and parse GeoJSON according to the given params.  Calls `callback`
@@ -26902,10 +27177,34 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            }
 		            return { cancel: () => { } };
 		        };
+		        this.loadVectorData = this.loadGeoJSONTile;
 		        if (loadGeoJSON) {
 		            this.loadGeoJSON = loadGeoJSON;
 		        }
 		    }
+		    loadGeoJSONTile(params, callback) {
+		        const canonical = params.tileID.canonical;
+		        if (!this._geoJSONIndex) {
+		            return callback(null, null); // we couldn't load the file
+		        }
+		        const geoJSONTile = this._geoJSONIndex.getTile(canonical.z, canonical.x, canonical.y);
+		        if (!geoJSONTile) {
+		            return callback(null, null); // nothing in the given tile
+		        }
+		        const geojsonWrapper = new GeoJSONWrapper$2(geoJSONTile.features);
+		        // 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);
+		        if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
+		            // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
+		            pbf = new Uint8Array(pbf);
+		        }
+		        callback(null, {
+		            vectorTile: geojsonWrapper,
+		            rawData: pbf.buffer
+		        });
+		    }
 		    /**
 		     * Fetches (if appropriate), parses, and index geojson data into tiles. This
 		     * preparatory method must be called before {@link GeoJSONWorkerSource#loadTile}
@@ -27187,12 +27486,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        }
 		        return layerIndexes;
 		    }
-		    getWorkerSource(mapId, type, source) {
+		    getWorkerSource(mapId, sourceType, sourceName) {
 		        if (!this.workerSources[mapId])
 		            this.workerSources[mapId] = {};
-		        if (!this.workerSources[mapId][type])
-		            this.workerSources[mapId][type] = {};
-		        if (!this.workerSources[mapId][type][source]) {
+		        if (!this.workerSources[mapId][sourceType])
+		            this.workerSources[mapId][sourceType] = {};
+		        if (!this.workerSources[mapId][sourceType][sourceName]) {
 		            // use a wrapped actor so that we can attach a target mapId param
 		            // to any messages invoked by the WorkerSource
 		            const actor = {
@@ -27200,9 +27499,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		                    this.actor.send(type, data, callback, mapId);
 		                }
 		            };
-		            this.workerSources[mapId][type][source] = new this.workerSourceTypes[type](actor, this.getLayerIndex(mapId), this.getAvailableImages(mapId));
+		            this.workerSources[mapId][sourceType][sourceName] = new this.workerSourceTypes[sourceType](actor, this.getLayerIndex(mapId), this.getAvailableImages(mapId));
 		        }
-		        return this.workerSources[mapId][type][source];
+		        return this.workerSources[mapId][sourceType][sourceName];
 		    }
 		    getDEMWorkerSource(mapId, source) {
 		        if (!this.demWorkerSources[mapId])
@@ -27224,7 +27523,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		define(['./shared'], (function (performance) {
 		var name = "azuremaps-maplibre-gl";
 		var description = "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library";
-		var version$2 = "3.3.0";
+		var version$2 = "3.6.1";
 		var main = "dist/azuremaps-maplibre-gl.js";
 		var style = "dist/azuremaps-maplibre-gl.css";
 		var license = "BSD-3-Clause";
@@ -27243,12 +27542,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 			"@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",
-			"@types/mapbox__point-geometry": "^0.1.2",
-			"@types/mapbox__vector-tile": "^1.3.0",
-			"@types/pbf": "^3.0.2",
-			"@types/supercluster": "^7.1.0",
+			"@maplibre/maplibre-gl-style-spec": "^19.3.3",
+			"@types/geojson": "^7946.0.13",
+			"@types/mapbox__point-geometry": "^0.1.4",
+			"@types/mapbox__vector-tile": "^1.3.3",
+			"@types/pbf": "^3.0.4",
+			"@types/supercluster": "^7.1.3",
 			earcut: "^2.2.4",
 			"geojson-vt": "^3.2.1",
 			"gl-matrix": "^3.4.3",
@@ -27265,94 +27564,94 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		var devDependencies = {
 			"@mapbox/mapbox-gl-rtl-text": "^0.2.3",
 			"@mapbox/mvt-fixtures": "^3.10.0",
-			"@rollup/plugin-commonjs": "^25.0.3",
-			"@rollup/plugin-json": "^6.0.0",
-			"@rollup/plugin-node-resolve": "^15.1.0",
-			"@rollup/plugin-replace": "^5.0.2",
-			"@rollup/plugin-strip": "^3.0.2",
-			"@rollup/plugin-terser": "^0.4.3",
-			"@rollup/plugin-typescript": "^11.1.2",
-			"@types/benchmark": "^2.1.2",
+			"@rollup/plugin-commonjs": "^25.0.7",
+			"@rollup/plugin-json": "^6.0.1",
+			"@rollup/plugin-node-resolve": "^15.2.3",
+			"@rollup/plugin-replace": "^5.0.5",
+			"@rollup/plugin-strip": "^3.0.4",
+			"@rollup/plugin-terser": "^0.4.4",
+			"@rollup/plugin-typescript": "^11.1.5",
+			"@types/benchmark": "^2.1.5",
 			"@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.2",
+			"@types/diff": "^5.0.8",
+			"@types/earcut": "^2.1.4",
+			"@types/eslint": "^8.44.7",
+			"@types/geojson-vt": "3.2.4",
+			"@types/gl": "^6.0.4",
 			"@types/glob": "^8.1.0",
-			"@types/jest": "^29.5.3",
-			"@types/jsdom": "^21.1.1",
-			"@types/minimist": "^1.2.2",
-			"@types/murmurhash-js": "^1.0.4",
-			"@types/nise": "^1.4.1",
-			"@types/node": "^20.4.8",
-			"@types/offscreencanvas": "^2019.7.0",
-			"@types/pixelmatch": "^5.2.4",
-			"@types/pngjs": "^6.0.1",
-			"@types/react": "^18.2.18",
-			"@types/react-dom": "^18.2.7",
-			"@types/request": "^2.48.8",
-			"@types/shuffle-seed": "^1.1.0",
-			"@types/window-or-global": "^1.0.4",
-			"@typescript-eslint/eslint-plugin": "^6.2.1",
-			"@typescript-eslint/parser": "^6.2.1",
-			address: "^1.2.2",
+			"@types/jest": "^29.5.8",
+			"@types/jsdom": "^21.1.5",
+			"@types/minimist": "^1.2.5",
+			"@types/murmurhash-js": "^1.0.5",
+			"@types/nise": "^1.4.4",
+			"@types/node": "^20.9.0",
+			"@types/offscreencanvas": "^2019.7.3",
+			"@types/pixelmatch": "^5.2.5",
+			"@types/pngjs": "^6.0.4",
+			"@types/react": "^18.2.35",
+			"@types/react-dom": "^18.2.14",
+			"@types/request": "^2.48.12",
+			"@types/shuffle-seed": "^1.1.2",
+			"@types/window-or-global": "^1.0.6",
+			"@typescript-eslint/eslint-plugin": "^6.10.0",
+			"@typescript-eslint/parser": "^6.10.0",
+			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.1179426",
+			"devtools-protocol": "^0.0.1219864",
 			diff: "^5.1.0",
-			"dts-bundle-generator": "^8.0.1",
-			eslint: "^8.46.0",
+			"dts-bundle-generator": "^8.1.2",
+			eslint: "^8.53.0",
 			"eslint-config-mourner": "^3.0.0",
 			"eslint-plugin-html": "^7.1.0",
-			"eslint-plugin-import": "^2.28.0",
-			"eslint-plugin-jest": "^27.2.3",
-			"eslint-plugin-react": "^7.33.1",
+			"eslint-plugin-import": "^2.29.0",
+			"eslint-plugin-jest": "^27.6.0",
+			"eslint-plugin-react": "^7.33.2",
 			"eslint-plugin-tsdoc": "0.2.17",
-			expect: "^29.6.2",
+			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: "^29.7.0",
 			"jest-canvas-mock": "^2.5.2",
-			"jest-environment-jsdom": "^29.6.2",
+			"jest-environment-jsdom": "^29.7.0",
 			jsdom: "^22.1.0",
 			"json-stringify-pretty-compact": "^4.0.0",
 			minimist: "^1.2.8",
 			"mock-geolocation": "^1.0.11",
-			nise: "^5.1.4",
-			"node-plantuml": "^0.9.0",
+			nise: "^5.1.5",
 			"npm-font-open-sans": "^1.1.0",
 			"npm-run-all": "^4.1.5",
 			"pdf-merger-js": "^4.3.0",
 			pixelmatch: "^5.3.0",
 			pngjs: "^7.0.0",
-			postcss: "^8.4.27",
+			postcss: "^8.4.31",
 			"postcss-cli": "^10.1.0",
 			"postcss-inline-svg": "^6.0.0",
 			"pretty-bytes": "^6.1.1",
-			puppeteer: "^21.0.1",
+			puppeteer: "^21.5.1",
 			react: "^18.2.0",
 			"react-dom": "^18.2.0",
-			rollup: "^3.27.2",
+			rollup: "^4.4.0",
 			"rollup-plugin-sourcemaps": "^0.6.3",
 			rw: "^1.3.3",
 			semver: "^7.5.4",
 			"shuffle-seed": "^1.1.6",
 			"source-map-explorer": "^2.5.3",
 			st: "^3.0.0",
-			stylelint: "^15.10.2",
+			stylelint: "^15.11.0",
 			"stylelint-config-standard": "^34.0.0",
 			"ts-jest": "^29.1.1",
 			"ts-node": "^10.9.1",
-			tslib: "^2.6.1",
-			typedoc: "^0.24.8",
-			"typedoc-plugin-markdown": "^3.15.4",
-			"typedoc-plugin-missing-exports": "^2.0.1",
-			typescript: "^5.1.6"
+			tslib: "^2.6.2",
+			typedoc: "^0.25.3",
+			"typedoc-plugin-markdown": "^3.17.1",
+			"typedoc-plugin-missing-exports": "^2.1.0",
+			typescript: "^5.2.2"
 		};
 		var overrides = {
 			"postcss-inline-svg": {
@@ -27378,11 +27677,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 			"build-csp": "rollup --configPlugin @rollup/plugin-typescript -c rollup.config.csp.ts",
 			"build-csp-dev": "rollup --configPlugin @rollup/plugin-typescript -c rollup.config.csp.ts --environment BUILD:dev",
 			"build-css": "postcss -o dist/azuremaps-maplibre-gl.css src/css/azuremaps-maplibre-gl.css",
-			"build-diagrams": "cd docs/diagrams; ls *.plantuml | xargs -I {} puml generate --svg {} -o {}.svg",
 			"watch-css": "postcss --watch -o dist/azuremaps-maplibre-gl.css src/css/azuremaps-maplibre-gl.css",
 			"build-benchmarks": "npm run build-dev && rollup --configPlugin @rollup/plugin-typescript -c test/bench/rollup_config_benchmarks.ts",
 			"watch-benchmarks": "rollup --configPlugin @rollup/plugin-typescript -c test/bench/rollup_config_benchmarks.ts --watch",
 			"start-server": "st --no-cache -H 0.0.0.0 --port 9966 .",
+			"start-docs": "docker run --rm -it -p 8000:8000 -v ${PWD}:/docs squidfunk/mkdocs-material",
 			start: "run-p watch-css watch-dev start-server",
 			"start-bench": "run-p watch-css watch-benchmarks start-server",
 			lint: "eslint --cache --ext .ts,.tsx,.js,.html --ignore-path .gitignore .",
@@ -28554,6 +28853,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        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';
@@ -28567,9 +28869,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		                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
@@ -28589,16 +28891,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		         * 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
 		            }
 		        };
 		    }
@@ -28856,7 +29160,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        const workers = this.workerPool.acquire(mapId);
 		        for (let i = 0; i < workers.length; i++) {
 		            const worker = workers[i];
-		            const actor = new Dispatcher.Actor(worker, parent, mapId);
+		            const actor = new performance.Actor(worker, parent, mapId);
 		            actor.name = `Worker ${i}`;
 		            this.actors.push(actor);
 		        }
@@ -28887,7 +29191,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            this.workerPool.release(this.id);
 		    }
 		}
-		Dispatcher.Actor = performance.Actor;
 
 		function loadTileJson(options, requestManager, callback) {
 		    const loaded = function (err, tileJSON) {
@@ -29258,7 +29561,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		 * map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);
 		 * ```
 		 * @see [Add a vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/vector-source/)
-		 * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/third-party/)
 		 */
 		class VectorTileSource extends performance.Evented {
 		    constructor(id, options, dispatcher, eventedParent) {
@@ -29428,7 +29730,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		 * ```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,
 		 * });
 		 * ```
@@ -29498,6 +29800,25 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            this._tileJSONRequest = null;
 		        }
 		    }
+		    setSourceProperty(callback) {
+		        if (this._tileJSONRequest) {
+		            this._tileJSONRequest.cancel();
+		        }
+		        callback();
+		        this.load();
+		    }
+		    /**
+		     * Sets the source `tiles` property and re-renders the map.
+		     *
+		     * @param tiles - An array of one or more tile source URLs, as in the raster tiles spec (See the [Style Specification](https://maplibre.org/maplibre-style-spec/)
+		     * @returns `this`
+		     */
+		    setTiles(tiles) {
+		        this.setSourceProperty(() => {
+		            this._options.tiles = tiles;
+		        });
+		        return this;
+		    }
 		    serialize() {
 		        return performance.extend({}, this._options);
 		    }
@@ -29554,16 +29875,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		    }
 		}
 
-		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
@@ -29587,12 +29898,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        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, (err, img, expiry) => performance.__awaiter(this, void 0, void 0, function* () {
 		            delete tile.request;
 		            if (tile.aborted) {
 		                tile.state = 'unloaded';
@@ -29604,23 +29919,40 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            }
 		            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 : yield 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);
+		        function readImageNow(img) {
+		            return performance.__awaiter(this, void 0, void 0, function* () {
+		                if (typeof VideoFrame !== 'undefined' && performance.isOffscreenCanvasDistorted()) {
+		                    const width = img.width + 2;
+		                    const height = img.height + 2;
+		                    try {
+		                        return new performance.RGBAImage({ width, height }, yield 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) {
@@ -29954,8 +30286,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		                performance.extend(data, { resourceTiming });
 		            // although GeoJSON sources contain no metadata, we fire this event to let the SourceCache
 		            // know its ok to start requesting tiles.
-		            this.fire(new performance.Event('data', { ...data, sourceDataType: 'metadata' }));
-		            this.fire(new performance.Event('data', { ...data, sourceDataType: 'content' }));
+		            this.fire(new performance.Event('data', Object.assign(Object.assign({}, data), { sourceDataType: 'metadata' })));
+		            this.fire(new performance.Event('data', Object.assign(Object.assign({}, data), { sourceDataType: 'content' })));
 		        });
 		    }
 		    loaded() {
@@ -30288,6 +30620,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		 * map.removeSource('some id');  // remove
 		 * ```
 		 * @see [Add a video](https://maplibre.org/maplibre-gl-js/docs/examples/video-on-a-map/)
+		 *
+		 * Note that when rendered as a raster layer, the layer's `raster-fade-duration` property will cause the video to fade in.
+		 * This happens when playback is started, paused and resumed, or when the video's coordinates are updated. To avoid this behavior,
+		 * set the layer's `raster-fade-duration` property to `0`.
 		 */
 		class VideoSource extends ImageSource {
 		    constructor(id, options, dispatcher, eventedParent) {
@@ -34837,6 +35173,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        this._load(empty, { validate: false });
 		    }
 		    _load(json, options, previousStyle) {
+		        var _a;
 		        const nextState = options.transformStyle ? options.transformStyle(previousStyle, json) : json;
 		        if (options.validate && emitValidationErrors(this, performance.validateStyle(nextState))) {
 		            return;
@@ -34855,7 +35192,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        this.glyphManager.setURL(nextState.glyphs);
 		        this._createLayers();
 		        this.light = new Light(this.stylesheet.light);
-		        this.map.setTerrain(this.stylesheet.terrain);
+		        this.map.setTerrain((_a = this.stylesheet.terrain) !== null && _a !== void 0 ? _a : null);
 		        this.fire(new performance.Event('data', { dataType: 'style' }));
 		        this.fire(new performance.Event('style.load'));
 		    }
@@ -35147,6 +35484,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            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) {
@@ -35273,7 +35612,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            layer = performance.createStyleLayer(layerObject);
 		        }
 		        else {
-		            if (typeof layerObject.source === 'object') {
+		            if ('source' in layerObject && typeof layerObject.source === 'object') {
 		                this.addSource(id, layerObject.source);
 		                layerObject = performance.clone$1(layerObject);
 		                layerObject = performance.extend(layerObject, { source: id });
@@ -35384,7 +35723,15 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		        return this._layers[id];
 		    }
 		    /**
-		     * checks if a specific layer is present within the style.
+		     * Return the ids of all layers currently in the style, including custom layers, in order.
+		     *
+		     * @returns ids of layers, in order
+		     */
+		    getLayersOrder() {
+		        return [...this._order];
+		    }
+		    /**
+		     * Checks if a specific layer is present within the style.
 		     *
 		     * @param id - the id of the desired layer
 		     * @returns a boolean specifying if the given layer is present
@@ -35557,6 +35904,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            return;
 		        const sources = performance.mapObject(this.sourceCaches, (source) => source.serialize());
 		        const layers = this._serializeByIds(this._order);
+		        const terrain = this.map.getTerrain() || undefined;
 		        const myStyleSheet = this.stylesheet;
 		        return performance.filterObject({
 		            version: myStyleSheet.version,
@@ -35571,7 +35919,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		            glyphs: myStyleSheet.glyphs,
 		            transition: myStyleSheet.transition,
 		            sources,
-		            layers
+		            layers,
+		            terrain
 		        }, (value) => { return value !== undefined; });
 		    }
 		    _updateLayer(layer) {
@@ -36474,6 +36823,9 @@ uniform ${precision} ${type} u_${name};
 		        }
 		        gl.shaderSource(fragmentShader, fragmentSource);
 		        gl.compileShader(fragmentShader);
+		        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+		            throw new Error(`Could not compile fragment shader: ${gl.getShaderInfoLog(fragmentShader)}`);
+		        }
 		        gl.attachShader(this.program, fragmentShader);
 		        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
 		        if (gl.isContextLost()) {
@@ -36482,6 +36834,9 @@ uniform ${precision} ${type} u_${name};
 		        }
 		        gl.shaderSource(vertexShader, vertexSource);
 		        gl.compileShader(vertexShader);
+		        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+		            throw new Error(`Could not compile vertex shader: ${gl.getShaderInfoLog(vertexShader)}`);
+		        }
 		        gl.attachShader(this.program, vertexShader);
 		        this.attributes = {};
 		        const uniformLocations = {};
@@ -36493,6 +36848,9 @@ uniform ${precision} ${type} u_${name};
 		            }
 		        }
 		        gl.linkProgram(this.program);
+		        if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+		            throw new Error(`Program failed to link: ${gl.getProgramInfoLog(this.program)}`);
+		        }
 		        gl.deleteShader(vertexShader);
 		        gl.deleteShader(fragmentShader);
 		        for (let it = 0; it < allUniformsInfo.length; it++) {
@@ -37296,11 +37654,12 @@ uniform ${precision} ${type} u_${name};
 
 		const cache = new WeakMap();
 		function isWebGL2(gl) {
+		    var _a;
 		    if (cache.has(gl)) {
 		        return cache.get(gl);
 		    }
 		    else {
-		        const value = gl.getParameter(gl.VERSION).startsWith('WebGL 2.0');
+		        const value = (_a = gl.getParameter(gl.VERSION)) === null || _a === void 0 ? void 0 : _a.startsWith('WebGL 2.0');
 		        cache.set(gl, value);
 		        return value;
 		    }
@@ -40732,16 +41091,20 @@ uniform ${precision} ${type} u_${name};
 		function throttle(fn, time) {
 		    let pending = false;
 		    let timerId = null;
+		    let lastCallContext = null;
+		    let lastCallArgs;
 		    const later = () => {
 		        timerId = null;
 		        if (pending) {
-		            fn();
+		            fn.apply(lastCallContext, lastCallArgs);
 		            timerId = setTimeout(later, time);
 		            pending = false;
 		        }
 		    };
-		    return () => {
+		    return (...args) => {
 		        pending = true;
+		        lastCallContext = this;
+		        lastCallArgs = args;
 		        if (!timerId) {
 		            later();
 		        }
@@ -42548,6 +42911,12 @@ uniform ${precision} ${type} u_${name};
 		    }
 		    reset() {
 		        this._active = false;
+		        this._zooming = false;
+		        delete this._targetZoom;
+		        if (this._finishTimeout) {
+		            clearTimeout(this._finishTimeout);
+		            delete this._finishTimeout;
+		        }
 		    }
 		}
 
@@ -43327,7 +43696,7 @@ uniform ${precision} ${type} u_${name};
 		            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;
 		                }
@@ -43368,7 +43737,8 @@ uniform ${precision} ${type} u_${name};
 		        this._renderFrameCallback = () => {
 		            const t = Math.min((performance.browser.now() - this._easeStart) / this._easeOptions.duration, 1);
 		            this._onEaseFrame(this._easeOptions.easing(t));
-		            if (t < 1) {
+		            // if _stop is called during _onEaseFrame from _fireMoveEvents we should avoid a new _requestRenderFrame, checking it by ensuring _easeFrameId was not deleted
+		            if (t < 1 && this._easeFrameId) {
 		                this._easeFrameId = this._requestRenderFrame(this._renderFrameCallback);
 		            }
 		            else {
@@ -45555,14 +45925,17 @@ uniform ${precision} ${type} u_${name};
 		        if (typeof window !== 'undefined') {
 		            addEventListener('online', this._onWindowOnline, false);
 		            let initialResizeEventCaptured = false;
+		            const throttledResizeCallback = throttle((entries) => {
+		                if (this._trackResize && !this._removed) {
+		                    this.resize(entries)._update();
+		                }
+		            }, 50);
 		            this._resizeObserver = new ResizeObserver((entries) => {
 		                if (!initialResizeEventCaptured) {
 		                    initialResizeEventCaptured = true;
 		                    return;
 		                }
-		                if (this._trackResize) {
-		                    this.resize(entries)._update();
-		                }
+		                throttledResizeCallback(entries);
 		            });
 		            this._resizeObserver.observe(this._container);
 		        }
@@ -45764,7 +46137,6 @@ uniform ${precision} ${type} u_${name};
 		     * @internal
 		     * Return the map's pixel ratio eventually scaled down to respect maxCanvasSize.
 		     * Internally you should use this and not getPixelRatio().
-		     * @hidden
 		     */
 		    _getClampedPixelRatio(width, height) {
 		        const { 0: maxCanvasWidth, 1: maxCanvasHeight } = this._maxCanvasSize;
@@ -46655,7 +47027,8 @@ uniform ${precision} ${type} u_${name};
 		     * ```
 		     */
 		    getTerrain() {
-		        return this.terrain && this.terrain.options;
+		        var _a, _b;
+		        return (_b = (_a = this.terrain) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : null;
 		    }
 		    /**
 		     * Returns a Boolean indicating whether all tiles in the viewport from all sources on
@@ -46945,7 +47318,7 @@ uniform ${precision} ${type} u_${name};
 		     *
 		     * @param layer - The layer to add,
 		     * conforming to either the MapLibre Style Specification's [layer definition](https://maplibre.org/maplibre-style-spec/layers) or,
-		     * less commonly, the {@link CustomLayerInterface} specification.
+		     * less commonly, the {@link CustomLayerInterface} specification. Can also be a layer definition with an embedded source definition.
 		     * The MapLibre Style Specification's layer definition is appropriate for most layers.
 		     *
 		     * @param beforeId - The ID of an existing layer to insert the new layer before,
@@ -47074,6 +47447,19 @@ uniform ${precision} ${type} u_${name};
 		    getLayer(id) {
 		        return this.style.getLayer(id);
 		    }
+		    /**
+		     * Return the ids of all layers currently in the style, including custom layers, in order.
+		     *
+		     * @returns ids of layers, in order
+		     *
+		     * @example
+		     * ```ts
+		     * const orderedLayerIds = map.getLayersOrder();
+		     * ```
+		     */
+		    getLayersOrder() {
+		        return this.style.getLayersOrder();
+		    }
 		    /**
 		     * Sets the zoom extent for the specified style layer. The zoom extent includes the
 		     * [minimum zoom level](https://maplibre.org/maplibre-style-spec/layers/#minzoom)
@@ -47153,6 +47539,7 @@ uniform ${precision} ${type} u_${name};
 		     * @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
@@ -47949,7 +48336,6 @@ uniform ${precision} ${type} u_${name};
 		 * map.addControl(nav, 'top-left');
 		 * ```
 		 * @see [Display map navigation controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigation/)
-		 * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/third-party/)
 		 */
 		class NavigationControl {
 		    /**
@@ -48311,6 +48697,10 @@ uniform ${precision} ${type} u_${name};
 		        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);
 		            }
@@ -48534,6 +48924,7 @@ uniform ${precision} ${type} u_${name};
 		        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
@@ -48649,7 +49040,7 @@ uniform ${precision} ${type} u_${name};
 		            if (!('offset' in popup.options)) {
 		                const markerHeight = 41 - (5.8 / 2);
 		                const markerRadius = 13.5;
-		                const linearOffset = Math.sqrt(Math.pow(markerRadius, 2) / 2);
+		                const linearOffset = Math.abs(markerRadius) / Math.SQRT2;
 		                popup.options.offset = this._defaultMarker ? {
 		                    'top': [0, 0],
 		                    'top-left': [0, 0],
@@ -50222,7 +50613,7 @@ uniform ${precision} ${type} u_${name};
 		    }
 		    else if (typeof offset === 'number') {
 		        // input specifies a radius from which to calculate offsets at all positions
-		        const cornerOffset = Math.round(Math.sqrt(0.5 * Math.pow(offset, 2)));
+		        const cornerOffset = Math.round(Math.abs(offset) / Math.SQRT2);
 		        return {
 		            'center': new performance.Point(0, 0),
 		            'top': new performance.Point(0, offset),
@@ -50531,7 +50922,7 @@ uniform ${precision} ${type} u_${name};
 		sessionIdHeaderName: "Session-Id"
 	};
 
-	var __values$l = (window && window.__values) || function(o) {
+	var __values$k = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -50559,7 +50950,7 @@ uniform ${precision} ${type} u_${name};
 	        }
 	        var defaults;
 	        try {
-	            for (var valuesList_1 = __values$l(valuesList), valuesList_1_1 = valuesList_1.next(); !valuesList_1_1.done; valuesList_1_1 = valuesList_1.next()) {
+	            for (var valuesList_1 = __values$k(valuesList), valuesList_1_1 = valuesList_1.next(); !valuesList_1_1.done; valuesList_1_1 = valuesList_1.next()) {
 	                var values = valuesList_1_1.value;
 	                if (!values) {
 	                    continue;
@@ -50599,7 +50990,7 @@ uniform ${precision} ${type} u_${name};
 	    return Options;
 	}());
 
-	var __extends$1f = (window && window.__extends) || (function () {
+	var __extends$1g = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -50614,7 +51005,7 @@ uniform ${precision} ${type} u_${name};
 	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 	    };
 	})();
-	var __read$e = (window && window.__read) || function (o, n) {
+	var __read$d = (window && window.__read) || function (o, n) {
 	    var m = typeof Symbol === "function" && o[Symbol.iterator];
 	    if (!m) return o;
 	    var i = m.call(o), r, ar = [], e;
@@ -50634,7 +51025,7 @@ uniform ${precision} ${type} u_${name};
 	 * @private
 	 */
 	var UrlOptions = /** @class */ (function (_super) {
-	    __extends$1f(UrlOptions, _super);
+	    __extends$1g(UrlOptions, _super);
 	    function UrlOptions() {
 	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        _this.domain = undefined;
@@ -50674,7 +51065,7 @@ uniform ${precision} ${type} u_${name};
 	        var self = this;
 	        var queryParamsString = Object.entries(self.options.queryParams)
 	            .map(function (_a) {
-	            var _b = __read$e(_a, 2), key = _b[0], value = _b[1];
+	            var _b = __read$d(_a, 2), key = _b[0], value = _b[1];
 	            return "".concat(key, "=").concat(value);
 	        })
 	            .join("&");
@@ -50705,7 +51096,7 @@ uniform ${precision} ${type} u_${name};
 	    return Url;
 	}());
 
-	var version = "3.0.2";
+	var version = "3.1.0";
 
 	/**
 	 * A helper class that provides methods for getting various forms of the map controls current version.
@@ -50815,7 +51206,7 @@ uniform ${precision} ${type} u_${name};
 	    eventTarget.addEventListener("keydown", dismissTooltip);
 	};
 
-	var __extends$1e = (window && window.__extends) || (function () {
+	var __extends$1f = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -50865,7 +51256,7 @@ uniform ${precision} ${type} u_${name};
 	 * The options for adding a control to the map.
 	 */
 	var ControlOptions = /** @class */ (function (_super) {
-	    __extends$1e(ControlOptions, _super);
+	    __extends$1f(ControlOptions, _super);
 	    function ControlOptions() {
 	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        /**
@@ -51009,7 +51400,7 @@ uniform ${precision} ${type} u_${name};
 		EventEmitter: EventEmitter
 	});
 
-	var __extends$1d = (window && window.__extends) || (function () {
+	var __extends$1e = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -51029,7 +51420,7 @@ uniform ${precision} ${type} u_${name};
 	 * Implements control interface and provides support for automatic styling based on the map style.
 	 */
 	var ControlBase = /** @class */ (function (_super) {
-	    __extends$1d(ControlBase, _super);
+	    __extends$1e(ControlBase, _super);
 	    function ControlBase() {
 	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        /**
@@ -51131,7 +51522,7 @@ uniform ${precision} ${type} u_${name};
 	    return ControlBase;
 	}(EventEmitter));
 
-	var __extends$1c = (window && window.__extends) || (function () {
+	var __extends$1d = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -51150,7 +51541,7 @@ uniform ${precision} ${type} u_${name};
 	 * The options for a CompassControl object.
 	 */
 	var CompassControlOptions = /** @class */ (function (_super) {
-	    __extends$1c(CompassControlOptions, _super);
+	    __extends$1d(CompassControlOptions, _super);
 	    function CompassControlOptions() {
 	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        /**
@@ -51175,7 +51566,7 @@ uniform ${precision} ${type} u_${name};
 	    return CompassControlOptions;
 	}(Options));
 
-	var __extends$1b = (window && window.__extends) || (function () {
+	var __extends$1c = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -51194,7 +51585,7 @@ uniform ${precision} ${type} u_${name};
 	 * A control for changing the rotation of the map.
 	 */
 	var CompassControl = /** @class */ (function (_super) {
-	    __extends$1b(CompassControl, _super);
+	    __extends$1c(CompassControl, _super);
 	    /**
 	     * Constructs a CompassControl.
 	     * @param options The options for the control.
@@ -51257,6 +51648,16 @@ uniform ${precision} ${type} u_${name};
 	                grid.classList.add("hidden-accessible-element");
 	            }
 	        });
+	        // Dismiss the grid when esc key is pressed on the reset button and the tooltip is not visible
+	        rotationButton.addEventListener("keydown", function (event) {
+	            if ((event.key === "Escape" || event.key === "Esc") &&
+	                (container === null || container === void 0 ? void 0 : container.classList.contains("in-use")) &&
+	                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.style.display) === "none") {
+	                event.stopPropagation();
+	                container.classList.remove("in-use");
+	                grid.classList.add("hidden-accessible-element");
+	            }
+	        });
 	        // If the control's position will require inverting the element order
 	        // add them in the opposite order to preserve tabindex.
 	        if (options && CompassControl.InvertOrderPositions.includes(options.position)) {
@@ -51362,7 +51763,7 @@ uniform ${precision} ${type} u_${name};
 	    return CompassControl;
 	}(ControlBase));
 
-	var __extends$1a = (window && window.__extends) || (function () {
+	var __extends$1b = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -51381,7 +51782,7 @@ uniform ${precision} ${type} u_${name};
 	 * The options for a PitchControl object.
 	 */
 	var PitchControlOptions = /** @class */ (function (_super) {
-	    __extends$1a(PitchControlOptions, _super);
+	    __extends$1b(PitchControlOptions, _super);
 	    function PitchControlOptions() {
 	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        /**
@@ -51406,7 +51807,7 @@ uniform ${precision} ${type} u_${name};
 	    return PitchControlOptions;
 	}(Options));
 
-	var __extends$19 = (window && window.__extends) || (function () {
+	var __extends$1a = (window && window.__extends) || (function () {
 	    var extendStatics = function (d, b) {
 	        extendStatics = Object.setPrototypeOf ||
 	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -51425,7 +51826,7 @@ uniform ${precision} ${type} u_${name};
 	 * A control for changing the pitch of the map.
 	 */
 	var PitchControl = /** @class */ (function (_super) {
-	    __extends$19(PitchControl, _super);
+	    __extends$1a(PitchControl, _super);
 	    /**
 	     * Constructs a PitchControl.
 	     * @param options The options for the control.
@@ -51518,6 +51919,16 @@ uniform ${precision} ${type} u_${name};
 	                grid.classList.add("hidden-accessible-element");
 	            }
 	        });
+	        // Dismiss the grid when esc key is pressed on the reset button and the tooltip is not visible
+	        pitchButton.addEventListener("keydown", function (event) {
+	            if ((event.key === "Escape" || event.key === "Esc") &&
+	                (container === null || container === void 0 ? void 0 : container.classList.contains("in-use")) &&
+	                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.style.display) === "none") {
+	                event.stopPropagation();
+	                container.classList.remove("in-use");
+	                grid.classList.add("hidden-accessible-element");
+	            }
+	        });
 	        // If the control's position will require inverting the element order
 	        // add them in the opposite order to preserve tabindex.
 	        if (options && PitchControl.INVERT_ORDER_POSITIONS.includes(options.position)) {
@@ -51636,6 +52047,74 @@ uniform ${precision} ${type} u_${name};
 	    return PitchControl;
 	}(ControlBase));
 
+	var __extends$19 = (window && window.__extends) || (function () {
+	    var extendStatics = function (d, b) {
+	        extendStatics = Object.setPrototypeOf ||
+	            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+	            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+	        return extendStatics(d, b);
+	    };
+	    return function (d, b) {
+	        if (typeof b !== "function" && b !== null)
+	            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+	        extendStatics(d, b);
+	        function __() { this.constructor = d; }
+	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+	    };
+	})();
+	/**
+	 * A control to display a scale bar on the map.
+	 */
+	var ScaleControl = /** @class */ (function (_super) {
+	    __extends$19(ScaleControl, _super);
+	    /**
+	     * A control to displays a scale bar relative to the pixel resolution at the center of the map.
+	     * @param options Options for defining how the control is rendered and functions.
+	     */
+	    function ScaleControl(options) {
+	        var _this = _super.call(this) || this;
+	        _this.map = null;
+	        _this.control = new maplibregl.ScaleControl({
+	            maxWidth: options === null || options === void 0 ? void 0 : options.maxWidth,
+	            unit: options === null || options === void 0 ? void 0 : options.unit
+	        });
+	        return _this;
+	    }
+	    /**
+	     * Initialization method for the control which is called when added to the map.
+	     * @param map The map that the control will be added to.
+	     * @param options The ControlOptions for this control.
+	     * @return An HTMLElement to be placed on the map for the control.
+	     */
+	    ScaleControl.prototype.onAdd = function (map, options) {
+	        var _a, _b, _c;
+	        this.map = map;
+	        (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a._getMap()) === null || _b === void 0 ? void 0 : _b.addControl(this.control);
+	        var container = this.buildContainer(map, exports.ControlStyle.auto, "Scale Bar");
+	        container.appendChild((_c = this.control) === null || _c === void 0 ? void 0 : _c._container);
+	        return container;
+	    };
+	    /**
+	     * Method that is called when the control is removed from the map. Should perform any necessary cleanup for the
+	     * control.
+	     */
+	    ScaleControl.prototype.onRemove = function () {
+	        var _a, _b;
+	        _super.prototype.onRemove.call(this);
+	        (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a._getMap()) === null || _b === void 0 ? void 0 : _b.removeControl(this.control);
+	        this.map = null;
+	    };
+	    /**
+	     * Set the scale's unit of the distance
+	     * @param unit - Unit of the distance (`"imperial"`, `"metric"` or `"nautical"`).
+	     */
+	    ScaleControl.prototype.setUnit = function (unit) {
+	        var _a;
+	        (_a = this.control) === null || _a === void 0 ? void 0 : _a.setUnit(unit);
+	    };
+	    return ScaleControl;
+	}(ControlBase));
+
 	/**
 	 * Removes all key-value entries from the list cache.
 	 *
@@ -55220,7 +55699,7 @@ uniform ${precision} ${type} u_${name};
 	        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
 	    }
 	};
-	var __read$d = (window && window.__read) || function (o, n) {
+	var __read$c = (window && window.__read) || function (o, n) {
 	    var m = typeof Symbol === "function" && o[Symbol.iterator];
 	    if (!m) return o;
 	    var i = m.call(o), r, ar = [], e;
@@ -55401,7 +55880,7 @@ uniform ${precision} ${type} u_${name};
 	                image_1.src = newSrc;
 	            }
 	            Object.entries(this.styleButtons).forEach(function (_a) {
-	                var _b = __read$d(_a, 2), buttonStyleName = _b[0], button = _b[1];
+	                var _b = __read$c(_a, 2), buttonStyleName = _b[0], button = _b[1];
 	                return button.setAttribute('aria-current', buttonStyleName === styleName ? 'true' : 'false');
 	            });
 	            this.map.styles.definitions().then(function (mapConfiguration) {
@@ -55490,7 +55969,7 @@ uniform ${precision} ${type} u_${name};
 	                    _this.map.setStyle({ style: name });
 	                }
 	                Object.entries(_this.styleButtons).forEach(function (_a) {
-	                    var _b = __read$d(_a, 2), styleName = _b[0], button = _b[1];
+	                    var _b = __read$c(_a, 2), styleName = _b[0], button = _b[1];
 	                    return button.setAttribute('aria-current', styleName === name ? 'true' : 'false');
 	                });
 	            }
@@ -55582,7 +56061,7 @@ uniform ${precision} ${type} u_${name};
 	        });
 	        var targetStyleName = this.map.getStyle().style;
 	        Object.entries(this.styleButtons).forEach(function (_a) {
-	            var _b = __read$d(_a, 2), styleName = _b[0], button = _b[1];
+	            var _b = __read$c(_a, 2), styleName = _b[0], button = _b[1];
 	            return button.setAttribute('aria-current', styleName === targetStyleName ? 'true' : 'false');
 	        });
 	    };
@@ -55843,7 +56322,7 @@ uniform ${precision} ${type} u_${name};
 	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 	    };
 	})();
-	var __values$k = (window && window.__values) || function(o) {
+	var __values$j = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -55914,7 +56393,7 @@ uniform ${precision} ${type} u_${name};
 	        // legend table contents
 	        var tr2 = document.createElement("tr");
 	        try {
-	            for (var _c = __values$k(this.table), _d = _c.next(); !_d.done; _d = _c.next()) {
+	            for (var _c = __values$j(this.table), _d = _c.next(); !_d.done; _d = _c.next()) {
 	                var col = _d.value;
 	                var data = document.createElement("td");
 	                if (col === "Fast" || col === "Slow") {
@@ -55927,7 +56406,7 @@ uniform ${precision} ${type} u_${name};
 	                    data.setAttribute("aria-label", "Traffic Legend");
 	                    data.setAttribute("role", "img");
 	                    try {
-	                        for (var col_1 = (e_2 = void 0, __values$k(col)), col_1_1 = col_1.next(); !col_1_1.done; col_1_1 = col_1.next()) {
+	                        for (var col_1 = (e_2 = void 0, __values$j(col)), col_1_1 = col_1.next(); !col_1_1.done; col_1_1 = col_1.next()) {
 	                            var color = col_1_1.value;
 	                            var div = document.createElement("div");
 	                            div.classList.add(color);
@@ -56863,7 +57342,7 @@ uniform ${precision} ${type} u_${name};
 	    return Point;
 	}());
 
-	var __read$c = (window && window.__read) || function (o, n) {
+	var __read$b = (window && window.__read) || function (o, n) {
 	    var m = typeof Symbol === "function" && o[Symbol.iterator];
 	    if (!m) return o;
 	    var i = m.call(o), r, ar = [], e;
@@ -56879,7 +57358,7 @@ uniform ${precision} ${type} u_${name};
 	    }
 	    return ar;
 	};
-	var __values$j = (window && window.__values) || function(o) {
+	var __values$i = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -57854,8 +58333,8 @@ uniform ${precision} ${type} u_${name};
 	        if (k + 1 >= coords.length) {
 	            continue;
 	        }
-	        var _a = __read$c(coords[k], 2), lon1 = _a[0], lat1 = _a[1];
-	        var _b = __read$c(coords[k + 1], 2), lon2 = _b[0], lat2 = _b[1];
+	        var _a = __read$b(coords[k], 2), lon1 = _a[0], lat1 = _a[1];
+	        var _b = __read$b(coords[k + 1], 2), lon2 = _b[0], lat2 = _b[1];
 	        // split the line by antimeridian
 	        // and break geodesic into two line segments
 	        if (Math.abs(lon2 - lon1) > 180.0) {
@@ -57926,8 +58405,8 @@ uniform ${precision} ${type} u_${name};
 	            if (k + 1 >= geodesic.length) {
 	                continue;
 	            }
-	            var _a = __read$c(geodesic[k], 2), lon1 = _a[0], lat1 = _a[1];
-	            var _b = __read$c(geodesic[k + 1], 2), lon2 = _b[0], lat2 = _b[1];
+	            var _a = __read$b(geodesic[k], 2), lon1 = _a[0], lat1 = _a[1];
+	            var _b = __read$b(geodesic[k + 1], 2), lon2 = _b[0], lat2 = _b[1];
 	            // split the line by antimeridian
 	            // and break geodesic into two line segments
 	            if (Math.abs(lon2 - lon1) > 180.0) {
@@ -58138,7 +58617,7 @@ uniform ${precision} ${type} u_${name};
 	function getPixelHeading(origin, destination) {
 	    origin = getPosition(origin);
 	    destination = getPosition(destination);
-	    var _a = __read$c(mercatorPositionsToPixels([origin, destination], 21), 2), p1 = _a[0], p2 = _a[1];
+	    var _a = __read$b(mercatorPositionsToPixels([origin, destination], 21), 2), p1 = _a[0], p2 = _a[1];
 	    var dx = (p2[0] - p1[0]);
 	    var dy = (p1[1] - p2[1]);
 	    var alpha = ((5 / 2 * Math.PI) - Math.atan2(dy, dx)) * INV_PI_BY_180 % 360;
@@ -58685,7 +59164,7 @@ uniform ${precision} ${type} u_${name};
 	    });
 	    var lower = [];
 	    try {
-	        for (var positions_1 = __values$j(positions), positions_1_1 = positions_1.next(); !positions_1_1.done; positions_1_1 = positions_1.next()) {
+	        for (var positions_1 = __values$i(positions), positions_1_1 = positions_1.next(); !positions_1_1.done; positions_1_1 = positions_1.next()) {
 	            var position = positions_1_1.value;
 	            while (lower.length >= 2 && _cross(lower[lower.length - 2], lower[lower.length - 1], position) <= 0) {
 	                lower.pop();
@@ -59194,7 +59673,7 @@ uniform ${precision} ${type} u_${name};
 	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 	    };
 	})();
-	var __values$i = (window && window.__values) || function(o) {
+	var __values$h = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -59281,7 +59760,7 @@ uniform ${precision} ${type} u_${name};
 	        else if (geoType === "MultiLineString") {
 	            var pos = positions;
 	            try {
-	                for (var pos_1 = __values$i(pos), pos_1_1 = pos_1.next(); !pos_1_1.done; pos_1_1 = pos_1.next()) {
+	                for (var pos_1 = __values$h(pos), pos_1_1 = pos_1.next(); !pos_1_1.done; pos_1_1 = pos_1.next()) {
 	                    var p = pos_1_1.value;
 	                    bbox = BoundingBox.merge(bbox, BoundingBox.fromPositions(p));
 	                }
@@ -59297,7 +59776,7 @@ uniform ${precision} ${type} u_${name};
 	        else if (geoType === "MultiPolygon") {
 	            var pos = positions;
 	            try {
-	                for (var pos_2 = __values$i(pos), pos_2_1 = pos_2.next(); !pos_2_1.done; pos_2_1 = pos_2.next()) {
+	                for (var pos_2 = __values$h(pos), pos_2_1 = pos_2.next(); !pos_2_1.done; pos_2_1 = pos_2.next()) {
 	                    var p1 = pos_2_1.value;
 	                    // only need to check the exterior ring of Polygon
 	                    bbox = BoundingBox.merge(bbox, BoundingBox.fromPositions(p1[0]));
@@ -59520,7 +59999,7 @@ uniform ${precision} ${type} u_${name};
 	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 	    };
 	})();
-	var __values$h = (window && window.__values) || function(o) {
+	var __values$g = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -59944,7 +60423,7 @@ uniform ${precision} ${type} u_${name};
 	        var bounds = null;
 	        if (Array.isArray(data) && data.length > 0) {
 	            try {
-	                for (var data_1 = __values$h(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
+	                for (var data_1 = __values$g(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
 	                    var datum = data_1_1.value;
 	                    tempBounds = BoundingBox.fromData(datum);
 	                    if (tempBounds != null) {
@@ -60517,7 +60996,7 @@ uniform ${precision} ${type} u_${name};
 	    return SimplifyAP_1(points, tolerance, true);
 	}
 
-	var __values$g = (window && window.__values) || function(o) {
+	var __values$f = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -60577,7 +61056,7 @@ uniform ${precision} ${type} u_${name};
 	        if (points && Array.isArray(points) && Array.isArray(points[0])) {
 	            var pos = [];
 	            try {
-	                for (var points_1 = __values$g(points), points_1_1 = points_1.next(); !points_1_1.done; points_1_1 = points_1.next()) {
+	                for (var points_1 = __values$f(points), points_1_1 = points_1.next(); !points_1_1.done; points_1_1 = points_1.next()) {
 	                    var subPoints = points_1_1.value;
 	                    pos.push(this.transform(subPoints, transformMatrix, decimals));
 	                }
@@ -60952,6 +61431,7 @@ uniform ${precision} ${type} u_${name};
 		CompassControl: CompassControl,
 		ControlBase: ControlBase,
 		PitchControl: PitchControl,
+		ScaleControl: ScaleControl,
 		StyleControl: StyleControl,
 		TrafficControl: TrafficControl,
 		TrafficLegendControl: TrafficLegendControl,
@@ -61235,7 +61715,7 @@ uniform ${precision} ${type} u_${name};
 	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 	    };
 	})();
-	var __values$f = (window && window.__values) || function(o) {
+	var __values$e = (window && window.__values) || function(o) {
 	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 	    if (m) return m.call(o);
 	    if (o && typeof o.length === "number") return {
@@ -61434,7 +61914,7 @@ uniform ${precision} ${type} u_${name};
 	        var e_1, _a;
 	        var shapes = Array.isArray(shape) ? shape : [shape];
 	        try {
-	            for (var shapes_1 = __values$f(shapes), shapes_1_1 = shapes_1.next(); !shapes_1_1.done; shapes_1_1 = shapes_1.next()) {
+	            for (var shapes_1 = __values$e(shapes), shapes_1_1 = shapes_1.next(); !shapes_1_1.done; shapes_1_1 = shapes_1.next()) {
 	                var s = shapes_1_1.value;
 	                if (typeof s === "number") {
 	                    this._removeByIndex(s);
@@ -61461,7 +61941,7 @@ uniform ${precision} ${type} u_${name};
 	        var e_2, _a;
 	        var ids = Array.isArray(id) ? id : [id];
 	        try {
-	            for (var ids_1 = __values$f(ids), ids_1_1 = ids_1.next(); !ids_1_1.done; ids_1_1 = ids_1.next()) {
+	            for (var ids_1 = __values$e(ids), ids_1_1 = ids_1.next(); !ids_1_1.done; ids_1_1 = ids_1.next()) {
 	                var i = ids_1_1.value;
 	                this._removeById(i);
 	            }
@@ -61625,7 +62105,7 @@ uniform ${precision} ${type} u_${name};
 	        data = Array.isArray(data) ? data : [data];
 	        if (typeof index !== "number") {
 	            try {
-	                for (var data_1 = __values$f(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
+	                for (var data_1 = __values$e(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
 	                    var d = data_1_1.value;
 	                    this.shapes.push(d);
 	                    this.shapesMap.set(d.getId(), this.shapes.length - 1);
@@ -61646,7 +62126,7 @@ uniform ${precision} ${type} u_${name};
 	            }
 	        }
 	        try {
-	            for (var data_2 = __values$f(data), data_2_1 = data_2.next(); !data_2_1.done; data_2_1 = data_2.next()) {
+	            for (var data_2 = __values$e(data), data_2_1 = data_2.next(); !data_2_1.done; data_2_1 = data_2.next()) {
 	                var d = data_2_1.value;
 	                d._setDataSource(this);
 	            }
@@ -62589,7 +63069,7 @@ uniform ${precision} ${type} u_${name};
 	        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
 	    }
 	};
-	var __read$b = (window && window.__read) || function (o, n) {
+	var __read$a = (window && window.__read) || function (o, n) {
 	    var m = typeof Symbol === "function" && o[Symbol.iterator];
 	    if (!m) return o;
 	    var i = m.call(o), r, ar = [], e;
@@ -62605,7 +63085,7 @@ uniform ${precision} ${type} u_${name};
 	    }
 	    return ar;
 	};
-	var __spreadArray$9 = (window && window.__spreadArray) || function (to, from, pack) {
+	var __spreadArray$8 = (window && window.__spreadArray) || function (to, from, pack) {
 	    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
 	        if (ar || !(i in from)) {
 	            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -62642,7 +63122,7 @@ uniform ${precision} ${type} u_${name};
 	                    var bubbleFeature = curRenderedShape instanceof Shape ? curRenderedShape.toJson() : curRenderedShape;
 	                    var indicator = new AccessibleIndicator({ positionInSet: idx + 1, setSize: renderedShapes.length });
 	                    var element = indicator.getElement();
-	                    var _a = __read$b(_this.map.positionsToPixels([_this.getFirstCoordinate(bubbleFeature.geometry.coordinates)]), 1), pixel = _a[0];
+	                    var _a = __read$a(_this.map.positionsToPixels([_this.getFirstCoordinate(bubbleFeature.geometry.coordinates)]), 1), pixel = _a[0];
 	                    element.addEventListener('focusin', function (event) {
 	                        _this.accessibleIndicator.filter(function (i) { return i !== indicator; }).forEach(function (indicator) { return indicator.remove(); });
 	                        // insert previous and next popups
@@ -62814,7 +63294,7 @@ uniform ${precision} ${type} u_${name};
 	            return undefined;
 	        }
 	        var mapConfiguration = this.map.getServiceOptions().mapConfiguration;
-	        return __spreadArray$9(__spreadArray$9([], __read$b(this.map.getCamera().bounds), false), [
+	        return __spreadArray$8(__spreadArray$8([], __read$a(this.map.getCamera().bounds), false), [
 	            this.map.getCamera().zoom,
 	            this.map.getCamera().pitch,
 	            this.map.getStyle().style,
@@ -63954,42 +64434,6 @@ uniform ${precision} ${type} u_${name};
 	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 	    };
 	})();
-	var __values$e = (window && window.__values) || function(o) {
-	    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-	    if (m) return m.call(o);
-	    if (o && typeof o.length === "number") return {
-	        next: function () {
-	            if (o && i >= o.length) o = void 0;
-	            return { value: o && o[i++], done: !o };
-	        }
-	    };
-	    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-	};
-	var __read$a = (window && window.__read) || function (o, n) {
-	    var m = typeof Symbol === "function" && o[Symbol.iterator];
-	    if (!m) return o;
-	    var i = m.call(o), r, ar = [], e;
-	    try {
-	        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-	    }
-	    catch (error) { e = { error: error }; }
-	    finally {
-	        try {
-	            if (r && !r.done && (m = i["return"])) m.call(i);
-	        }
-	        finally { if (e) throw e.error; }
-	    }
-	    return ar;
-	};
-	var __spreadArray$8 = (window && window.__spreadArray) || function (to, from, pack) {
-	    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-	        if (ar || !(i in from)) {
-	            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-	            ar[i] = from[i];
-	        }
-	    }
-	    return to.concat(ar || Array.prototype.slice.call(from));
-	};
 	/**
 	 * Options used when rendering Polygon and MultiPolygon objects in a PolygonLayer.
 	 */
@@ -64025,50 +64469,6 @@ uniform ${precision} ${type} u_${name};
 	        _this.fillPattern = undefined;
 	        return _this;
 	    }
-	    /**
-	     * Override the standard merge behavior to set fillPattern and fillColor to be mutually exclusive
-	     * @internal
-	     */
-	    PolygonLayerOptions.prototype.merge = function () {
-	        var e_1, _a;
-	        var valueList = [];
-	        for (var _i = 0; _i < arguments.length; _i++) {
-	            valueList[_i] = arguments[_i];
-	        }
-	        var isNewColorSet = false;
-	        var isNewPatternSet = false;
-	        try {
-	            for (var valueList_1 = __values$e(valueList), valueList_1_1 = valueList_1.next(); !valueList_1_1.done; valueList_1_1 = valueList_1.next()) {
-	                var value = valueList_1_1.value;
-	                if (value) {
-	                    if (value.hasOwnProperty("fillColor")) {
-	                        isNewColorSet = true;
-	                        isNewPatternSet = false;
-	                    }
-	                    else if (value.hasOwnProperty("fillPattern")) {
-	                        isNewPatternSet = true;
-	                        isNewColorSet = false;
-	                    }
-	                }
-	            }
-	        }
-	        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-	        finally {
-	            try {
-	                if (valueList_1_1 && !valueList_1_1.done && (_a = valueList_1.return)) _a.call(valueList_1);
-	            }
-	            finally { if (e_1) throw e_1.error; }
-	        }
-	        // Then execute the standard merge behavior.
-	        var merged = _super.prototype.merge.apply(this, __spreadArray$8([], __read$a(valueList), false));
-	        if (isNewColorSet) {
-	            merged.fillPattern = undefined;
-	        }
-	        else if (isNewPatternSet) {
-	            merged.fillColor = undefined;
-	        }
-	        return merged;
-	    };
 	    return PolygonLayerOptions;
 	}(LayerOptions$1));
 
@@ -64120,6 +64520,8 @@ uniform ${precision} ${type} u_${name};
 	    };
 	    /**
 	     * Sets the options of the polygon layer.
+	     * When `fillPattern` is set, `fillColor` will be ignored.
+	     * To set `fillColor`, make sure `fillPattern` is set to `undefined`.
 	     * @param newOptions The new options of the polygon layer.
 	     */
 	    PolygonLayer.prototype.setOptions = function (options) {
@@ -70392,59 +70794,59 @@ uniform ${precision} ${type} u_${name};
 	        var features = this.map._getMap().querySourceFeatures(sourceID, { sourceLayer: sourceLayer, filter: filter });
 	        return this.map.sources._mapFeaturesToShapes(features, true, this.sources.get(sourceID));
 	    };
-	    // TODO: wait till the mapbox's bug is fixed
-	    // /**
-	    //  * Gets the state of a feature
-	    //  * @param shape the ID of the shape
-	    //  * @param source the ID of the source
-	    //  * @param sourceLayer the ID of the layer
-	    //  */
-	    // public getFeatureState(shape: string | Shape | Feature<Geometry, any>, source: string | Source, sourceLayer?: string): object {
-	    //     let featureID;
-	    //     if (typeof shape === "string") {
-	    //         featureID = shape;
-	    //     } else {
-	    //         featureID = shape instanceof Shape ? shape.getId() : shape.id;
-	    //     }
-	    //     const featureSource = typeof source === "string" ? source : source.getId();
-	    //     return this.map._getMap().getFeatureState({ id: featureID, source: featureSource, sourceLayer: sourceLayer });
-	    // }
-	    // /**
-	    //  * Removes the state or a single key value of the state of a feature.
-	    //  * @param shape the ID of the shape
-	    //  * @param source the ID of the source
-	    //  * @param sourceLayer the ID of the layer
-	    //  * @param key the key in the feature state to update
-	    //  */
-	    // public removeFeatureState(shape: string | Shape | Feature<Geometry, any>, source: string | Source, sourceLayer?: string, key?: string) {
-	    //     let featureID;
-	    //     if (typeof shape === "string") {
-	    //         featureID = shape;
-	    //     } else {
-	    //         featureID = shape instanceof Shape ? shape.getId() : shape.id;
-	    //     }
-	    //     const featureSource = typeof source === "string" ? source : source.getId();
-	    //     // TODO: update the method when the mapbox typing file is updated
-	    //     (this.map._getMap() as any).removeFeatureState({ id: featureID, source: featureSource, sourceLayer: sourceLayer }, key);
-	    // }
-	    // /**
-	    //  * Sets the state of the feature by passing in a key value pair object.
-	    //  * @param shape the ID of the shape
-	    //  * @param source the ID of the source
-	    //  * @param sourceLayer the ID of the layer
-	    //  * @param key the key in the feature state to update
-	    //  */
-	    // public setFeatureState(shape: string | Shape | Feature<Geometry, any>, source: string | Source, state: object, sourceLayer?: string) {
-	    //     let featureID;
-	    //     if (typeof shape === "string") {
-	    //         featureID = shape;
-	    //     } else {
-	    //         featureID = shape instanceof Shape ? shape.getId() : shape.id;
-	    //     }
-	    //     const featureSource = typeof source === "string" ? source : source.getId();
-	    //     // TODO: update the method when the mapbox typing file is updated
-	    //     this.map._getMap().setFeatureState({ id: featureID, source: featureSource, sourceLayer: sourceLayer }, state);
-	    // }
+	    /**
+	     * Gets the state of a feature
+	     * @param feature the ID of the feature
+	     * @param source the ID of the source
+	     * @param sourceLayer the ID of the layer
+	     */
+	    SourceManager.prototype.getFeatureState = function (feature, source, sourceLayer) {
+	        var featureId;
+	        if (typeof feature === "string") {
+	            featureId = feature;
+	        }
+	        else {
+	            featureId = feature instanceof Shape ? feature.getId() : feature.id;
+	        }
+	        var featureSource = typeof source === "string" ? source : source.getId();
+	        return this.map._getMap().getFeatureState({ id: featureId, source: featureSource, sourceLayer: sourceLayer });
+	    };
+	    /**
+	     * Removes the state or a single key value of the state of a feature.
+	     * @param feature the ID of the feature
+	     * @param source the ID of the source
+	     * @param sourceLayer the ID of the layer
+	     * @param key the key in the feature state to update
+	     */
+	    SourceManager.prototype.removeFeatureState = function (feature, source, sourceLayer, key) {
+	        var featureId;
+	        if (typeof feature === "string") {
+	            featureId = feature;
+	        }
+	        else {
+	            featureId = feature instanceof Shape ? feature.getId() : feature.id;
+	        }
+	        var featureSource = typeof source === "string" ? source : source.getId();
+	        this.map._getMap().removeFeatureState({ id: featureId, source: featureSource, sourceLayer: sourceLayer }, key);
+	    };
+	    /**
+	     * Sets the state of the feature by passing in a key value pair object.
+	     * @param feature the ID of the feature
+	     * @param source the ID of the source
+	     * @param sourceLayer the ID of the layer
+	     * @param key the key in the feature state to update
+	     */
+	    SourceManager.prototype.setFeatureState = function (feature, source, state, sourceLayer) {
+	        var featureId;
+	        if (typeof feature === "string") {
+	            featureId = feature;
+	        }
+	        else {
+	            featureId = feature instanceof Shape ? feature.getId() : feature.id;
+	        }
+	        var featureSource = typeof source === "string" ? source : source.getId();
+	        this.map._getMap().setFeatureState({ id: featureId, source: featureSource, sourceLayer: sourceLayer }, state);
+	    };
 	    /**
 	     * @internal
 	     */
@@ -71709,8 +72111,8 @@ uniform ${precision} ${type} u_${name};
 	         */
 	        _this.styleSet = undefined;
 	        /**
-	         * Enable accessibility
-	         * default: true
+	         * Enable the accessibility feature to provide screen reader support for users who have difficulty visualizing the web application.
+	         * This property is set to true by default.
 	         * @default true
 	         */
 	        _this.enableAccessibility = true;
@@ -72548,14 +72950,13 @@ uniform ${precision} ${type} u_${name};
 	        return !previousStyle
 	            ? nextStyle
 	            : this.map.layers._getUserLayers().reduce(function (style, userLayer) {
+	                var _a, _b;
 	                if (userLayer.layer instanceof WebGLLayer) {
 	                    // mapbox custom layers cannot be serialized and preserved,
 	                    // return to continue to the next user layer.
 	                    return style;
 	                }
-	                var before = layerGroupLayers[userLayer.before] && layerGroupLayers[userLayer.before].length > 0
-	                    ? layerGroupLayers[userLayer.before][0]
-	                    : undefined;
+	                var beforeLayerId = ((_b = (_a = layerGroupLayers === null || layerGroupLayers === void 0 ? void 0 : layerGroupLayers[userLayer.before]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || userLayer.before;
 	                var layer = previousStyle.layers.find(function (layer) { return layer.id === userLayer.layer.getId(); });
 	                // when setStyle diff attempt is unsuccesful, _load will be called on the style that may have already injected user layers -> clean it up
 	                var existingLayerIdx = nextStyle.layers.findIndex(function (layer) { return layer.id === userLayer.layer.getId(); });
@@ -72566,7 +72967,7 @@ uniform ${precision} ${type} u_${name};
 	                    var sourcesToCopy = new Set(Array.from(userLayer.layer._getSourceIds())
 	                        .map(function (sourceId) { return previousStyle.sources[sourceId] ? { source: previousStyle.sources[sourceId], id: sourceId } : undefined; })
 	                        .filter(function (source) { return source !== undefined; }));
-	                    var insertIdx = before ? style.layers.findIndex(function (layer) { return layer.id === before.id; }) : -1;
+	                    var insertIdx = beforeLayerId ? style.layers.findIndex(function (layer) { return layer.id === beforeLayerId; }) : -1;
 	                    if (insertIdx > -1) {
 	                        style.layers.splice(insertIdx, 0, layer);
 	                    }