azure-maps-control 2.2.2 → 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.2";
+    var version = "2.3.0";
 
     /**
      * A helper class that provides methods for getting various forms of the map controls current version.
@@ -306,27 +306,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         var tooltipContent = document.createElement("span");
         tooltipContent.innerText = name;
         tooltipContent.classList.add('tooltiptext');
-        // mimics default edge tooltip theming
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            tooltipContent.classList.add('dark');
-        }
-        var themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        var onThemeChange = function (e) {
-            var isDark = e.matches;
-            if (isDark && !tooltipContent.classList.contains('dark')) {
-                tooltipContent.classList.add('dark');
-            }
-            else if (!isDark && tooltipContent.classList.contains('dark')) {
-                tooltipContent.classList.remove('dark');
-            }
-        };
-        // compensate for browsers where MediaQueryList is not derived from EventTarget (pre iOS13 Safari)
-        if (typeof themeQuery.addEventListener === 'function') {
-            themeQuery.addEventListener('change', function (e) { return onThemeChange(e); });
-        }
-        else if (typeof themeQuery.addListener === 'function') {
-            themeQuery.addListener(function (e) { return onThemeChange(e); });
-        }
         if (navigator.userAgent.indexOf('Edg') != -1) {
             tooltipContent.classList.add('edge');
         }
@@ -666,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");
@@ -675,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);
@@ -4457,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.
              */
@@ -4470,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);
@@ -4514,6 +4501,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 }
             });
             container.addEventListener("focusout", function (event) {
+                if (event.target === currStyleButton) {
+                    // on focusout from reveal button -> reset the tabIndex on the styleOpsGrid elements that could have been set to -1 on esc key press
+                    Array.from(styleOpsGrid.children).forEach(function (e) { return e.removeAttribute('tabIndex'); });
+                }
                 if (!(event.relatedTarget instanceof Node && container.contains(event.relatedTarget))) {
                     _this.hasFocus = false;
                     if (!_this.hasMouse) {
@@ -4528,6 +4519,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 if (event.keyCode === 27) {
                     event.stopPropagation();
                     currStyleButton.focus();
+                    Array.from(styleOpsGrid.children).forEach(function (e) { return e.setAttribute('tabIndex', "-1"); });
                     if (container.classList.contains(StyleControl.Css.inUse)) {
                         container.classList.remove(StyleControl.Css.inUse);
                         styleOpsGrid.classList.add("hidden-accessible-element");
@@ -4570,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);
         };
@@ -4629,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;
@@ -4737,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);
@@ -10015,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
@@ -10027,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) {
@@ -10120,6 +10133,72 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 
     var cloneDeepWith_1 = cloneDeepWith;
 
+    /**
+     * A hidden HTML element that is used to provide accessibility to shapes such as bubble.
+     */
+    var AccessibleIndicator = /** @class */ (function () {
+        /**
+         * Constructs an AccessibleIndicator object by initializing a hidden `div` element.
+         * @internal
+         */
+        function AccessibleIndicator(options) {
+            var _this = this;
+            /**
+             * Attaches the indicator to the HTML document in a hidden style.
+             * @param map The map.
+             */
+            this.attach = function (map) {
+                // If attaching to a different map, remove popup on current map
+                if (_this.map !== map) {
+                    // If map was defined the indicator was attached to another map.
+                    if (_this.map) {
+                        _this.detachFromCurrentMap();
+                    }
+                    _this.map = map;
+                    _this.map.indicators._getCollectionDiv().appendChild(_this.element);
+                    _this.map.indicators.add(_this);
+                }
+            };
+            /**
+             * Removes the indicator from the map and the HTML document.
+            */
+            this.remove = function () {
+                _this.detachFromCurrentMap();
+                _this.element.remove();
+            };
+            /**
+             * Get the DOM element of the indicator.
+             * @returns The DOM element of the indicator.
+             */
+            this.getElement = function () {
+                return _this.element;
+            };
+            this.detachFromCurrentMap = function () {
+                if (_this.map) {
+                    _this.map.indicators.remove(_this);
+                    delete _this.map;
+                }
+            };
+            this.element = document.createElement("div");
+            // Set tabindex to 0 to make the element focusable.
+            this.element.setAttribute("tabindex", "0");
+            // Set the role to option, and it's container to listbox so the reader will read the listbox as a list.
+            // For example, NVDA will read "data point, {posinset} of {setsize}" when the indicator is focused.
+            this.element.setAttribute("role", "option");
+            if (options === null || options === void 0 ? void 0 : options.setSize)
+                this.element.setAttribute("aria-setsize", options.setSize.toString());
+            if (options === null || options === void 0 ? void 0 : options.positionInSet)
+                this.element.setAttribute("aria-posinset", options.positionInSet.toString());
+            this.element.setAttribute("aria-label", "data point");
+            this.element.classList.add(AccessibleIndicator.Css.hidden);
+        }
+        // CSS class names.
+        AccessibleIndicator.Css = {
+            hidden: "hidden-accessible-element"
+        };
+        return AccessibleIndicator;
+    }());
+
     var __extends$k = (window && window.__extends) || (function () {
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
@@ -10233,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;
@@ -10566,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
          */
@@ -10847,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));
 
@@ -10978,7 +11103,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         // and can be used to determine which events are ours vs Mapbox's.
         Layer.LayerEvents = {
             layeradded: undefined,
-            layerremoved: undefined
+            layerremoved: undefined,
+            focusin: undefined,
+            focusout: undefined,
         };
         return Layer;
     }(EventEmitter));
@@ -11133,6 +11260,44 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
              * @default 8
              */
             _this.radius = 8;
+            /**
+             * @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;
@@ -11153,6 +11318,63 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
         };
     })();
+    var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    };
+    var __generator$1 = (window && window.__generator) || function (thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    };
+    var __read$3 = (window && window.__read) || function (o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    };
+    var __spreadArray = (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).
      */
@@ -11166,6 +11388,93 @@ 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 = [];
+            /** @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;
+                        var indicator = new AccessibleIndicator({ positionInSet: idx + 1, setSize: renderedShapes.length });
+                        var element = indicator.getElement();
+                        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 (i) { return i !== indicator; }).forEach(function (indicator) { return indicator.remove(); });
+                            // insert previous and next popups
+                            if (idx - 1 >= 0) {
+                                insertHiddenBefore(indicator, createIndicator(renderedShapes, idx - 1));
+                            }
+                            if (idx + 1 < renderedShapes.length) {
+                                attach(createIndicator(renderedShapes, 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]);
+                            }
+                            var focusEvent = {
+                                target: element,
+                                type: 'focusin',
+                                map: _this.map,
+                                shape: curRenderedShape,
+                                originalEvent: event,
+                                pixel: pixel
+                            };
+                            _this._invokeEvent('focusin', focusEvent);
+                        });
+                        element.addEventListener('focusout', function (event) {
+                            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: curRenderedShape,
+                                originalEvent: event,
+                                pixel: pixel
+                            };
+                            _this._invokeEvent('focusout', focusEvent);
+                        });
+                        _this.accessibleIndicator.push(indicator);
+                        return indicator;
+                    };
+                    insertHiddenBefore = function (base, toInsert) {
+                        toInsert.attach(_this.map);
+                        var elementToSwapIn = toInsert.getElement();
+                        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 (renderedShapes.length > 0) {
+                        attach(createIndicator(renderedShapes, 0));
+                    }
+                    if (renderedShapes.length > 1) {
+                        attach(createIndicator(renderedShapes, renderedShapes.length - 1));
+                    }
+                    return [2 /*return*/];
+                });
+            }); };
             _this.options = new BubbleLayerOptions().merge(cloneDeepWith_1(options, BubbleLayerOptions._cloneCustomizer));
             _this.options.source = source || _this.options.source;
             return _this;
