azure-maps-control 2.2.6 → 2.3.0

package/dist/atlas-core-bare-snr.js

@@ -265,7 +265,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.
@@ -645,7 +645,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");
@@ -654,11 +653,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);
@@ -4436,6 +4433,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.
              */
@@ -4449,6 +4452,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);
@@ -4554,6 +4562,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);
         };
@@ -4613,7 +4624,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;
@@ -4721,7 +4743,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);
@@ -9999,7 +10028,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
@@ -10011,7 +10040,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) {
@@ -10283,19 +10312,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;
@@ -10616,6 +10650,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
          */
@@ -10897,6 +10952,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));
 
@@ -11188,11 +11263,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;
@@ -11265,6 +11370,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).
      */
@@ -11279,45 +11389,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
                             };
@@ -11332,14 +11457,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*/];
                 });
@@ -11392,18 +11523,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
@@ -11456,6 +11640,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));
 
@@ -12539,7 +12734,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;
@@ -12614,7 +12809,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;
             }
@@ -15308,7 +15503,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;
@@ -15445,7 +15640,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;
             }
@@ -16116,10 +16311,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);
             }
@@ -16196,7 +16392,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;
@@ -17308,7 +17504,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);
                         }
                     }
                 }
@@ -17798,10 +17994,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));
                 }
             });
         };
@@ -17835,7 +18036,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;
@@ -17896,10 +18097,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; });
@@ -17907,7 +18110,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 {
@@ -18118,9 +18323,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 = [];
         };
@@ -18271,7 +18478,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 {
@@ -18560,6 +18767,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.
@@ -18856,39 +19094,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;
@@ -19030,7 +19281,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;
@@ -19105,7 +19356,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));
@@ -19594,7 +19845,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;
@@ -19714,6 +19965,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;
         }
         /**
@@ -19753,7 +20011,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));
@@ -19811,7 +20069,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;
@@ -20046,10 +20304,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;
             }
@@ -20061,7 +20319,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);
             }
@@ -20309,7 +20567,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;
@@ -20362,7 +20620,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')
@@ -20414,13 +20672,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"
                 });
             };
             /**
@@ -20527,7 +20783,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
@@ -20566,12 +20823,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);
@@ -20602,23 +20860,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.
@@ -20683,135 +21101,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);
@@ -21115,7 +21404,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;
@@ -21238,6 +21527,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 ?
@@ -21265,17 +21557,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");
                     }
@@ -21333,6 +21622,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.
          */
@@ -21369,9 +21668,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({});
             }
         };
@@ -21923,7 +22230,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
             });
@@ -22444,7 +22751,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;
@@ -22590,7 +22897,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;