azure-maps-control 2.2.7 → 2.3.1

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.7";
+    var version = "2.3.1";
 
     /**
      * A helper class that provides methods for getting various forms of the map controls current version.
@@ -10312,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;
@@ -10645,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
          */
@@ -10926,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));
 
@@ -11217,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;
@@ -11294,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).
      */
@@ -11308,13 +11389,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;
@@ -11338,9 +11421,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,
@@ -11353,8 +11435,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,
@@ -11441,19 +11523,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
          */
@@ -12599,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;
@@ -12674,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;
             }
@@ -15368,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;
@@ -15505,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;
             }
@@ -16176,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);
             }
@@ -16256,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;
@@ -17858,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));
                 }
             });
         };
@@ -17895,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;
@@ -17956,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; });
@@ -17967,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 {
@@ -18333,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 {
@@ -18622,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.
@@ -18918,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;
@@ -19092,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;
@@ -19167,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));
@@ -19656,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;
@@ -19776,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;
         }
         /**
@@ -19815,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));
@@ -19873,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;
@@ -20108,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;
             }
@@ -20123,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);
             }
@@ -20371,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;
@@ -20424,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')
@@ -20476,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"
                 });
             };
             /**
@@ -20666,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.
@@ -20747,138 +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;
-            // 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);
@@ -21182,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;
@@ -22008,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
             });
@@ -22297,9 +22519,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         Map.prototype._rebuildStyle = function (diff) {
             if (diff === void 0) { diff = true; }
             return __awaiter$4(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator$4(this, function (_a) {
                     this.styles.setStyle(this.styleOptions, diff);
-                    this.imageSprite._restoreImages();
+                    this.events.addOnce("stylechanged", function () { return _this.imageSprite._restoreImages(); });
                     return [2 /*return*/];
                 });
             });
@@ -22529,7 +22752,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;
@@ -22675,7 +22898,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;