@@ -11213,6 +11522,73 @@ 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) {
+                // 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);
+                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
          */
@@ -11264,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));
 
@@ -12331,7 +12718,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     };
-    var __read$3 = (window && window.__read) || function (o, n) {
+    var __read$4 = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -12347,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;
@@ -12422,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$3(valueList)));
+            var merged = _super.prototype.merge.apply(this, __spreadArray$1([], __read$4(valueList)));
             if (isNewColorSet) {
                 merged.fillPattern = undefined;
             }
@@ -13753,7 +14140,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
         };
     })();
-    var __read$4 = (window && window.__read) || function (o, n) {
+    var __read$5 = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -13865,7 +14252,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
              */
             _this._onDown = function (event) {
                 _this.map.popups._addDraggedPopup(_this);
-                var _a = __read$4(_this.map.positionsToPixels([_this.options.position]), 1), anchorPixel = _a[0];
+                var _a = __read$5(_this.map.positionsToPixels([_this.options.position]), 1), anchorPixel = _a[0];
                 if (event.type === "mousedown") {
                     event = event;
                     _this.dragOffset = [
@@ -14029,7 +14416,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 pixel[0] + this.dragOffset[0],
                 pixel[1] + this.dragOffset[1]
             ];
-            var _a = __read$4(this.map.pixelsToPositions([anchorPixel]), 1), anchorPos = _a[0];
+            var _a = __read$5(this.map.pixelsToPositions([anchorPixel]), 1), anchorPos = _a[0];
             this.options.position = anchorPos;
             this.marker.setLngLat(this.options.position);
             this._invokeEvent("drag", { type: "drag", target: this });
@@ -14183,7 +14570,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 posY = pt.y;
             }
             else {
-                var _a = __read$4(map.positionsToPixels([options.position]), 1), _b = __read$4(_a[0], 2), x = _b[0], y = _b[1];
+                var _a = __read$5(map.positionsToPixels([options.position]), 1), _b = __read$5(_a[0], 2), x = _b[0], y = _b[1];
                 posX = x;
                 posY = y;
             }
@@ -14672,6 +15059,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 defaultRegion: {
                     code: "NGT",
                     strings: "en/resource.json"
+                },
+                latn: {
+                    code: "NGT-Latn",
+                    strings: "en/resource.json"
                 }
             },
             ar: {
@@ -14718,6 +15109,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 us: {
                     code: "en-US",
                     strings: "en/resource.json"
+                },
+                au: {
+                    code: "en-AU",
+                    strings: "en/resource.json"
+                },
+                gb: {
+                    code: "en-GB",
+                    strings: "en/resource.json"
+                },
+                nz: {
+                    code: "en-NZ",
+                    strings: "en/resource.json"
                 }
             },
             es: {
@@ -14843,14 +15246,31 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 }
             },
             zh: {
+                // per https://microsoft.sharepoint.com/sites/globalreadiness/SitePages/Language-fallback.aspx
+                // Chinese - Neutral (zh) fallbacks to en-US
                 defaultRegion: {
-                    code: "zh-Hant",
-                    strings: "zh-tw/resource.json"
+                    code: "zh",
+                    strings: "en/resource.json"
+                }
+            },
+            "zh-hans": {
+                defaultRegion: {
+                    code: "zh-Hans",
+                    strings: "zh-cn/resource.json"
+                },
+                cn: {
+                    code: "zh-Hans-CN",
+                    strings: "zh-cn/resource.json"
                 }
             },
             "zh-hant": {
+                // per discussion with global readiness team, we were explicitly asked to not fallback zh-hant to zh-tw
                 defaultRegion: {
                     code: "zh-Hant",
+                    strings: "en/resource.json"
+                },
+                tw: {
+                    code: "zh-Hant-TW",
                     strings: "zh-tw/resource.json"
                 }
             }
