azure-maps-control 2.2.6 → 2.3.0

package/dist/atlas-core-snr.js

@@ -77,7 +77,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	}
 
 	var azuremapsMaplibreGlUnminified = createCommonjsModule(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/v1.15.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/v1.16.0/LICENSE.txt */
 	(function (global, factory) {
 	 module.exports = factory() ;
 	}(commonjsGlobal, (function () {
@@ -109,7 +109,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		return module = { exports: {} }, fn(module, module.exports), module.exports;
 	}
 
-	var version = "1.15.0";
+	var version = "1.16.0";
 
 	var unitbezier = UnitBezier;
 	function UnitBezier(p1x, p1y, p2x, p2y) {
@@ -33124,7 +33124,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        Style.__proto__ = Evented;
 	    Style.prototype = Object.create(Evented && Evented.prototype);
 	    Style.prototype.constructor = Style;
-	    Style.prototype.loadURL = function loadURL(url, options) {
+	    Style.prototype.loadURL = function loadURL(url, options, previousStyle) {
 	        var this$1 = this;
 	        if (options === void 0)
 	            options = {};
@@ -33137,11 +33137,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            if (error) {
 	                this$1.fire(new performance.ErrorEvent(error));
 	            } else if (json) {
-	                this$1._load(json, options);
+	                this$1._load(json, options, previousStyle);
 	            }
 	        });
 	    };
-	    Style.prototype.loadJSON = function loadJSON(json, options) {
+	    Style.prototype.loadJSON = function loadJSON(json, options, previousStyle) {
 	        var this$1 = this;
 	        if (options === void 0)
 	            options = {};
@@ -33149,34 +33149,29 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        this._request = performance.browser.frame(function () {
 	            this$1._request = null;
 	            options.validate = options.validate !== false;
-	            this$1._load(json, options);
+	            this$1._load(json, options, previousStyle);
 	        });
 	    };
 	    Style.prototype.loadEmpty = function loadEmpty() {
 	        this.fire(new performance.Event('dataloading', { dataType: 'style' }));
 	        this._load(empty, { validate: false });
 	    };
-	    Style.prototype._load = function _load(json, options) {
-	        var this$1 = this;
-	        if (options.validate && emitValidationErrors(this, performance.validateStyle(json))) {
+	    Style.prototype._load = function _load(json, options, previousStyle) {
+	        var nextState = options.transformStyle ? options.transformStyle(previousStyle, json) : json;
+	        if (options.validate && emitValidationErrors(this, performance.validateStyle(nextState))) {
 	            return;
 	        }
-	        var patchOperations = [];
-	        if (options.stylePatch) {
-	            patchOperations = this._buildStylePatch(json, options);
-	            this.sourceCaches = {};
-	        }
 	        this._loaded = true;
-	        this.stylesheet = json;
-	        for (var id in json.sources) {
-	            this.addSource(id, json.sources[id], { validate: false });
+	        this.stylesheet = nextState;
+	        for (var id in nextState.sources) {
+	            this.addSource(id, nextState.sources[id], { validate: false });
 	        }
-	        if (json.sprite) {
-	            this._loadSprite(json.sprite);
+	        if (nextState.sprite) {
+	            this._loadSprite(nextState.sprite);
 	        } else {
 	            this.imageManager.setLoaded(true);
 	        }
-	        this.glyphManager.setURL(json.glyphs);
+	        this.glyphManager.setURL(nextState.glyphs);
 	        var layers = derefLayers(this.stylesheet.layers);
 	        this._order = layers.map(function (layer) {
 	            return layer.id;
@@ -33192,11 +33187,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	        this.dispatcher.broadcast('setLayers', this._serializeLayers(this._order));
 	        this.light = new Light(this.stylesheet.light);
-	        patchOperations.filter(function (op) {
-	            return op.command !== operations.moveLayer;
-	        }).forEach(function (op) {
-	            this$1[op.command].apply(this$1, op.args);
-	        });
 	        this.fire(new performance.Event('data', { dataType: 'style' }));
 	        this.fire(new performance.Event('style.load'));
 	    };
@@ -33371,33 +33361,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (emitValidationErrors(this, performance.validateStyle(nextState))) {
 	            return false;
 	        }
-	        nextState = performance.clone$1(nextState);
+	        nextState = options.transformStyle ? options.transformStyle(this.serialize(), nextState) : nextState;
 	        nextState.layers = derefLayers(nextState.layers);
-	        var patchOperations = [];
-	        var preservedLayers = {};
-	        var preservedSources = {};
-	        if (options.stylePatch) {
-	            patchOperations = this._buildStylePatch(nextState, options);
-	        }
-	        patchOperations = patchOperations.filter(function (op) {
-	            if (op.command === operations.addLayer && this$1._serializedLayers.hasOwnProperty(op.args[0].id)) {
-	                preservedLayers[op.args[0].id] = true;
-	                return false;
-	            }
-	            if (op.command === operations.moveLayer && this$1._serializedLayers.hasOwnProperty(op.args[0])) {
-	                preservedLayers[op.args[0]] = true;
-	                return true;
-	            }
-	            if (op.command === operations.addSource && this$1.sourceCaches.hasOwnProperty(op.args[0])) {
-	                preservedSources[op.args[0]] = true;
-	                return false;
-	            }
-	            return true;
-	        });
 	        var changes = diffStyles(this.serialize(), nextState).filter(function (op) {
 	            return !(op.command in ignoredDiffOperations);
 	        });
-	        changes = changes.concat(patchOperations);
 	        if (changes.length === 0) {
 	            return false;
 	        }
@@ -33413,12 +33381,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            if (op.command === 'setTransition') {
 	                return;
 	            }
-	            if (op.command === operations.removeLayer && preservedLayers.hasOwnProperty(op.args[0])) {
-	                return;
-	            }
-	            if ((op.command === operations.addSource || op.command === operations.removeSource) && preservedSources.hasOwnProperty(op.args[0])) {
-	                return;
-	            }
 	            this$1[op.command].apply(this$1, op.args);
 	        });
 	        this.stylesheet = nextState;
@@ -33809,109 +33771,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            return empty;
 	        }
 	    };
-	    Style.prototype._buildStylePatch = function _buildStylePatch(next, options) {
-	        var this$1 = this;
-	        var patchOperations = [];
-	        var preservedSources = [];
-	        var preservedLayers = [];
-	        var nextLayerIndex = next.layers.reduce(function (p, c) {
-	            p[c.id] = c;
-	            return p;
-	        }, {});
-	        var preserveLayer = function (layerId, before) {
-	            if (this$1.hasLayer(layerId)) {
-	                var preservedLayer = this$1._serializedLayers[layerId];
-	                if (!next.sources.hasOwnProperty(preservedLayer.source) && !preservedSources.includes(preservedLayer.source)) {
-	                    patchOperations.push({
-	                        command: 'addSource',
-	                        args: [
-	                            preservedLayer.source,
-	                            this$1.sourceCaches[preservedLayer.source].serialize(),
-	                            { validate: false }
-	                        ]
-	                    });
-	                    preservedSources.push(preservedLayer.source);
-	                }
-	                if (nextLayerIndex.hasOwnProperty(layerId)) {
-	                    patchOperations.push({
-	                        command: 'removeLayer',
-	                        args: [layerId]
-	                    });
-	                }
-	                before = nextLayerIndex.hasOwnProperty(before) || preservedLayers.find(function (l) {
-	                    return l.id === before;
-	                }) ? before : undefined;
-	                patchOperations.push({
-	                    command: 'moveLayer',
-	                    args: [
-	                        preservedLayer.id,
-	                        before,
-	                        { validate: true }
-	                    ]
-	                });
-	                patchOperations.push({
-	                    command: 'addLayer',
-	                    args: [
-	                        preservedLayer,
-	                        before,
-	                        { validate: true }
-	                    ]
-	                });
-	                preservedLayers.push(layerId);
-	            } else {
-	                performance.warnOnce('Cannot preserve layer ' + layerId + ' that is not in the previous style.');
-	            }
-	        };
-	        var updatePaintProperty = function (layerId, name, value) {
-	            if (nextLayerIndex.hasOwnProperty(layerId) || preservedLayers.includes(layerId)) {
-	                patchOperations.push({
-	                    command: 'setPaintProperty',
-	                    args: [
-	                        layerId,
-	                        name,
-	                        value,
-	                        { validate: true }
-	                    ]
-	                });
-	            } else {
-	                performance.warnOnce('Cannot update paint property on layer ' + layerId + ' that is not in the next style.');
-	            }
-	        };
-	        var updateLayoutProperty = function (layerId, name, value) {
-	            if (nextLayerIndex.hasOwnProperty(layerId) || preservedLayers.includes(layerId)) {
-	                patchOperations.push({
-	                    command: 'setLayoutProperty',
-	                    args: [
-	                        layerId,
-	                        name,
-	                        value,
-	                        { validate: true }
-	                    ]
-	                });
-	            } else {
-	                performance.warnOnce('Cannot update layout property on layer ' + layerId + ' that is not in the next style.');
-	            }
-	        };
-	        var updateFilter = function (layerId, name, value) {
-	            if (nextLayerIndex.hasOwnProperty(layerId) || preservedLayers.includes(layerId)) {
-	                patchOperations.push({
-	                    command: 'setFilter',
-	                    args: [
-	                        layerId,
-	                        name,
-	                        value,
-	                        { validate: true }
-	                    ]
-	                });
-	            } else {
-	                performance.warnOnce('Cannot update filter on layer ' + layerId + ' that is not in the next style.');
-	            }
-	        };
-	        if (options.stylePatch) {
-	            options.stylePatch(this.serialize(), next, preserveLayer.bind(this), updatePaintProperty.bind(this), updateLayoutProperty.bind(this), updateFilter.bind(this));
-	        }
-	        return patchOperations;
-	    };
 	    Style.prototype._updateLayer = function _updateLayer(layer) {
 	        this._updatedLayers[layer.id] = true;
 	        if (layer.source && !this._updatedSources[layer.source] && this.sourceCaches[layer.source].getSource().type !== 'raster') {
@@ -41194,33 +41053,31 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        return str;
 	    };
 	    Map.prototype._updateStyle = function _updateStyle(style, options) {
+	        var this$1 = this;
 	        if (options === void 0)
 	            options = {};
-	        if (!options.stylePatch) {
-	            if (this.style) {
-	                this.style.setEventedParent(null);
-	                this.style._remove();
-	            }
-	            if (!style) {
-	                delete this.style;
-	                return this;
-	            } else {
-	                this.style = new Style(this, options);
-	            }
-	            this.style.setEventedParent(this, { style: this.style });
-	        } else {
-	            if (!style) {
-	                style = emptyStyle();
-	            }
+	        if (options.transformStyle && this.style && !this.style._loaded) {
+	            this.style.once('style.load', function () {
+	                return this$1._updateStyle(style, options);
+	            });
+	            return;
 	        }
-	        if (!this.style) {
+	        var previousStyle = this.style && options.transformStyle ? this.style.serialize() : undefined;
+	        if (this.style) {
+	            this.style.setEventedParent(null);
+	            this.style._remove();
+	        }
+	        if (!style) {
+	            delete this.style;
+	            return this;
+	        } else {
 	            this.style = new Style(this, options);
-	            this.style.setEventedParent(this, { style: this.style });
 	        }
+	        this.style.setEventedParent(this, { style: this.style });
 	        if (typeof style === 'string') {
-	            this.style.loadURL(style, options);
+	            this.style.loadURL(style, options, previousStyle);
 	        } else {
-	            this.style.loadJSON(style, options);
+	            this.style.loadJSON(style, options, previousStyle);
 	        }
 	        return this;
 	    };
@@ -43619,7 +43476,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    return Url;
 	}());
 
-	var version = "2.2.6";
+	var version = "2.3.0";
 
 	/**
 	 * A helper class that provides methods for getting various forms of the map controls current version.
@@ -43999,7 +43856,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	     * Build the outermost container for the control, applies styling including any listeners for auto styling.
 	     */
 	    ControlBase.prototype.buildContainer = function (map, style, ariaLabel, tagName) {
-	        var _this = this;
 	        this._map = map;
 	        this._container = document.createElement(tagName || "div");
 	        this._container.classList.add("azure-maps-control-container");
@@ -44008,11 +43864,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	        // Set the style or add the auto listener.
 	        if (style.toLowerCase() === exports.ControlStyle.auto) {
-	            this._map.styles.definitions().then(function (definitions) {
-	                if (_this._map) {
-	                    _this._map.events.add("stylechanged", _this._onStyleChange);
-	                }
-	            });
+	            if (this._map) {
+	                this._map.events.add("stylechanged", this._onStyleChange);
+	            }
 	        }
 	        else {
 	            this._container.classList.add(style);
@@ -47772,6 +47626,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        _this.hasFocus = false;
 	        _this.styleButtons = new Dictionary();
 	        _this.styleIcons = new Dictionary();
+	        // we need to rely on this to avoid potentially redundant thumbnail requests and .blob calls
+	        _this.thumbnailCache = {
+	            assumedConfiguration: undefined,
+	            response: new Dictionary(),
+	            blob: new Dictionary()
+	        };
 	        /**
 	         * Callback handler for the style changing.
 	         */
@@ -47785,6 +47645,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            if (!_this.styleOpsGrid) {
 	                return;
 	            }
+	            // do not recreate the styleOpsGrid if it is initialized and configuration object reference has not changed
+	            if (_this.styleOpsGrid.children.length > 0 && _this.thumbnailCache.assumedConfiguration === definitions) {
+	                return;
+	            }
+	            _this.thumbnailCache.assumedConfiguration = definitions;
 	            Array.from(_this.styleOpsGrid.children).forEach(function (element) { return element.remove(); });
 	            _this.styleButtons.clear();
 	            _this.populateOpsGridFromDefinitions(definitions);
@@ -47890,6 +47755,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        _super.prototype.onRemove.call(this);
 	        this.styleOpsGrid = null;
 	        this.styleButtons.clear();
+	        this.thumbnailCache.response.clear();
+	        this.thumbnailCache.blob.clear();
+	        this.thumbnailCache.assumedConfiguration = undefined;
 	        this.map.events.remove("stylechanged", this.onStyleChange);
 	        this.map.events.remove("mapconfigurationchanged", this.onMapConfigurationChange);
 	    };
@@ -47949,7 +47817,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        styleOptionButton.setAttribute("type", "button");
 	        var styleIconImage = new Image();
 	        fetchIconPromise
-	            .then(function (response) { return response.blob(); })
+	            .then(function (response) {
+	            if (_this.thumbnailCache.blob.has(response.url)) {
+	                return _this.thumbnailCache.blob.get(response.url);
+	            }
+	            else {
+	                // we need the response.clone() to allow reading over body multiple times since response objects are cached 
+	                // and can be reused across multiple invocations
+	                var blobPromise = response.clone().blob();
+	                _this.thumbnailCache.blob.set(response.url, blobPromise);
+	                return blobPromise;
+	            }
+	        })
 	            .then(function (blob) {
 	            var iconUrl = URL.createObjectURL(blob);
 	            styleIconImage.src = iconUrl;
@@ -48057,7 +47936,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            if (mapServiceOptions.transformRequest) {
 	                merge_1(requestParams, mapServiceOptions.transformRequest(requestParams.url, "Thumbnail"));
 	            }
-	            var fetchThumbnailPromise = fetch(requestParams.url, { headers: requestParams.headers });
+	            var fetchThumbnailPromise;
+	            if (_this.thumbnailCache.response.has(requestParams.url)) {
+	                fetchThumbnailPromise = Promise.resolve(_this.thumbnailCache.response.get(requestParams.url));
+	            }
+	            else {
+	                fetchThumbnailPromise = fetch(requestParams.url, { headers: requestParams.headers });
+	                _this.thumbnailCache.response.set(requestParams.url, fetchThumbnailPromise);
+	            }
 	            // Add button for each style
 	            var styleOptionButton = _this.buildSelectStyleBtn(style.name, definitions, fetchThumbnailPromise);
 	            _this.styleOpsGrid.appendChild(styleOptionButton);
@@ -53335,7 +53221,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    };
 	    ZoomControl.prototype.updateZoomButtonsState = function () {
 	        var zoomInDisabled = this.map.getCamera().zoom >= this.map._getMap().getMaxZoom();
-	        // small values need special handling, since depending on the height of the map view 
+	        // small values need special handling, since depending on the height of the map view
 	        // the actual zoom we can zoom out to can be above or below 0 when the entire map fits the height into the view
 	        // use web mercator bounds to check if entire latitude range is visible
 	        var reachedLatitudeBoundaries = BoundingBox.getSouth(this.map.getCamera().bounds) <= -WEBMERCATOR_MAXLAT
@@ -53347,7 +53233,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	        if (this.zoomOutButton && this.zoomOutButton.disabled != zoomOutDisabled) {
 	            this.zoomOutButton.disabled = zoomOutDisabled;
-	            this.zoomInButton.setAttribute("aria-label", zoomInDisabled ? "Zoom Out disabled" : "Zoom Out");
+	            this.zoomOutButton.setAttribute("aria-label", zoomInDisabled ? "Zoom Out disabled" : "Zoom Out");
 	        }
 	    };
 	    ZoomControl.prototype.constructZoomInButton = function (map) {
@@ -53619,19 +53505,24 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	     * Get reference to Mapbox Map
 	     * @internal
 	     */
-	    Source.prototype._setMap = function (map) {
+	    Source.prototype._setMap = function (map, shouldInvokeEvent) {
+	        if (shouldInvokeEvent === void 0) { shouldInvokeEvent = true; }
 	        if (map == null || map === undefined) {
 	            var temp = this.map;
 	            delete this.map;
-	            this._invokeEvent("sourceremoved", this);
-	            if (temp) {
-	                temp.events.invoke("sourceremoved", this);
+	            if (shouldInvokeEvent) {
+	                this._invokeEvent("sourceremoved", this);
+	                if (temp) {
+	                    temp.events.invoke("sourceremoved", this);
+	                }
 	            }
 	        }
 	        else {
 	            this.map = map;
-	            this._invokeEvent("sourceadded", this);
-	            this.map.events.invoke("sourceadded", this);
+	            if (shouldInvokeEvent) {
+	                this._invokeEvent("sourceadded", this);
+	                this.map.events.invoke("sourceadded", this);
+	            }
 	        }
 	    };
 	    return Source;
@@ -53952,6 +53843,27 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	        return geoJsonSource;
 	    };
+	    DataSource.prototype._isDeepEqual = function (other) {
+	        if (this.constructor !== other.constructor) {
+	            return false;
+	        }
+	        var source = this._buildSource();
+	        var otherSource = other._buildSource();
+	        return source.type === otherSource.type &&
+	            // no data comparison since it is costly and not needed. If geojson data is different, but other source properties are same, we treat it as an update.
+	            //source.data === otherSource.data &&
+	            source.maxzoom === otherSource.maxzoom &&
+	            source.cluster === otherSource.cluster &&
+	            source.clusterRadius === otherSource.clusterRadius &&
+	            source.tolerance === otherSource.tolerance &&
+	            source.lineMetrics === otherSource.lineMetrics &&
+	            JSON.stringify(source.clusterProperties) === JSON.stringify(otherSource.clusterProperties) &&
+	            source.buffer === otherSource.buffer &&
+	            source.clusterMinPoints === otherSource.clusterMinPoints &&
+	            source.generateId === otherSource.generateId &&
+	            source.promoteId === otherSource.promoteId &&
+	            source.filter === otherSource.filter;
+	    };
 	    /**
 	     * @internal
 	     */
@@ -54233,6 +54145,26 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	        return vectorSource;
 	    };
+	    /**
+	     * @internal
+	     */
+	    VectorTileSource.prototype._isDeepEqual = function (other) {
+	        if (this.constructor !== other.constructor) {
+	            return false;
+	        }
+	        var source = this._buildSource();
+	        var otherSource = other._buildSource();
+	        return source.type === otherSource.type &&
+	            source.url === otherSource.url &&
+	            ((source.tiles === undefined && otherSource.tiles === undefined) ||
+	                (source.tiles && otherSource.tiles && source.tiles.length === otherSource.tiles.length && source.tiles.every(function (value, idx) { return value === otherSource.tiles[idx]; }))) &&
+	            source.minzoom === otherSource.minzoom &&
+	            source.maxzoom === otherSource.maxzoom &&
+	            source.bounds === otherSource.bounds &&
+	            source.attribution === otherSource.attribution &&
+	            source.promoteId === otherSource.promoteId &&
+	            source.scheme === otherSource.scheme;
+	    };
 	    return VectorTileSource;
 	}(Source));
 
@@ -54524,11 +54456,41 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        /**
 	         * @internal
 	         * Specifies whether to create focusable indicators for the bubbles.
+	         * The default highlighting style is provided if the source is DataSource with Shape:
+	         * ```ts
+	         * const datasource = new DataSource('bubble-source');
+	         * datasource.setShapes([new Shape(new Point([-122.335, 47.62]))]);
+	         * this.map.sources.add(datasource);
+	         * const layer = new BubbleLayer(datasource, 'bubble', {
+	         *  radius: 10,
+	         *  color: 'cyan',
+	         *  createIndicators: true,
+	         * });
+	         * ```
+	         *
+	         * For other sources, you can provide the accessibilityIdKey option to specify the property name of the feature to use as the accessibility id.
+	         * ```ts
+	         * const vtSource = new VectorTileSource("indoorTiles", { tiles,  // provide your tile urls });
+	         * this.map.sources.add(vtSource);
+	         * const layer = new BubbleLayer(vtSource, 'bubble', {
+	         *  createIndicators: true,
+	         *  accessibilityIdKey: '{add your ID here}'
+	         * });
+	         * ```
+	         *
+	         * If you want to customize the highlighting style, you can use the focusin/focusout events to change the style of the bubble.
+	         * ```ts
+	         * this.map.events.add('focusin', 'bubble', (e) => { handle the style highlight });
+	         * ```
 	         *
 	         * Note: We treat this as an internal option for now because we hadn't fully decided the default styling for the indicators.
 	         * Once we decide, we will make this a public option or remove it.
 	         */
 	        _this.createIndicators = false;
+	        /**
+	         * @internal
+	         */
+	        _this.accessibilityIdKey = undefined;
 	        return _this;
 	    }
 	    return BubbleLayerOptions;
@@ -54601,6 +54563,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
+	var __spreadArray = (window && window.__spreadArray) || function (to, from) {
+	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+	        to[j] = from[i];
+	    return to;
+	};
 	/**
 	 * Renders Point objects as scalable circles (bubbles).
 	 */
@@ -54615,45 +54582,60 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    function BubbleLayer(source, id, options) {
 	        var _this = _super.call(this, id) || this;
 	        _this.accessibleIndicator = [];
-	        _this.setAccessibleIndicator = function () { return __awaiter$1(_this, void 0, void 0, function () {
-	            var features, createIndicator, insertHiddenBefore, attach;
+	        /** @internal */
+	        _this._setAccessibleIndicator = function () { return __awaiter$1(_this, void 0, void 0, function () {
+	            var renderedShapes, accessibilityIdKey, createIndicator, insertHiddenBefore, insertHiddenInFront, attach;
 	            var _this = this;
 	            return __generator$1(this, function (_a) {
 	                this.accessibleIndicator.forEach(function (indicator) { return indicator.remove(); });
 	                this.accessibleIndicator = [];
-	                features = this.map.layers.getRenderedShapes(this.map.getCamera().bounds, this);
-	                createIndicator = function (features, idx) {
-	                    var bubbleFeature = features[idx];
-	                    var indicator = new AccessibleIndicator({ positionInSet: idx + 1, setSize: features.length });
+	                renderedShapes = this.map.layers.getRenderedShapes(this.map.getCamera().bounds, this);
+	                accessibilityIdKey = this.options.accessibilityIdKey || (this._getDataSource() ? Shape._shapeIdPropName : undefined);
+	                createIndicator = function (renderedShapes, idx) {
+	                    var curRenderedShape = renderedShapes[idx];
+	                    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$3(_this.map.positionsToPixels([bubbleFeature.data.geometry.coordinates]), 1), pixel = _a[0];
+	                    var _a = __read$3(_this.map.positionsToPixels([_this.getFirstCoordinate(bubbleFeature.geometry.coordinates)]), 1), pixel = _a[0];
 	                    element.addEventListener('focusin', function (event) {
-	                        _this.accessibleIndicator.filter(function (p) { return p !== indicator; }).forEach(function (popup) { return popup.remove(); });
+	                        _this.accessibleIndicator.filter(function (i) { return i !== indicator; }).forEach(function (indicator) { return indicator.remove(); });
 	                        // insert previous and next popups
 	                        if (idx - 1 >= 0) {
-	                            insertHiddenBefore(indicator, createIndicator(features, idx - 1));
+	                            insertHiddenBefore(indicator, createIndicator(renderedShapes, idx - 1));
+	                        }
+	                        if (idx + 1 < renderedShapes.length) {
+	                            attach(createIndicator(renderedShapes, idx + 1));
 	                        }
-	                        if (idx + 1 < features.length) {
-	                            attach(createIndicator(features, idx + 1));
+	                        // if we are on boundaries: add the first / last indicator 
+	                        // to maintain indicators on full page navigation cycle
+	                        if (idx >= 2 && idx == renderedShapes.length - 1) {
+	                            insertHiddenInFront(createIndicator(renderedShapes, 0));
+	                        }
+	                        if (idx == 0 && renderedShapes.length >= 2) {
+	                            attach(createIndicator(renderedShapes, renderedShapes.length - 1));
+	                        }
+	                        if (accessibilityIdKey !== undefined) {
+	                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', accessibilityIdKey], bubbleFeature.properties[accessibilityIdKey]], '#000000', _this.options.strokeColor]);
 	                        }
-	                        _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.data.id], '#000000', _this.options.strokeColor]);
 	                        var focusEvent = {
 	                            target: element,
 	                            type: 'focusin',
 	                            map: _this.map,
-	                            shape: bubbleFeature,
+	                            shape: curRenderedShape,
 	                            originalEvent: event,
 	                            pixel: pixel
 	                        };
 	                        _this._invokeEvent('focusin', focusEvent);
 	                    });
 	                    element.addEventListener('focusout', function (event) {
-	                        _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.data.id], _this.options.strokeColor, _this.options.strokeColor]);
+	                        if (accessibilityIdKey !== undefined) {
+	                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', accessibilityIdKey], bubbleFeature.properties[accessibilityIdKey]], _this.options.strokeColor, _this.options.strokeColor]);
+	                        }
 	                        var focusEvent = {
 	                            target: element,
 	                            type: 'focusout',
 	                            map: _this.map,
-	                            shape: bubbleFeature,
+	                            shape: curRenderedShape,
 	                            originalEvent: event,
 	                            pixel: pixel
 	                        };
@@ -54668,14 +54650,20 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    var baseElement = base.getElement();
 	                    baseElement.parentElement.insertBefore(elementToSwapIn, baseElement);
 	                };
+	                insertHiddenInFront = function (toInsert) {
+	                    toInsert.attach(_this.map);
+	                    var elementToSwapIn = toInsert.getElement();
+	                    var parent = elementToSwapIn.parentElement;
+	                    parent.insertBefore(elementToSwapIn, parent.firstElementChild);
+	                };
 	                attach = function (popup) {
 	                    popup.attach(_this.map);
 	                };
-	                if (features.length > 0) {
-	                    attach(createIndicator(features, 0));
+	                if (renderedShapes.length > 0) {
+	                    attach(createIndicator(renderedShapes, 0));
 	                }
-	                if (features.length > 1) {
-	                    attach(createIndicator(features, features.length - 1));
+	                if (renderedShapes.length > 1) {
+	                    attach(createIndicator(renderedShapes, renderedShapes.length - 1));
 	                }
 	                return [2 /*return*/];
 	            });
@@ -54728,18 +54716,71 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        this.options = newOptions;
 	    };
 	    BubbleLayer.prototype.onAdd = function (map) {
+	        var _this = this;
 	        _super.prototype.onAdd.call(this, map);
 	        if (this.options.createIndicators) {
-	            map.events.addOnce('idle', this.setAccessibleIndicator);
-	            map.events.add('moveend', this.setAccessibleIndicator);
+	            // Wait for map idle for the first time to ensure `layer.getRenderedShapes` return correct shapes.
+	            map.events.addOnce('idle', this._setAccessibleIndicator);
+	            // The rendered shapes may be changed when map is moved. Update the indicators when map is moved.
+	            map.events.add('moveend', this._setAccessibleIndicator);
+	            var dataSource = this._getDataSource();
+	            if (dataSource) {
+	                // The rendered shapes may be changed when data is added. Update the indicators when data is added.
+	                map.events.add('dataadded', dataSource, function () {
+	                    // Wait for map idle to ensure `layer.getRenderedShapes` return correct shapes.
+	                    map.events.addOnce('idle', _this._setAccessibleIndicator);
+	                });
+	            }
+	            else {
+	                var sourceId_1 = typeof this.options.source === 'string' ? this.options.source : this.options.source.getId();
+	                map.events.add('sourcedata', function (mapDataEvent) {
+	                    var _a;
+	                    // There's chances that mapDataEvent.isSourceLoaded doesn't update correctly when using flyTo, thus we check by using map.isSourceLoaded.
+	                    if (((_a = mapDataEvent.source) === null || _a === void 0 ? void 0 : _a.getId()) === sourceId_1 && map._getMap().isSourceLoaded(sourceId_1)) {
+	                        // Source event will be fired multiple times, and we are only interested when the source is loaded.
+	                        // Thus design a cache key that only changed when camera & style properties are changed.
+	                        var curCacheKey = _this._getSourceDataEventCacheKey();
+	                        if (curCacheKey !== _this.sourceDataEventCacheKey) {
+	                            _this._setAccessibleIndicator();
+	                            _this.sourceDataEventCacheKey = curCacheKey;
+	                        }
+	                    }
+	                });
+	            }
 	        }
 	    };
 	    BubbleLayer.prototype.onRemove = function () {
-	        _super.prototype.onRemove.call(this);
 	        if (this.options.createIndicators) {
-	            this.map.events.remove('idle', this.setAccessibleIndicator);
-	            this.map.events.remove('moveend', this.setAccessibleIndicator);
+	            this.map.events.remove('idle', this._setAccessibleIndicator);
+	            this.map.events.remove('moveend', this._setAccessibleIndicator);
+	            var dataSource = this._getDataSource();
+	            if (dataSource) {
+	                this.map.events.remove('dataadded', dataSource, this._setAccessibleIndicator);
+	            }
+	            else {
+	                this.map.events.remove('sourcedata', this._setAccessibleIndicator);
+	            }
 	        }
+	        _super.prototype.onRemove.call(this);
+	    };
+	    BubbleLayer.prototype._getSourceDataEventCacheKey = function () {
+	        if (!this.map) {
+	            return undefined;
+	        }
+	        var mapConfiguration = this.map.getServiceOptions().mapConfiguration;
+	        return __spreadArray(__spreadArray([], __read$3(this.map.getCamera().bounds)), [
+	            this.map.getCamera().zoom,
+	            this.map.getCamera().pitch,
+	            this.map.getStyle().style,
+	            mapConfiguration instanceof Object ? mapConfiguration.id : mapConfiguration
+	        ]).join(',');
+	    };
+	    BubbleLayer.prototype._getDataSource = function () {
+	        var source = typeof this.options.source === 'string' ? this.map.sources.getById(this.options.source) : this.options.source;
+	        if (source instanceof DataSource) {
+	            return source;
+	        }
+	        return undefined;
 	    };
 	    /**
 	     * @internal
@@ -54792,6 +54833,17 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            ids.add(this.options.source);
 	        return ids;
 	    };
+	    /**
+	     * The coordinates can be nested, so we need to get the first coordinate.
+	     * @param coordinates The property from the Geometry. Can be Position, Position[], Position[][], etc.
+	     * @returns
+	     */
+	    BubbleLayer.prototype.getFirstCoordinate = function (coordinates) {
+	        if (!Array.isArray(coordinates[0])) {
+	            return coordinates;
+	        }
+	        return this.getFirstCoordinate(coordinates[0]);
+	    };
 	    return BubbleLayer;
 	}(Layer));
 
@@ -55875,7 +55927,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$1 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -55950,7 +56002,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            finally { if (e_1) throw e_1.error; }
 	        }
 	        // Then execute the standard merge behavior.
-	        var merged = _super.prototype.merge.apply(this, __spreadArray([], __read$4(valueList)));
+	        var merged = _super.prototype.merge.apply(this, __spreadArray$1([], __read$4(valueList)));
 	        if (isNewColorSet) {
 	            merged.fillPattern = undefined;
 	        }
@@ -58644,7 +58696,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$1 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$2 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -58781,7 +58833,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        for (var _i = 0; _i < arguments.length; _i++) {
 	            valueList[_i] = arguments[_i];
 	        }
-	        var merged = _super.prototype.merge.apply(this, __spreadArray$1([], __read$6(valueList)));
+	        var merged = _super.prototype.merge.apply(this, __spreadArray$2([], __read$6(valueList)));
 	        if (merged.authType === exports.AuthenticationType.subscriptionKey) {
 	            merged.authContext = merged.aadAppId = merged.getToken = undefined;
 	        }
@@ -59452,10 +59504,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (add) {
 	            this.logoAnchor = document.createElement("a");
 	            this.logoAnchor.className = "azure-map-logo";
-	            this.logoAnchor.href = "https://microsoft.com";
+	            this.logoAnchor.href = "https://aka.ms/azuremaps";
 	            this.logoAnchor.setAttribute("aria-label", "Microsoft");
+	            this.logoAnchor.setAttribute("target", "_blank");
 	            this.container.appendChild(this.logoAnchor);
-	            this.logoTooltip = buildAccessibleTooltip("Visit microsoft.com");
+	            this.logoTooltip = buildAccessibleTooltip("Visit azure.microsoft.com");
 	            this.container.appendChild(this.logoTooltip);
 	            positionTooltip(this.logoTooltip, this.logoAnchor);
 	        }
@@ -59532,7 +59585,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$2 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$3 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -60644,7 +60697,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                        this._removeListener(eventType, target, callback);
 	                    }
 	                    else {
-	                        target._removeEventListener(eventType, callback);
+	                        target === null || target === void 0 ? void 0 : target._removeEventListener(eventType, callback);
 	                    }
 	                }
 	            }
@@ -61134,10 +61187,15 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        return ids;
 	    };
 	    FundamentalMapLayer.prototype._updateLayoutProperty = function (name, newValue, oldValue, subValue) {
-	        var _this = this;
+	        if (isEqual_1(newValue, oldValue))
+	            return;
+	        var map = this.map._getMap();
 	        this.layers.forEach(function (layer) {
-	            if (!(isEqual_1(newValue, oldValue))) {
-	                _this.map._getMap().setLayoutProperty(layer.id, name, subValue || newValue);
+	            if (map.getLayer(layer.id)) {
+	                map.setLayoutProperty(layer.id, name, subValue || newValue);
+	            }
+	            else {
+	                console.warn("Could not update layout property " + name + " for layer " + layer.id + " to " + (subValue || newValue));
 	            }
 	        });
 	    };
@@ -61171,7 +61229,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$3 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$4 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -61232,10 +61290,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                // Place the new layer behind the specified before layer.
 	                var layerIndex = this.layerIndex.findIndex(function (l) { return l.getId() === layer.getId(); });
 	                var userLayerIndex = this.userLayers.findIndex(function (ul) { return ul.layer.getId() === layer.getId(); });
-	                var tempLayer = this.layerIndex[layerIndex];
 	                this._removeMapboxLayers(layer);
 	                this._addMapboxLayers(layer, before);
-	                this.map.events._disableLayerEvents(tempLayer);
+	                var tempLayer = this.layerIndex[layerIndex];
+	                if (tempLayer) {
+	                    this.map.events._disableLayerEvents(tempLayer);
+	                }
 	                this.map.events._enableLayerEvents(layer);
 	                this.layerIndex.splice(layerIndex, 1);
 	                var beforeIndex = this.layerIndex.findIndex(function (l) { return l.getId() === before; });
@@ -61243,7 +61303,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                if (!(layer instanceof FundamentalMapLayer)) {
 	                    this.userLayers[userLayerIndex] = { layer: layer, before: before };
 	                }
-	                tempLayer.onRemove();
+	                if (tempLayer) {
+	                    tempLayer.onRemove();
+	                }
 	                layer.onAdd(this.map);
 	            }
 	            else {
@@ -61454,9 +61516,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    LayerManager.prototype.clear = function () {
 	        for (var layerIndexIndex = this.layerIndex.length - 1; layerIndexIndex >= 0; layerIndexIndex--) {
 	            var tempLayer = this.layerIndex[layerIndexIndex];
-	            this._removeMapboxLayers(tempLayer, true);
-	            this.layerIndex.splice(layerIndexIndex, 1);
-	            tempLayer.onRemove();
+	            if (tempLayer) {
+	                this._removeMapboxLayers(tempLayer, true);
+	                this.layerIndex.splice(layerIndexIndex, 1);
+	                tempLayer.onRemove();
+	            }
 	        }
 	        this.userLayers = [];
 	    };
@@ -61607,7 +61671,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                // If a specified layer hasn't been added to the map throw an error.
 	                var index = this_1.layerIndex.findIndex(function (l) { return l.getId() === layerId; });
 	                if (index > -1) {
-	                    layerIds.push.apply(layerIds, __spreadArray$3([], __read$9(this_1.layerIndex[index]._getLayerIds()
+	                    layerIds.push.apply(layerIds, __spreadArray$4([], __read$9(this_1.layerIndex[index]._getLayerIds()
 	                        .filter(function (id) { return !!_this.map._getMap().getLayer(id); }))));
 	                }
 	                else {
@@ -61896,6 +61960,37 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    FundamentalMapSource.prototype._buildSource = function () {
 	        return this.source;
 	    };
+	    /**
+	     * @internal
+	     */
+	    FundamentalMapSource.prototype._isDeepEqual = function (other) {
+	        if (this.constructor !== other.constructor) {
+	            return false;
+	        }
+	        var source = this.source;
+	        var otherSource = other.source;
+	        var baseEqual = source.type === otherSource.type &&
+	            source.url === otherSource.url
+	            && ((source.tiles === undefined && otherSource.tiles === undefined) ||
+	                (source.tiles && otherSource.tiles && source.tiles.length === otherSource.tiles.length && source.tiles.every(function (value, idx) { return value === otherSource.tiles[idx]; })))
+	            && source.minzoom === otherSource.minzoom
+	            && source.maxzoom === otherSource.maxzoom
+	            && source.bounds === otherSource.bounds
+	            && source.attribution === otherSource.attribution;
+	        var rasterEqual = source.type !== "raster" || (source.type === "raster"
+	            && source.type === otherSource.type
+	            && source.tileSize === otherSource.tileSize
+	            && source.scheme === otherSource.scheme);
+	        var rasterDemEqual = source.type !== "raster-dem" || (source.type === "raster-dem"
+	            && source.type === otherSource.type
+	            && source.tileSize === otherSource.tileSize
+	            && source.encoding === otherSource.encoding);
+	        var vectorEqual = source.type !== "vector" || (source.type === "vector"
+	            && source.type === otherSource.type
+	            && source.promoteId === otherSource.promoteId
+	            && source.scheme === otherSource.scheme);
+	        return baseEqual && rasterEqual && rasterDemEqual && vectorEqual;
+	    };
 	    /**
 	     * Updates the source info to convert the tiles to url strings.
 	     * @param sourceDef The original source info.
@@ -62192,39 +62287,52 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var _this = this;
 	        if (sources) {
 	            Object.keys(sources).forEach(function (sourceId) {
+	                var sourceToAdd = sources[sourceId];
+	                var newSource;
+	                if (sourceToAdd.type === "vector") {
+	                    newSource = new FundamentalMapSource(sourceId, {
+	                        name: sourceId,
+	                        tiles: sourceToAdd.tiles,
+	                        type: "vector",
+	                        url: sourceToAdd.url
+	                    });
+	                }
+	                else if (sourceToAdd.type === "raster") {
+	                    newSource = new FundamentalMapSource(sourceId, {
+	                        name: sourceId,
+	                        tiles: sourceToAdd.tiles,
+	                        type: "raster",
+	                        url: sourceToAdd.url
+	                    });
+	                }
+	                else {
+	                    // Do not throw for the source of unknown type.
+	                    // throw new Error(`Unable to construct source with ID ${sourceId}.`);
+	                    // no other handling for the source we don't sync into the state here
+	                    return;
+	                }
 	                if (!_this.sources.has(sourceId)) {
-	                    var sourceToAdd = sources[sourceId];
-	                    if (sourceToAdd.type === "vector") {
-	                        var newSource = new FundamentalMapSource(sourceId, {
-	                            name: sourceId,
-	                            tiles: sourceToAdd.tiles,
-	                            type: "vector",
-	                            url: sourceToAdd.url
-	                        });
-	                        _this.sources.set(sourceId, newSource);
-	                        newSource._setMap(_this.map);
-	                    }
-	                    else if (sourceToAdd.type === "raster") {
-	                        var newSource = new FundamentalMapSource(sourceId, {
-	                            name: sourceId,
-	                            tiles: sourceToAdd.tiles,
-	                            type: "raster",
-	                            url: sourceToAdd.url
-	                        });
-	                        _this.sources.set(sourceId, newSource);
-	                        newSource._setMap(_this.map);
-	                    }
-	                    else {
-	                        throw new Error("Unable to construct source with ID " + sourceId + ".");
-	                    }
+	                    _this.sources.set(sourceId, newSource);
+	                    newSource._setMap(_this.map);
 	                }
-	            });
-	            Object.keys(this.sources).forEach(function (sourceId) {
-	                if (!sources.hasOwnProperty(sourceId)) {
-	                    _this.sources.get(sourceId)._setMap(null);
-	                    _this.sources.delete(sourceId);
+	                else if (_this.sources.has(sourceId) && !_this.sources.get(sourceId)._isDeepEqual(newSource)) {
+	                    // source with same id but different properties: update
+	                    _this.sources.set(sourceId, newSource);
+	                    newSource._setMap(_this.map, false);
 	                }
 	            });
+	            // counter-intuitive: below is a bug and will do nothing since Object.keys(this.sources) will always return [], it should rather be: 
+	            //   Array.from(this.sources.keys()).forEach(sourceId => {
+	            // however, we have seen the first party users are compensating for this with their code containing explicit azm.sources.remove but not containing the check for existing
+	            // such removal will cause the exception, since the source would already be removed 
+	            //
+	            // given this bug was here historically, we keep the removal unfixed here (already fixed in v3) to make sure we don't cause any unintented side effects for existing users
+	            // Object.keys(this.sources).forEach(sourceId => {
+	            //     if (!sources.hasOwnProperty(sourceId)) {
+	            //         this.sources.get(sourceId)._setMap(null);
+	            //         this.sources.delete(sourceId);
+	            //     }
+	            // });
 	        }
 	    };
 	    return SourceManager;
@@ -62366,7 +62474,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$4 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$5 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -62441,7 +62549,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            }
 	            finally { if (e_1) throw e_1.error; }
 	        }
-	        return _super.prototype.merge.apply(this, __spreadArray$4([], __read$a(valuesList)));
+	        return _super.prototype.merge.apply(this, __spreadArray$5([], __read$a(valuesList)));
 	    };
 	    return CameraBoundsOptions;
 	}(Options));
@@ -62930,7 +63038,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$5 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$6 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -63050,6 +63158,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	         * @deprecated use `view` instead.
 	         */
 	        _this.userRegion = _this.view;
+	        /**
+	         * allows substituting a default MapControl's style transformer with custom one
+	         * Default style transformer is meant to update the incoming fetched style to desired state, as well as to synchronize the SDK state with style state
+	         * and move additional layers over
+	         * @internal
+	         */
+	        _this.customStyleTransform = undefined;
 	        return _this;
 	    }
 	    /**
@@ -63089,7 +63204,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            finally { if (e_1) throw e_1.error; }
 	        }
 	        // Then execute the standard merge behavior.
-	        return _super.prototype.merge.apply(this, __spreadArray$5([], __read$b(valueList)));
+	        return _super.prototype.merge.apply(this, __spreadArray$6([], __read$b(valueList)));
 	    };
 	    return StyleOptions;
 	}(Options));
@@ -63147,7 +63262,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$6 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$7 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -63382,10 +63497,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        // won't change default behavior in Options as usually that's what desired
 	        // instead capture it here and reassign.
 	        var currentTransforms = this._transformers;
-	        var transformersToMerge = valueList ? valueList.filter(function (value) { return value !== undefined; }).reduce(function (flattened, value) { return __spreadArray$6(__spreadArray$6([], __read$c(flattened)), __read$c(value._transformers || [])); }, []) : [];
+	        var transformersToMerge = valueList ? valueList.filter(function (value) { return value !== undefined; }).reduce(function (flattened, value) { return __spreadArray$7(__spreadArray$7([], __read$c(flattened)), __read$c(value._transformers || [])); }, []) : [];
 	        // Then execute the standard merge behavior.
 	        // If subscription key auth method isn't being used then the subscription key property should be undefined.
-	        var merged = _super.prototype.merge.apply(this, __spreadArray$6([], __read$c(valueList)));
+	        var merged = _super.prototype.merge.apply(this, __spreadArray$7([], __read$c(valueList)));
 	        if (merged.authOptions.authType !== exports.AuthenticationType.subscriptionKey) {
 	            merged["subscription-key"] = merged.subscriptionKey = undefined;
 	        }
@@ -63397,7 +63512,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (merged.mapConfiguration && typeof merged.mapConfiguration !== 'string') {
 	            merged.mapConfiguration = __assign$7(__assign$7({}, merged.mapConfiguration), { defaultConfiguration: merged.mapConfiguration.defaultConfiguration || merged.mapConfiguration['defaultStyle'], configurations: merged.mapConfiguration.configurations || merged.mapConfiguration['styles'] });
 	        }
-	        this._transformers = __spreadArray$6(__spreadArray$6([], __read$c(currentTransforms || [])), __read$c(transformersToMerge.filter(function (toMerge) { return !currentTransforms.includes(toMerge); })));
+	        this._transformers = __spreadArray$7(__spreadArray$7([], __read$c(currentTransforms || [])), __read$c(transformersToMerge.filter(function (toMerge) { return !currentTransforms.includes(toMerge); })));
 	        if (this.transformRequest && !this._transformers.includes(this.transformRequest)) {
 	            this._transformers.push(this.transformRequest);
 	        }
@@ -63645,7 +63760,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$7 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$8 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -63698,7 +63813,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            var deferredLayers = Object.entries(layerGroupLayers).reduce(function (deferred, _a) {
 	                var _b = __read$d(_a, 2), groupName = _b[0], layers = _b[1];
 	                var isInInitialLayerGroup = validInitLayerGroups.includes(groupName);
-	                return __spreadArray$7(__spreadArray$7([], __read$d(deferred)), __read$d(layers.filter(function (layer) {
+	                return __spreadArray$8(__spreadArray$8([], __read$d(deferred)), __read$d(layers.filter(function (layer) {
 	                    var _a;
 	                    // Exclude custom layers
 	                    if (layer.type === 'custom')
@@ -63750,13 +63865,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            };
 	            _this.map.events.addOnce('load', _this._progressiveLoadingState.pendingVisibilityChange);
 	        };
-	        this._onStyleData = function () {
-	            _this._lookUpAsync(_this.map.getStyle()).then(function (style) {
-	                _this.map.events.invoke("stylechanged", {
-	                    style: style.name,
-	                    map: _this.map,
-	                    type: "stylechanged"
-	                });
+	        this._onStyleData = function (definition) {
+	            _this.map.events.invoke("stylechanged", {
+	                style: definition.name,
+	                map: _this.map,
+	                type: "stylechanged"
 	            });
 	        };
 	        /**
@@ -63863,7 +63976,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            return baseName in styleNamesMap ? styleNamesMap[baseName] : baseName;
 	        };
 	        if (!this.serviceOptions.mapConfiguration) {
-	            newPromise = new HijackablePromise(this._request(this.serviceOptions.staticAssetsDomain, constants.stylePath + "/" + constants.styleResourcePath, "StyleDefinitions", { version: this.serviceOptions.styleDefinitionsVersion }).then(function (definitions) { return ({
+	            var ensureAuthentication = this.map.authentication ? this.map.authentication.initialize() : Promise.resolve();
+	            newPromise = new HijackablePromise(ensureAuthentication.then(function () { return _this._request(_this.serviceOptions.staticAssetsDomain, constants.stylePath + "/" + constants.styleResourcePath, "StyleDefinitions", { version: _this.serviceOptions.styleDefinitionsVersion }).then(function (definitions) { return ({
 	                version: isNaN(definitions.version) ? 0 : parseFloat(definitions.version),
 	                defaultConfiguration: definitions.defaultStyle,
 	                configurations: definitions.styles
@@ -63902,12 +64016,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                        protocol: "https"
 	                    }).toString(),
 	                }); })
-	            }); }));
+	            }); }); }));
 	        }
 	        else if (typeof this.serviceOptions.mapConfiguration === 'string') {
-	            newPromise = new HijackablePromise(this._request(this.serviceOptions.domain, constants.styleResourcePath + "/mapconfigurations/metadata/" + this.serviceOptions.mapConfiguration, "StyleDefinitions"
+	            var ensureAuthentication = this.map.authentication ? this.map.authentication.initialize() : Promise.resolve();
+	            newPromise = new HijackablePromise(ensureAuthentication.then(function () { return _this._request(_this.serviceOptions.domain, constants.styleResourcePath + "/mapconfigurations/metadata/" + _this.serviceOptions.mapConfiguration, "StyleDefinitions"
 	            // reassign properties from legacy mapConfiguration to new structure if needed
-	            ).then(function (definitions) { return (__assign$8(__assign$8({}, definitions), { defaultConfiguration: definitions.defaultConfiguration || definitions['defaultStyle'], configurations: definitions.configurations || definitions['styles'] })); }));
+	            ).then(function (definitions) { return (__assign$8(__assign$8({}, definitions), { defaultConfiguration: definitions.defaultConfiguration || definitions['defaultStyle'], configurations: definitions.configurations || definitions['styles'] })); }); }));
 	        }
 	        else {
 	            newPromise = HijackablePromise.resolve(this.serviceOptions.mapConfiguration);
@@ -63938,23 +64053,183 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (styleDefinition.style) {
 	            return styleDefinition.style;
 	        }
-	        throw Error("Style definition does not contain neither URL nor style object.");
+	        throw Error("Style definition neither contains URL nor style object.");
+	    };
+	    StyleManager.prototype.deriveNewStyleAndLayerGroups = function (previousStyle, nextStyle) {
+	        var _a, _b, _c, _d, _e, _f;
+	        // Layers in the next style with default properties that do not align with current StyleOptions
+	        // should be modified before they are applied to the map.
+	        var styleOptions = this.map.getStyle();
+	        var trafficOptions = this.map.getTraffic();
+	        var layersGroups = {};
+	        for (var i = 0; i < nextStyle.layers.length; i++) {
+	            var nextLayer = nextStyle.layers[i];
+	            var layerGroup = LayerGroupComparator.getLayerGroup(nextLayer);
+	            if (!layerGroup) {
+	                layersGroups[nextLayer.id] = [nextLayer];
+	                continue;
+	            }
+	            if (!layersGroups[layerGroup]) {
+	                layersGroups[layerGroup] = [];
+	            }
+	            var layerGroupLayers = layersGroups[layerGroup];
+	            layerGroupLayers.push(nextLayer);
+	            // 1. Set visiblity of fill-extrusion layers according to StyleOptions.showBuildingModels
+	            if (!styleOptions.showBuildingModels && nextLayer.type === "fill-extrusion") {
+	                nextLayer.layout = (_a = nextLayer.layout) !== null && _a !== void 0 ? _a : {};
+	                nextLayer.layout.visibility = "none";
+	            }
+	            else if (nextLayer.type === "fill-extrusion") {
+	                nextLayer.layout = (_b = nextLayer.layout) !== null && _b !== void 0 ? _b : {};
+	                nextLayer.layout.visibility = "visible";
+	            }
+	            // 2. Set visibility of traffic layers depending on traffic settings.
+	            if (trafficOptions.flow !== "none" && layerGroup) {
+	                if (layerGroup === "traffic_" + trafficOptions.flow && nextLayer.type == "line") {
+	                    nextLayer.layout = (_c = nextLayer.layout) !== null && _c !== void 0 ? _c : {};
+	                    nextLayer.layout.visibility = "visible";
+	                }
+	            }
+	            // 3. Set visibility of labels
+	            var isLabelLayerGroup = layerGroup === 'labels' || layerGroup === 'labels_places' || layerGroup === 'labels_indoor';
+	            if (isLabelLayerGroup && nextLayer.type === 'symbol') {
+	                if (styleOptions.showLabels && ((_d = nextLayer.layout) === null || _d === void 0 ? void 0 : _d.visibility) !== "none") {
+	                    nextLayer.layout = (_e = nextLayer.layout) !== null && _e !== void 0 ? _e : {};
+	                    nextLayer.layout.visibility = "visible";
+	                }
+	                else {
+	                    nextLayer.layout = (_f = nextLayer.layout) !== null && _f !== void 0 ? _f : {};
+	                    nextLayer.layout.visibility = "none";
+	                }
+	            }
+	        }
+	        return [nextStyle, layersGroups];
+	    };
+	    StyleManager.prototype.injectUserLayersIntoStyle = function (previousStyle, nextStyle, layerGroupLayers) {
+	        // Custom layers added to mapbox through this SDK should be carried over to the next style.
+	        return !previousStyle
+	            ? nextStyle
+	            : this.map.layers._getUserLayers().reduce(function (style, userLayer) {
+	                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 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(); });
+	                if (existingLayerIdx > -1) {
+	                    nextStyle.layers.splice(existingLayerIdx, 1);
+	                }
+	                if (layer) {
+	                    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;
+	                    if (insertIdx > -1) {
+	                        style.layers.splice(insertIdx, 0, layer);
+	                    }
+	                    else {
+	                        style.layers.push(layer);
+	                    }
+	                    sourcesToCopy.forEach(function (_a) {
+	                        var source = _a.source, id = _a.id;
+	                        style.sources[id] = source;
+	                    });
+	                }
+	                return style;
+	            }, __assign$8({}, nextStyle));
 	    };
 	    /**
 	     * @internal
 	     */
 	    StyleManager.prototype.setStyle = function (styleOptions, diff) {
+	        var _this = this;
 	        if (diff === void 0) { diff = true; }
-	        try {
-	            this.map._getMap().setStyle(this.getStyle(styleOptions), {
-	                diff: diff,
-	                stylePatch: this._stylePatch.bind(this),
-	                validate: this.serviceOptions.validateStyle
-	            });
+	        var transformStyleFunc;
+	        var targetDefinition = this._lookUp(styleOptions);
+	        if (!targetDefinition) {
+	            throw Error("Style definition " + styleOptions.style + " is not available.");
+	        }
+	        if (!targetDefinition.url && !targetDefinition.style) {
+	            throw Error("Style definition neither contains URL nor style object.");
+	        }
+	        var styleDataCallback = function () { return _this._onStyleData(targetDefinition); };
+	        var patchStyleEvent = function () {
+	            // FIXME: below diffing will be soon fixed on the maplibre side
+	            // If there was a previous styledata change event attached, remove it.
+	            // When the sprite url changes between style changes then maplibre can't perform the diff
+	            // In such cases it recalculate the style again. Removing previous attached 
+	            // event listener makes sure that style changed event is not fired twice in these cases.
+	            _this.map.events.remove("styledata", styleDataCallback);
+	            _this.map.events.addOnce("styledata", styleDataCallback);
+	        };
+	        if (styleOptions && styleOptions.customStyleTransform) {
+	            transformStyleFunc = function (prev, next) {
+	                var target = styleOptions.customStyleTransform(prev, next);
+	                patchStyleEvent();
+	                return target;
+	            };
 	        }
-	        catch (e) {
-	            throw e;
+	        else {
+	            transformStyleFunc = function (previousStyle, style) {
+	                // make sure we always have a shallow clone to prevent mutating explicit json(rather then url) styles being set
+	                var nextStyle = __assign$8(__assign$8({}, style), { layers: __spreadArray$8([], __read$d(style.layers)), sources: __assign$8({}, style.sources) });
+	                var shouldProgressiveLoading = (styleOptions.progressiveLoading &&
+	                    // The feature only effective at the initial load.
+	                    !_this.map._isLoaded());
+	                // Shallow-clone the style object and duplicate layer.layout properties to avoid side-effects.
+	                if (shouldProgressiveLoading && Array.isArray(style === null || style === void 0 ? void 0 : style.layers)) {
+	                    nextStyle = __assign$8({}, style);
+	                    nextStyle.layers = nextStyle.layers.map(function (layer) {
+	                        var nextLayer = __assign$8({}, layer);
+	                        if (layer.layout) {
+	                            nextLayer.layout = __assign$8({}, layer.layout);
+	                        }
+	                        return nextLayer;
+	                    });
+	                }
+	                // 1. derive the base new style (without user layers) and layer groups
+	                var _a = __read$d(_this.deriveNewStyleAndLayerGroups(previousStyle, nextStyle), 2), targetStyle = _a[0], layerGroupLayers = _a[1];
+	                // 2. side effect: progressively render map layers to the canvas to shorten the time to the first meaningful render.
+	                if (shouldProgressiveLoading) {
+	                    var initLayerGroups = styleOptions.progressiveLoadingInitialLayerGroups;
+	                    if (Array.isArray(initLayerGroups) && initLayerGroups.length > 0) {
+	                        _this._deferLayerGroupVisibilities(layerGroupLayers, initLayerGroups);
+	                    }
+	                }
+	                // 3. copy user layers and sources from previous style into new one
+	                var targetStyleWithUserLayers = _this.injectUserLayersIntoStyle(previousStyle, targetStyle, layerGroupLayers);
+	                // 4. side effects: sync our control's LayerManager and SourceManager
+	                var nextFundamentalLayers = Object.entries(layerGroupLayers).map(function (_a) {
+	                    var _b = __read$d(_a, 2), layerGroupId = _b[0], layers = _b[1];
+	                    return _this._buildFundamentalLayerFrom(layers, layerGroupId);
+	                });
+	                var layerIndex = _this.map.layers._getUserLayers().reduce(function (layerIndex, userLayer) {
+	                    var layerInsertIndex = userLayer.before ? layerIndex.findIndex(function (layer) { return layer.getId() === userLayer.before; }) : -1;
+	                    if (layerInsertIndex > -1) {
+	                        layerIndex.splice(layerInsertIndex, 0, userLayer.layer);
+	                    }
+	                    else {
+	                        layerIndex.push(userLayer.layer);
+	                    }
+	                    return layerIndex;
+	                }, nextFundamentalLayers);
+	                _this.map.layers['layerIndex'] = layerIndex;
+	                _this.map.sources._syncSources(targetStyleWithUserLayers.sources);
+	                // 5. temporarily patch style data event
+	                patchStyleEvent();
+	                return targetStyleWithUserLayers;
+	            };
 	        }
+	        this.map._getMap().setStyle(targetDefinition.url || targetDefinition.style, {
+	            diff: diff,
+	            validate: this.serviceOptions.validateStyle,
+	            transformStyle: transformStyleFunc
+	        });
 	    };
 	    /**
 	     * Gets the color theme (light/dark) for the style type specified by the style options.
@@ -64019,135 +64294,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    StyleManager.prototype.clearStyleSet = function () {
 	        this.unsetIndoorState();
 	    };
-	    /**
-	     * Function invoked by mapbox after a style is fetched but before it is committed to the map state.
-	     *
-	     * @param previousStyle The current style.
-	     * @param nextStyle The next style which is to be applied.
-	     * @param preserveLayer Preserve a layer from the previous style in the next style.
-	     * @param updatePaintProperty Modify paint properties of a layer in the next style before the style is applied.
-	     * @param updateLayoutProperty Modify layout properties of a layer in the next style before the style is applied.
-	     * @param updateFilter Modify filter property of a layer in the next style before the style is applied.
-	     */
-	    StyleManager.prototype._stylePatch = function (previousStyle, nextStyle, preserveLayer, updatePaintProperty, updateLayoutProperty, updateFilter) {
-	        var _this = this;
-	        // Layers in the next style with default properties that do not align with current StyleOptions
-	        // should be modified before they are applied to the map.
-	        var styleOptions = this.map.getStyle();
-	        var trafficOptions = this.map.getTraffic();
-	        var shouldProgressiveLoading = (styleOptions.progressiveLoading &&
-	            // The feature only effective at the initial load.
-	            !this.map._isLoaded());
-	        var setLayerVisibility = function (layer, visibility) {
-	            var _a;
-	            if (!shouldProgressiveLoading) {
-	                // No need to apply the visibility change to maplibre while progressive loading is enabled.
-	                // This can save a lot of CPU time.
-	                updateLayoutProperty(layer.id, 'visibility', visibility);
-	            }
-	            layer.layout = (_a = layer.layout) !== null && _a !== void 0 ? _a : {};
-	            layer.layout.visibility = visibility;
-	        };
-	        var layerGroupLayers = {};
-	        nextStyle.layers.forEach(function (nextLayer) {
-	            var _a;
-	            var layerGroup = LayerGroupComparator.getLayerGroup(nextLayer);
-	            if (layerGroup) {
-	                // Set visibility of fill-extrusion layers according to StyleOptions.showBuildingModels
-	                if (nextLayer.type === 'fill-extrusion') {
-	                    setLayerVisibility(nextLayer, styleOptions.showBuildingModels ? 'visible' : 'none');
-	                }
-	                // Set visibility of traffic layers depending on traffic settings.
-	                if (trafficOptions.flow !== 'none' && nextLayer.type == 'line' &&
-	                    (layerGroup === "traffic_" + trafficOptions.flow ||
-	                        // Check if deprecated flow types are used and the layer is a bing-traffic layer.
-	                        // Needed for backwards compatibility in Bing styles to support deprecated flow types.
-	                        (['absolute', 'relative-delay'].includes(trafficOptions.flow) && nextLayer['source'] === "bing-traffic"))) {
-	                    setLayerVisibility(nextLayer, 'visible');
-	                }
-	                // Set visibility of labels
-	                var isLabelLayerGroup = layerGroup === 'labels' || layerGroup === 'labels_places' || layerGroup === 'labels_indoor';
-	                if (isLabelLayerGroup && nextLayer.type === 'symbol') {
-	                    var isLayerVisible = ((_a = nextLayer.layout) === null || _a === void 0 ? void 0 : _a.visibility) !== 'none';
-	                    setLayerVisibility(nextLayer, isLayerVisible && styleOptions.showLabels ? 'visible' : 'none');
-	                }
-	                // Once this _stylePatch returns control to maplibre the next style will be applied immediately in the same context.
-	                // To avoid potential data races update LayerManager with new a new set of FundamentalMapLayers from here instead of 
-	                // waiting for a styledata.load event to trigger a sync in a different context.
-	                if (layerGroupLayers[layerGroup]) {
-	                    layerGroupLayers[layerGroup].push(nextLayer);
-	                }
-	                else {
-	                    layerGroupLayers[layerGroup] = [nextLayer];
-	                }
-	            }
-	        });
-	        if (shouldProgressiveLoading) {
-	            var initLayerGroups = styleOptions.progressiveLoadingInitialLayerGroups;
-	            if (Array.isArray(initLayerGroups) && initLayerGroups.length > 0) {
-	                this._deferLayerGroupVisibilities(layerGroupLayers, initLayerGroups);
-	            }
-	        }
-	        // A FundamentalMapLayer (grouped layer) representation of the next style must be built.
-	        var previousLayers = this.map.layers.getLayers();
-	        var nextLayers = Object.entries(layerGroupLayers).map(function (_a) {
-	            var _b = __read$d(_a, 2), layerGroupName = _b[0], layerGroupMapboxLayers = _b[1];
-	            return _this._buildFundamentalLayerFrom(layerGroupMapboxLayers, layerGroupName);
-	        });
-	        // Update FundamentalMapLayers in LayerManager
-	        var userLayers = this.map.layers._getUserLayers();
-	        var layersToRemove = previousLayers.filter(function (c) {
-	            return (nextLayers.findIndex(function (n) { return c.getId() === n.getId(); }) < 0 &&
-	                userLayers.findIndex(function (n) { return c.getId() === n.layer.getId(); }) < 0);
-	        });
-	        var prevNextIntersection = nextLayers.filter(function (n) { return previousLayers.find(function (c) { return c.getId() === n.getId(); }); });
-	        var ePrevNextIntersection = prevNextIntersection.entries();
-	        var replace = ePrevNextIntersection.next();
-	        nextLayers.forEach(function (newFundamentalLayer) {
-	            if (replace.value && replace.value[1].getId() === newFundamentalLayer.getId()) {
-	                // Replace the existing layer with this ID with the new one.
-	                var insertBefore = previousLayers.findIndex(function (l) { return l.getId() === newFundamentalLayer.getId(); });
-	                _this.map.layers.remove(newFundamentalLayer.getId());
-	                _this.map.layers.add(newFundamentalLayer, previousLayers[insertBefore].getId());
-	                replace = ePrevNextIntersection.next();
-	            }
-	            else {
-	                if (replace.value) {
-	                    // Insert new layer before the next common layer.
-	                    _this.map.layers.add(newFundamentalLayer, replace.value[1]);
-	                }
-	                else {
-	                    _this.map.layers.add(newFundamentalLayer);
-	                }
-	            }
-	        });
-	        layersToRemove.forEach(function (layer) {
-	            _this.map.layers.remove(layer);
-	        });
-	        // Layers added to mapbox through this SDK since loading the last style should be
-	        // carried over to the next style.
-	        userLayers.forEach(function (userLayer) {
-	            if (userLayer.layer instanceof WebGLLayer) {
-	                // mapbox custom layers cannot be serialized and preserved,
-	                // return to continue to the next user layer.
-	                return;
-	            }
-	            var before = undefined;
-	            if (_this.map.layers.getLayerById(userLayer.before)) {
-	                var beforeCandidates = _this.map.layers.getLayerById(userLayer.before)._buildLayers();
-	                before = (beforeCandidates.length > 0) ? beforeCandidates[0] : undefined;
-	            }
-	            preserveLayer(userLayer.layer.getId(), before === null || before === void 0 ? void 0 : before.id);
-	            _this.map.layers.move(userLayer.layer, userLayer.before);
-	        });
-	        this.map.sources._syncSources(nextStyle.sources);
-	        // If there was a previous styledata change event attached, remove it.
-	        // When the sprite url changes between style changes then mapbox can't perform the diff
-	        // In such cases it recalculate the style again. Removing previous attached 
-	        // event listener makes sure that style changed event is not fired twice in these cases.
-	        this.map.events.remove("styledata", this._onStyleData);
-	        this.map.events.addOnce("styledata", this._onStyleData);
-	    };
 	    StyleManager.prototype._buildFundamentalLayerFrom = function (layers, id) {
 	        if (layers && layers.length > 0) {
 	            var newLayer = new FundamentalMapLayer(layers, id);
@@ -64451,7 +64597,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$8 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$9 = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -64574,6 +64720,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                showLogo: _this.styleOptions.showLogo,
 	                customAttribution: _this.styleOptions.customAttribution
 	            });
+	            _this.controls.add(_this.copyrightControl, {
+	                position: exports.ControlPosition.NonFixed
+	            });
 	            // Initialize state of map
 	            // --> Initialize the authentication manager
 	            var authManInit = _this.authentication ?
@@ -64601,17 +64750,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            _this.map.showTileBoundaries = _this.styleOptions.showTileBoundaries;
 	            _this.localizedStringsPromise = Localizer.getStrings(_this.styleOptions.language);
 	            authManInit
-	                .then(function () { return _this.styles.initStyleset(); })
+	                // reuses this.styles.initPromise if initStyleset is already called
+	                .then(function () { return _this.styles.definitions(); })
 	                .then(function (definitions) {
 	                // Check that the map hasn't been removed for any reason.
 	                // If so no need to finish styling the map.
 	                if (_this.removed) {
 	                    return;
 	                }
-	                // Add controls after initStyleset to prevent redundant initStyleset calls
-	                _this.controls.add(_this.copyrightControl, {
-	                    position: exports.ControlPosition.NonFixed
-	                });
 	                if (_this.authentication && !_this.authentication.getToken()) {
 	                    throw new Error("AuthenticationManager finished initializing, but no token is available");
 	                }
@@ -64669,6 +64815,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	        return _this;
 	    }
+	    Object.defineProperty(Map.prototype, "isDisposed", {
+	        /**
+	         * Returns true if the map has been disposed.
+	         */
+	        get: function () {
+	            return this.removed;
+	        },
+	        enumerable: false,
+	        configurable: true
+	    });
 	    /**
 	     * Returns the HTMLCanvasElement that the map is drawn to.
 	     */
@@ -64705,9 +64861,17 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        else {
 	            this.accessibleMapDelegate.removeFromMap();
 	        }
-	        if (this.styles.serviceOptions.mapConfiguration !== this.serviceOptions.mapConfiguration) {
+	        var shouldReloadStyle = this.styles.serviceOptions.mapConfiguration !== this.serviceOptions.mapConfiguration
+	            || this.styles.serviceOptions.staticAssetsDomain !== this.serviceOptions.staticAssetsDomain
+	            || this.styles.serviceOptions.styleDefinitionsVersion !== this.serviceOptions.styleDefinitionsVersion
+	            || this.styles.serviceOptions.domain !== this.serviceOptions.domain
+	            || this.styles.serviceOptions.styleAPIVersion !== this.serviceOptions.styleAPIVersion;
+	        // NOTE: only perform a reload when the style dependent properties are changed
+	        //|| this.styles.serviceOptions.validateStyle !== this.serviceOptions.validateStyle
+	        //|| this.styles.serviceOptions.transformRequest !== this.serviceOptions.transformRequest
+	        this.styles.serviceOptions = this.serviceOptions;
+	        if (shouldReloadStyle) {
 	            this.styles.initPromise = null;
-	            this.styles.serviceOptions.mapConfiguration = this.serviceOptions.mapConfiguration;
 	            this.setStyle({});
 	        }
 	    };
@@ -65259,7 +65423,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            urls = layer.getOptions().subdomains || [];
 	        }
 	        // Add the tile urls to the layer, but don't update the map yet.
-	        urls.push.apply(urls, __spreadArray$8([], __read$e(tileSources)));
+	        urls.push.apply(urls, __spreadArray$9([], __read$e(tileSources)));
 	        layer._setOptionsNoUpdate({
 	            subdomains: urls
 	        });
@@ -65780,7 +65944,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    }
 	    return ar;
 	};
-	var __spreadArray$9 = (window && window.__spreadArray) || function (to, from) {
+	var __spreadArray$a = (window && window.__spreadArray) || function (to, from) {
 	    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 	        to[j] = from[i];
 	    return to;
@@ -65926,7 +66090,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            lineLength = 50;
 	        }
 	        var lines = c.split(/<(tr|div|br|li|h[0-9]|p>)/);
-	        longestStringLength = Math.max.apply(Math, __spreadArray$9([], __read$f((lines.map(function (el) { return el.replace(/<[a-zA-Z0-9\s=\/]+>/g, "").length; }))))) - 1;
+	        longestStringLength = Math.max.apply(Math, __spreadArray$a([], __read$f((lines.map(function (el) { return el.replace(/<[a-zA-Z0-9\s=\/]+>/g, "").length; }))))) - 1;
 	        var w = Math.ceil(longestStringLength * 3.5);
 	        if (w < width) {
 	            width = w;