azure-maps-control 2.2.7 → 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.7";
+	var version = "2.3.0";
 
 	/**
 	 * A helper class that provides methods for getting various forms of the map controls current version.
@@ -53648,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;
@@ -53981,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
 	     */
@@ -54262,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));
 
@@ -54553,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;
@@ -54630,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).
 	 */
@@ -54644,13 +54582,15 @@ 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 renderedShapes, createIndicator, insertHiddenBefore, insertHiddenInFront, 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 = [];
 	                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;
@@ -54674,9 +54614,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                        if (idx == 0 && renderedShapes.length >= 2) {
 	                            attach(createIndicator(renderedShapes, renderedShapes.length - 1));
 	                        }
-	                        // NOTE: a11y only works for AZM shapes for now. (.id and _azureMapsShapeId required)
-	                        if (bubbleFeature.id !== undefined) {
-	                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.id], '#000000', _this.options.strokeColor]);
+	                        if (accessibilityIdKey !== undefined) {
+	                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', accessibilityIdKey], bubbleFeature.properties[accessibilityIdKey]], '#000000', _this.options.strokeColor]);
 	                        }
 	                        var focusEvent = {
 	                            target: element,
@@ -54689,8 +54628,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                        _this._invokeEvent('focusin', focusEvent);
 	                    });
 	                    element.addEventListener('focusout', function (event) {
-	                        if (bubbleFeature.id !== undefined) {
-	                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.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,
@@ -54777,19 +54716,72 @@ 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 () {
 	        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
 	     */
@@ -55935,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;
@@ -56010,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;
 	        }
@@ -58704,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;
@@ -58841,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;
 	        }
@@ -59512,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);
 	        }
@@ -59592,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;
@@ -61194,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));
 	            }
 	        });
 	    };
@@ -61231,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;
@@ -61292,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; });
@@ -61303,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 {
@@ -61669,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 {
@@ -61958,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.
@@ -62254,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;
@@ -62428,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;
@@ -62503,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));
@@ -62992,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;
@@ -63112,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;
 	    }
 	    /**
@@ -63151,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));
@@ -63209,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;
@@ -63444,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;
 	        }
@@ -63459,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);
 	        }
@@ -63707,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;
@@ -63760,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')
@@ -63812,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"
 	            });
 	        };
 	        /**
@@ -64002,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.
@@ -64083,138 +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;
-	        // Skip the style patch if the map has been disposed.
-	        if (this.map.isDisposed)
-	            return;
-	        // 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.getId(), 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);
@@ -64518,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;
@@ -65344,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
 	        });
@@ -65865,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;
@@ -66011,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;