@@ -15067,7 +15487,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
         };
     })();
-    var __read$5 = (window && window.__read) || function (o, n) {
+    var __read$6 = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -15083,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;
@@ -15220,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$5(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;
             }
@@ -15479,7 +15899,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
     /**
      * Specifies which set of geopolitically disputed borders and labels are displayed on the map. The View parameter (also referred to as “user region parameter”) is a 2-letter ISO-3166 Country Code that will show the correct maps for that country/region. Country/Regions that are not on the View list or if unspecified will default to the “Unified” View.
      * Please see the supported [Views]{@link https://aka.ms/AzureMapsLocalizationViews }.
-     * It is your responsibility to determine the location of your users, and then set the View parameter correctly for that location. The View parameter in Azure Maps must be used in compliance with applicable laws, including those regarding mapping, of the country where maps, images and other data and third party content that You are authorized to access via Azure Maps is made available.
+     * It is your responsibility to determine the location of your users, and then set the View parameter correctly for that location. The View parameter in Azure Maps must be used in compliance with applicable laws, including those regarding mapping, of the country/region where maps, images and other data and third party content that You are authorized to access via Azure Maps is made available.
      * @param view The new default view
      */
     function setView(view) {
@@ -15891,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);
             }
@@ -15919,7 +16340,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         return __assign$4.apply(this, arguments);
     };
 
-    var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    var __awaiter$2 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
             function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15928,7 +16349,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
     };
-    var __generator$1 = (window && window.__generator) || function (thisArg, body) {
+    var __generator$2 = (window && window.__generator) || function (thisArg, body) {
         var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
         return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
         function verb(n) { return function (v) { return step([n, v]); }; }
@@ -15955,7 +16376,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
         }
     };
-    var __read$6 = (window && window.__read) || function (o, n) {
+    var __read$7 = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -15971,6 +16392,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         }
         return ar;
     };
+    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;
+    };
 
     /**
      * @private
@@ -16107,14 +16533,17 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 var trafficOptions = _this.map.getTraffic();
                 if (trafficOptions.flow !== "none") {
                     var trafficFlowComponent = _this.map.layers.getLayerById("traffic_" + trafficOptions.flow);
+                    if (!trafficFlowComponent && ['absolute', 'relative-delay'].includes(trafficOptions.flow)) {
+                        // Fallback to relative if deprecated flow type is used
+                        trafficFlowComponent = _this.map.layers.getLayerById("traffic_relative");
+                    }
                     if (trafficFlowComponent) {
-                        _this.lastFlowMode = trafficOptions.flow;
+                        _this.lastFlowMode = trafficFlowComponent.getId().replace("traffic_", "");
                         trafficFlowComponent._updateLayoutProperty("visibility", "visible", "none");
                     }
                 }
             };
             this.removeFromMap = function () {
-                var trafficOptions = _this.map.getTraffic();
                 if (_this.lastFlowMode != "none") {
                     var trafficFlowComponent = _this.map.layers.getLayerById("traffic_" + _this.lastFlowMode);
                     if (trafficFlowComponent) {
@@ -16848,7 +17277,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     };
-    var __read$7 = (window && window.__read) || function (o, n) {
+    var __read$8 = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -17046,7 +17475,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             var callbacks = new Dictionary(this.mapCallbackHandler.getEventCallbacks(eventType, layer));
             if (callbacks) {
                 callbacks.forEach(function (_a, callback) {
-                    var _b = __read$7(_a, 2), _ = _b[0], once = _b[1];
+                    var _b = __read$8(_a, 2), _ = _b[0], once = _b[1];
                     // Invoking a listener this way circumvents the fire once logic in the modified callback.
                     // So we check if the callback was added as a fire once and if so remove it here.
                     if (once) {
@@ -17075,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);
                         }
                     }
                 }
@@ -17154,7 +17583,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 eventDict.forEach(function (callbackDict, eventType) {
                     callbackDict.forEach(function (_a) {
                         var e_6, _b;
-                        var _c = __read$7(_a, 1), modifiedCallback = _c[0];
+                        var _c = __read$8(_a, 1), modifiedCallback = _c[0];
                         try {
                             for (var _d = __values$a(layer._getLayerIds()), _e = _d.next(); !_e.done; _e = _d.next()) {
                                 var mbLayerId = _e.value;
@@ -17187,7 +17616,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 eventDict.forEach(function (callbackDict, eventType) {
                     callbackDict.forEach(function (_a) {
                         var e_7, _b;
-                        var _c = __read$7(_a, 1), modifiedCallback = _c[0];
+                        var _c = __read$8(_a, 1), modifiedCallback = _c[0];
                         try {
                             for (var _d = __values$a(layer._getLayerIds()), _e = _d.next(); !_e.done; _e = _d.next()) {
                                 var mbLayerId = _e.value;
@@ -17565,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));
                 }
             });
         };
@@ -17586,7 +18020,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     };
-    var __read$8 = (window && window.__read) || function (o, n) {
+    var __read$9 = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -17602,7 +18036,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$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;
@@ -17663,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; });
@@ -17674,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 {
@@ -17885,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 = [];
         };
@@ -18038,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$2([], __read$8(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 {
@@ -18327,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.
@@ -18623,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;
@@ -18781,7 +19265,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     };
-    var __read$9 = (window && window.__read) || function (o, n) {
+    var __read$a = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -18797,7 +19281,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$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;
@@ -18872,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$3([], __read$9(valuesList)));
+            return _super.prototype.merge.apply(this, __spreadArray$5([], __read$a(valuesList)));
         };
         return CameraBoundsOptions;
     }(Options));
@@ -19345,7 +19829,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     };
-    var __read$a = (window && window.__read) || function (o, n) {
+    var __read$b = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -19361,7 +19845,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$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;
@@ -19472,7 +19956,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             /**
              * Specifies which set of geopolitically disputed borders and labels are displayed on the map. The View parameter (also referred to as “user region parameter”) is a 2-letter ISO-3166 Country Code that will show the correct maps for that country/region. Country/Regions that are not on the View list or if unspecified will default to the “Unified” View.
              * Please see the supported [Views]{@link https://aka.ms/AzureMapsLocalizationViews}
-             * It is your responsibility to determine the location of your users, and then set the View parameter correctly for that location. The View parameter in Azure Maps must be used in compliance with applicable laws, including those regarding mapping, of the country where maps, images and other data and third party content that You are authorized to access via Azure Maps is made available.
+             * It is your responsibility to determine the location of your users, and then set the View parameter correctly for that location. The View parameter in Azure Maps must be used in compliance with applicable laws, including those regarding mapping, of the country/region where maps, images and other data and third party content that You are authorized to access via Azure Maps is made available.
              * default: `undefined`
              * @default undefined
              */
@@ -19481,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;
         }
         /**
@@ -19520,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$4([], __read$a(valueList)));
+            return _super.prototype.merge.apply(this, __spreadArray$6([], __read$b(valueList)));
         };
         return StyleOptions;
     }(Options));
@@ -19562,7 +20053,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     };
-    var __read$b = (window && window.__read) || function (o, n) {
+    var __read$c = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -19578,7 +20069,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$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;
@@ -19813,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$5(__spreadArray$5([], __read$b(flattened)), __read$b(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$5([], __read$b(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;
             }
@@ -19828,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$5(__spreadArray$5([], __read$b(currentTransforms || [])), __read$b(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);
             }
@@ -20024,7 +20515,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         return __assign$8.apply(this, arguments);
     };
-    var __awaiter$2 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
             function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20033,7 +20524,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
     };
-    var __generator$2 = (window && window.__generator) || function (thisArg, body) {
+    var __generator$3 = (window && window.__generator) || function (thisArg, body) {
         var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
         return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
         function verb(n) { return function (v) { return step([n, v]); }; }
@@ -20060,7 +20551,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
         }
     };
-    var __read$c = (window && window.__read) || function (o, n) {
+    var __read$d = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -20076,7 +20567,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$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;
@@ -20103,6 +20594,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
              * Preserve the map configuration that was used before the indoor map configuration was set
              */
             this.preservedPreindoorMapConfiguration = undefined;
+            /**
+             * The state of the progressive loading
+             */
+            this._progressiveLoadingState = {
+                mapStyle: undefined,
+                pendingVisibilityChange: undefined,
+            };
             this._deferLayerGroupVisibilities = function (layerGroupLayers, initLayerGroups) {
                 var validInitLayerGroups = initLayerGroups.filter(function (groupName) { return groupName in layerGroupLayers; });
                 // If the initial layer groups are invalid, skip the progressive loading.
@@ -20110,11 +20608,19 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     return;
                 var map = _this.map._getMap();
                 var currentZoomLevel = map.getZoom();
-                // Select the layers to be deferred
+                var currentMapStyle = _this.map.getStyle().style;
+                // Cancel and release previous pending callback, if any.
+                if (_this._progressiveLoadingState.pendingVisibilityChange) {
+                    _this.map.events.remove('load', _this._progressiveLoadingState.pendingVisibilityChange);
+                    _this._progressiveLoadingState.pendingVisibilityChange = null;
+                }
+                // Keep the current map style for future comparison.
+                _this._progressiveLoadingState.mapStyle = currentMapStyle;
+                // Select deferrable layers
                 var deferredLayers = Object.entries(layerGroupLayers).reduce(function (deferred, _a) {
-                    var _b = __read$c(_a, 2), groupName = _b[0], layers = _b[1];
+                    var _b = __read$d(_a, 2), groupName = _b[0], layers = _b[1];
                     var isInInitialLayerGroup = validInitLayerGroups.includes(groupName);
-                    return __spreadArray$6(__spreadArray$6([], __read$c(deferred)), __read$c(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')
@@ -20137,30 +20643,40 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                                 return false;
                             }
                         }
-                        // Defer visible layers only.
+                        // Select visible layers only.
                         return ((_a = layer.layout) === null || _a === void 0 ? void 0 : _a.visibility) !== 'none';
                     })));
                 }, []);
-                // Hide the deferred layers at initial load, therefore we can save the render time.
+                // Hide the deferrable layers at initial load, therefore we can save the render time.
                 deferredLayers.forEach(function (layer) {
+                    // Since this happens before sending style object into the map rendering,
+                    // we only need to update the style object, but not necessary to update maplibre's layout properties.
                     layer.layout = layer.layout || {};
                     layer.layout.visibility = 'none';
                 });
-                // Make the deferred layers visible once the map instance is fully loaded
-                _this.map.events.addOnce('load', function () {
+                // Make the deferred layers visible once the map instance is fully loaded.
+                _this._progressiveLoadingState.pendingVisibilityChange = function () {
+                    // Release the callback.
+                    _this._progressiveLoadingState.pendingVisibilityChange = null;
+                    // Bail out the callback once map style has changed.
+                    var nextMapStyle = _this.map.getStyle().style;
+                    if (currentMapStyle !== nextMapStyle)
+                        return;
+                    // Make deferred layers visible
                     deferredLayers.forEach(function (layer) {
+                        // This happens after the map rendering; Therefore, we need to update
+                        // both the style object and the maplibre's layout properties.
                         layer.layout.visibility = 'visible';
                         map.setLayoutProperty(layer.id, 'visibility', 'visible');
                     });
-                });
+                };
+                _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"
                 });
             };
             /**
@@ -20183,9 +20699,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                         || definitions.configurations[0];
                 }
             };
-            this._lookUpAsync = function (options) { return __awaiter$2(_this, void 0, void 0, function () {
+            this._lookUpAsync = function (options) { return __awaiter$3(_this, void 0, void 0, function () {
                 var definitions, result;
-                return __generator$2(this, function (_a) {
+                return __generator$3(this, function (_a) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, this.definitions()];
                         case 1:
@@ -20267,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
@@ -20294,19 +20811,25 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                             domain: _this.serviceOptions.staticAssetsDomain,
                             path: constants.stylePath + "/" + constants.styleResourcePath + "/" + style.name,
                             queryParams: {
-                                styleVersion: _this.serviceOptions.styleDefinitionsVersion,
+                                // Use the style version from the API response if it's available,
+                                // otherwise fallback to the version specified in the serviceOptions.
+                                // This is needed for flight testing the 2023-01-01 style version.
+                                styleVersion: definitions.version !== undefined && definitions.version !== null
+                                    ? definitions.version
+                                    : _this.serviceOptions.styleDefinitionsVersion
                                 // thus far we don't need to differentiate based on parameter here, as stylePatch will be called on cached styles as well 
                                 //language: styleOptions.language
                             },
                             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);
@@ -20337,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.
@@ -20366,8 +21049,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             return style.theme.toLowerCase();
         };
         StyleManager.prototype.getThemeAsync = function (styleOptions) {
-            return __awaiter$2(this, void 0, void 0, function () {
-                return __generator$2(this, function (_a) {
+            return __awaiter$3(this, void 0, void 0, function () {
+                return __generator$3(this, function (_a) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, this._lookUpAsync(styleOptions)];
                         case 1: return [2 /*return*/, (_a.sent()).theme];
@@ -20418,145 +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();
-            // force a replacement of language placeholder in the tileset url to avoid resolution to a same cache with placeholders on language change
-            nextStyle.sources = Object.entries(nextStyle.sources).reduce(function (newSources, _a) {
-                var _b = __read$c(_a, 2), sourceKey = _b[0], source = _b[1];
-                var newSource = __assign$8({}, source);
-                if ('url' in newSource && typeof newSource.url === 'string') {
-                    if (newSource.url.includes(constants.languagePlaceHolder)) {
-                        newSource.url = newSource.url.replace(constants.languagePlaceHolder, styleOptions.language);
-                    }
-                }
-                newSources[sourceKey] = newSource;
-                return newSources;
-            }, {});
-            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' &&
-                        layerGroup === "traffic_" + trafficOptions.flow &&
-                        nextLayer.type == 'line') {
-                        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$c(_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);
@@ -20597,27 +21141,30 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          * Fetches a json resource at the specified domain and path.
          */
         StyleManager.prototype._request = function (domain, path, resourceType, customQueryParams) {
-            var _a;
+            var _a, _b;
             if (customQueryParams === void 0) { customQueryParams = {}; }
-            return __awaiter$2(this, void 0, void 0, function () {
+            return __awaiter$3(this, void 0, void 0, function () {
                 var requestParams, fetchOptions;
-                var _b;
-                return __generator$2(this, function (_c) {
-                    switch (_c.label) {
+                var _c;
+                return __generator$3(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             requestParams = {
                                 url: new Url({
                                     protocol: "https",
                                     domain: domain,
                                     path: path,
-                                    queryParams: __assign$8((_b = {}, _b[constants.apiVersionQueryParameter] = this.serviceOptions.styleAPIVersion, _b), customQueryParams)
+                                    queryParams: __assign$8((_c = {}, _c[constants.apiVersionQueryParameter] = this.serviceOptions.styleAPIVersion, 
+                                    // Generate a hash code to avoid cache conflict
+                                    // TODO: Remove this once style version 2023-01-01 is publicly available
+                                    _c.hash = StyleManager._hashCode((_a = this.map.authentication) === null || _a === void 0 ? void 0 : _a.getToken()), _c), customQueryParams)
                                 }).toString()
                             };
                             if (typeof this.serviceOptions.transformRequest === "function" && resourceType) {
                                 // If a transformRequest(...) was specified use it.
                                 requestParams = this.serviceOptions.transformRequest(requestParams.url, resourceType);
                             }
-                            (_a = this.map.authentication) === null || _a === void 0 ? void 0 : _a.signRequest(requestParams);
+                            (_b = this.map.authentication) === null || _b === void 0 ? void 0 : _b.signRequest(requestParams);
                             fetchOptions = {
                                 method: "GET",
                                 mode: "cors",
@@ -20634,11 +21181,26 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                                         throw new Error("HTTP " + response.status + ": " + response.statusText + " ");
                                     }
                                 })];
-                        case 1: return [2 /*return*/, _c.sent()];
+                        case 1: return [2 /*return*/, _d.sent()];
                     }
                 });
             });
         };
+        /**
+         * A basic helper function to generate a hash from an input string.
+         */
+        StyleManager._hashCode = function (str) {
+            if (str === void 0) { str = ""; }
+            var chr, hash = 0;
+            if (!str)
+                return hash;
+            for (var i = 0; i < str.length; i++) {
+                chr = str.charCodeAt(i);
+                hash = (hash << 5) - hash + chr;
+                hash |= 0; // Convert to 32bit integer
+            }
+            return hash;
+        };
         return StyleManager;
     }());
 
@@ -20647,6 +21209,123 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
      */
     var isHMREnabled = function () { return 'ENVIRONMENT' in window && !!window['ENVIRONMENT']['hmr']; };
 
+    var __values$j = (window && window.__values) || function(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m) return m.call(o);
+        if (o && typeof o.length === "number") return {
+            next: function () {
+                if (o && i >= o.length) o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    };
+    /**
+     * @internal
+     * A manager for the map control's hidden indicators.
+     * Exposed through the `indicators` property of the `atlas.Map` class.
+     * Cannot be instantiated by the user.
+     */
+    var AccessibleIndicatorManager = /** @class */ (function () {
+        /**
+         * Constructs the indicator manager to be exposed only through the `indicators` property of the `Map` class.
+         * @param map The map whose indicators are being managed by this.
+         * @internal
+         */
+        function AccessibleIndicatorManager(map) {
+            this.map = map;
+            this.indicators = new Set();
+        }
+        /**
+         * Adds an indicator to the map
+         * @param indicator The indicator(s) to add.
+         */
+        AccessibleIndicatorManager.prototype.add = function (indicator) {
+            var e_1, _a;
+            indicator = Array.isArray(indicator) ? indicator : [indicator];
+            try {
+                for (var indicator_1 = __values$j(indicator), indicator_1_1 = indicator_1.next(); !indicator_1_1.done; indicator_1_1 = indicator_1.next()) {
+                    var i = indicator_1_1.value;
+                    if (!this.indicators.has(i)) {
+                        this.indicators.add(i);
+                        i.attach(this.map);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (indicator_1_1 && !indicator_1_1.done && (_a = indicator_1.return)) _a.call(indicator_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        /**
+         * Removes all indicators from the map.
+         */
+        AccessibleIndicatorManager.prototype.clear = function () {
+            var _this = this;
+            this.indicators.forEach(function (indicator) {
+                _this.indicators.delete(indicator);
+                indicator.remove();
+            });
+        };
+        /**
+         * Removes an indicator from the map
+         * @param indicator The indicator(s) to remove.
+         */
+        AccessibleIndicatorManager.prototype.remove = function (indicator) {
+            var e_2, _a;
+            indicator = Array.isArray(indicator) ? indicator : [indicator];
+            try {
+                for (var indicator_2 = __values$j(indicator), indicator_2_1 = indicator_2.next(); !indicator_2_1.done; indicator_2_1 = indicator_2.next()) {
+                    var i = indicator_2_1.value;
+                    if (this.indicators.has(i)) {
+                        this.indicators.delete(i);
+                        i.remove();
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (indicator_2_1 && !indicator_2_1.done && (_a = indicator_2.return)) _a.call(indicator_2);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+        /**
+         * Returns the indicators currently attached to the map.
+         */
+        AccessibleIndicatorManager.prototype.getIndicators = function () {
+            return Array.from(this.indicators);
+        };
+        /**
+         * Returns the div element that should contain all the indicator containers.
+         * Creates it if it doesn't already exist.
+         * @internal
+         */
+        AccessibleIndicatorManager.prototype._getCollectionDiv = function () {
+            var collection = this.map.getMapContainer()
+                .querySelector("." + AccessibleIndicatorManager.Css.collection);
+            if (!collection) {
+                // If the collection div doesn't exist create it.
+                collection = document.createElement("div");
+                collection.setAttribute("aria-label", "map data");
+                // Set the container role to listbox, and the descents' role to option, so the reader will read the listbox as a list.
+                // For example, NVDA will read "data point, 1 of 1" when the indicator is focused.
+                collection.setAttribute("role", "listbox");
+                collection.classList.add(AccessibleIndicatorManager.Css.collection);
+                this.map.getMapContainer().appendChild(collection);
+            }
+            return collection;
+        };
+        AccessibleIndicatorManager.Css = {
+            collection: "accessible-indicator-collection-container"
+        };
+        return AccessibleIndicatorManager;
+    }());
+
     var __extends$18 = (window && window.__extends) || (function () {
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
@@ -20673,7 +21352,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         return __assign$9.apply(this, arguments);
     };
-    var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
             function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20682,7 +21361,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
     };
-    var __generator$3 = (window && window.__generator) || function (thisArg, body) {
+    var __generator$4 = (window && window.__generator) || function (thisArg, body) {
         var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
         return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
         function verb(n) { return function (v) { return step([n, v]); }; }
@@ -20709,7 +21388,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
         }
     };
-    var __read$d = (window && window.__read) || function (o, n) {
+    var __read$e = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -20725,12 +21404,12 @@ 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$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;
     };
-    var __values$j = (window && window.__values) || function(o) {
+    var __values$k = (window && window.__values) || function(o) {
         var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
         if (m) return m.call(o);
         if (o && typeof o.length === "number") return {
@@ -20836,6 +21515,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 _this.markers = new HtmlMarkerManager(_this);
                 _this.sources = new SourceManager(_this);
                 _this.popups = new PopupManager(_this);
+                _this.indicators = new AccessibleIndicatorManager(_this);
                 // Add CSS classes and set attributes for DOM elements.
                 _this.map.getContainer().classList.add(Map.Css.container);
                 _this.map.getCanvasContainer().classList.add(Map.Css.canvasContainer);
@@ -20876,9 +21556,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 _this._setAutoResize(_this.styleOptions.autoResize);
                 _this.map.showTileBoundaries = _this.styleOptions.showTileBoundaries;
                 _this.localizedStringsPromise = Localizer.getStrings(_this.styleOptions.language);
-                var stylesInit = _this.styles.initStyleset();
-                Promise.all([authManInit, stylesInit]).then(function (_a) {
-                    var _b = __read$d(_a, 2), _ = _b[0], definitions = _b[1];
+                authManInit
+                    // 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) {
@@ -20908,7 +21589,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     _this.events.invoke("error", errorData);
                 });
                 // --> Set initial camera state of map
-                _this.setCamera(__assign$9(__assign$9({}, options), { type: "jump", duration: 0 }));
+                _this.setCamera(__assign$9(__assign$9({ 
+                    // Default minZoom to ensure the map doesn't zoom out to unsupported zoom levels.
+                    minZoom: 1 }, options), { type: "jump", duration: 0 }));
                 _this.flowDelegate = new FlowServiceDelegate(_this);
                 _this.accessibleMapDelegate = new AccessibleMapDelegate(_this);
                 _this.userInteractionDelegate = new UserInteractionDelegate(_this, options);
@@ -20939,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.
          */
@@ -20975,6 +21668,19 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             else {
                 this.accessibleMapDelegate.removeFromMap();
             }
+            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.setStyle({});
+            }
         };
         /**
          * Adds request transformer
@@ -21003,6 +21709,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 if (!mapboxCameraOptions) {
                     throw new Error("The map cannot be fit to the current canvas with the given CameraBoundsOptions.");
                 }
+                if ('pitch' in options) {
+                    mapboxCameraOptions.pitch = options.pitch;
+                }
+                if ('bearing' in options) {
+                    mapboxCameraOptions.bearing = options.bearing;
+                }
                 this.map.setMaxZoom(cameraBoundsOptions.maxZoom);
                 this._invokeEvent("maxzoomchanged", this.map.getMaxZoom());
                 maxBounds = this._generateSafeBounds(cameraBoundsOptions.maxBounds);
@@ -21125,8 +21837,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             // If this function is restructured such that a styledata event won't always trigger
             // if the language is changed, then either those delegates need changed
             // or the styledata event manually invoked.
+            var noDiffOnLanguageViewChange = diff && (this.styleOptions.language === newOptions.language && this.styleOptions.view === newOptions.view);
             this.styleOptions = newOptions;
-            this._setStyleComponents(newOptions, diff);
+            this._setStyleComponents(newOptions, noDiffOnLanguageViewChange);
         };
         /**
          * Returns the map control's current style settings.
@@ -21517,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$7([], __read$d(tileSources)));
+            urls.push.apply(urls, __spreadArray$9([], __read$e(tileSources)));
             layer._setOptionsNoUpdate({
                 subdomains: urls
             });
@@ -21539,7 +22252,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         Map.prototype.removeLayers = function (layerNames) {
             var e_1, _a;
             try {
-                for (var layerNames_1 = __values$j(layerNames), layerNames_1_1 = layerNames_1.next(); !layerNames_1_1.done; layerNames_1_1 = layerNames_1.next()) {
+                for (var layerNames_1 = __values$k(layerNames), layerNames_1_1 = layerNames_1.next(); !layerNames_1_1.done; layerNames_1_1 = layerNames_1.next()) {
                     var layerName = layerNames_1_1.value;
                     // Previously calling removeLayers for layers that didn't exist in the map just did nothing.
                     // Now, LayerManager will throw an error, so we need to check if the layer exists before calling remove.
@@ -21681,14 +22394,19 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             this.layers.clear();
             this.sources.clear();
             this.markers.clear();
+            this.indicators.clear();
         };
         /**
          * Clean up the map's resources. Map will not function correctly after calling this method.
          */
         Map.prototype.dispose = function () {
+            var _a;
             this.clear();
             this.map.remove();
+            (_a = this.authentication) === null || _a === void 0 ? void 0 : _a.dispose();
             this.removed = true;
+            // Remove event listeners
+            window.removeEventListener("resize", this._windowResizeCallback);
             while (this.getMapContainer().firstChild) {
                 var currChild = this.getMapContainer().firstChild;
                 this.getMapContainer().removeChild(currChild);
@@ -21729,7 +22447,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             var e_2, _a;
             var positions = [];
             try {
-                for (var pixels_1 = __values$j(pixels), pixels_1_1 = pixels_1.next(); !pixels_1_1.done; pixels_1_1 = pixels_1.next()) {
+                for (var pixels_1 = __values$k(pixels), pixels_1_1 = pixels_1.next(); !pixels_1_1.done; pixels_1_1 = pixels_1.next()) {
                     var pixel = pixels_1_1.value;
                     var lngLat = this.map.unproject(pixel);
                     positions.push(new Position(lngLat.lng, lngLat.lat));
@@ -21752,7 +22470,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             var e_3, _a;
             var pixels = [];
             try {
-                for (var positions_1 = __values$j(positions), positions_1_1 = positions_1.next(); !positions_1_1.done; positions_1_1 = positions_1.next()) {
+                for (var positions_1 = __values$k(positions), positions_1_1 = positions_1.next(); !positions_1_1.done; positions_1_1 = positions_1.next()) {
                     var position = positions_1_1.value;
                     var point = this.map.project(position);
                     pixels.push(new Pixel(point.x, point.y));
@@ -21800,8 +22518,8 @@ 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$3(this, void 0, void 0, function () {
-                return __generator$3(this, function (_a) {
+            return __awaiter$4(this, void 0, void 0, function () {
+                return __generator$4(this, function (_a) {
                     this.styles.setStyle(this.styleOptions, diff);
                     this.imageSprite._restoreImages();
                     return [2 /*return*/];
@@ -22017,7 +22735,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         return Map;
     }(EventEmitter));
 
-    var __read$e = (window && window.__read) || function (o, n) {
+    var __read$f = (window && window.__read) || function (o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
         var i = m.call(o), r, ar = [], e;
@@ -22033,7 +22751,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$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;
@@ -22179,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$8([], __read$e((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;