azure-maps-control 2.1.17 → 3.0.0-preview.1

package/dist/atlas-core-bare.js

@@ -56,15 +56,15 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('azuremaps-maplibre-gl')) :
     typeof define === 'function' && define.amd ? define(['exports', 'azuremaps-maplibre-gl'], factory) :
     (global = global || self, factory(global.atlas = global.atlas || {}, global.maplibregl));
-}(this, (function (exports, mapboxgl) { 'use strict';
+}(this, (function (exports, maplibregl) { 'use strict';
 
-    var mapboxgl__default = 'default' in mapboxgl ? mapboxgl['default'] : mapboxgl;
+    maplibregl = maplibregl && Object.prototype.hasOwnProperty.call(maplibregl, 'default') ? maplibregl['default'] : maplibregl;
 
     var env = {
     	domain: "atlas.microsoft.com",
     	staticAssetsDomain: "atlas.microsoft.com",
     	stylePath: "styling",
-    	styleDefinitionsVersion: "2021-02-01",
+    	styleDefinitionsVersion: "2022-08-05",
     	appInsightsKey: "e96cb745-c6f5-409c-a775-c4313e468c1d",
     	aadInstance: "https://login.microsoftonline.com/"
     };
@@ -343,7 +343,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         return Url;
     }());
 
-    var version = "2.1.17";
+    var version = "3.0.0-preview.1";
 
     /**
      * A helper class that provides methods for getting various forms of the map controls current version.
@@ -4372,7 +4372,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     _this.setSelectedStyle(newStyle);
                 }
             };
-            _this.onStylesetChange = function (definitions) {
+            _this.onMapConfigurationChange = function (definitions) {
                 if (!_this.styleOpsGrid) {
                     return;
                 }
@@ -4380,8 +4380,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 _this.styleButtons.clear();
                 _this.populateOpsGridFromDefinitions(definitions);
             };
-            _this.mapToFriendlyStyleName = function (name, styleset) {
-                var style = styleset.styles.find(function (style) { return style.name === name; });
+            _this.mapToFriendlyStyleName = function (name, mapConfiguration) {
+                var style = mapConfiguration.configurations.find(function (style) { return style.name === name; });
                 return (style === null || style === void 0 ? void 0 : style.displayName) || name;
             };
             _this.options = new StyleControlOptions().merge(cloneDeep_1(options));
@@ -4477,7 +4477,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             this.styleOpsGrid = null;
             this.styleButtons.clear();
             this.map.events.remove("stylechanged", this.onStyleChange);
-            this.map.events.remove("stylesetchanged", this.onStylesetChange);
+            this.map.events.remove("mapconfigurationchanged", this.onMapConfigurationChange);
         };
         /**
          * Set the style that need to be displayed as currently selected.
@@ -4496,8 +4496,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     var _b = __read(_a, 2), buttonStyleName = _b[0], button = _b[1];
                     return button.setAttribute('aria-current', buttonStyleName === styleName ? 'true' : 'false');
                 });
-                this.map.styles.definitions().then(function (styleset) {
-                    var newAlt = _this.mapToFriendlyStyleName(styleName, styleset);
+                this.map.styles.definitions().then(function (mapConfiguration) {
+                    var newAlt = _this.mapToFriendlyStyleName(styleName, mapConfiguration);
                     if (image_1.alt !== newAlt) {
                         image_1.alt = newAlt;
                     }
@@ -4527,10 +4527,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 styleButton.removeAttribute("disabled");
             }
         };
-        StyleControl.prototype.buildSelectStyleBtn = function (name, styleset, fetchIconPromise) {
+        StyleControl.prototype.buildSelectStyleBtn = function (name, mapConfiguration, fetchIconPromise) {
             var _this = this;
             var styleOptionButton = document.createElement("button");
-            var friendlyName = this.mapToFriendlyStyleName(name, styleset);
+            var friendlyName = this.mapToFriendlyStyleName(name, mapConfiguration);
             styleOptionButton.setAttribute("aria-label", friendlyName);
             styleOptionButton.setAttribute("type", "button");
             var styleIconImage = new Image();
@@ -4615,12 +4615,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             // If a style is one of those to be shown by the style picker also create it's element.
             this.map.styles.definitions().then(function (definitions) { return __awaiter(_this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    this.onStylesetChange(definitions);
+                    this.onMapConfigurationChange(definitions);
                     this.map.events.add("stylechanged", this.onStyleChange);
                     return [2 /*return*/];
                 });
             }); });
-            this.map.events.add("stylesetchanged", this.onStylesetChange);
+            this.map.events.add("mapconfigurationchanged", this.onMapConfigurationChange);
             return styleOpsGrid;
         };
         StyleControl.prototype.populateOpsGridFromDefinitions = function (definitions) {
@@ -4628,7 +4628,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (!this.styleOpsGrid) {
                 return;
             }
-            var styles = definitions.styles;
+            var styles = definitions.configurations;
             if (Array.isArray(this.options.mapStyles)) {
                 styles = styles.filter(function (style) { return _this.options.mapStyles.includes(style.name.split("_indoor")[0]); });
             }
@@ -9095,6 +9095,151 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         return MultiPolygon;
     }());
 
+    //Based on: https://github.com/mapbox/mapbox-gl-js/blob/main/src/geo/mercator_coordinate.js
+    /**
+     * A `MercatorPoint` object represents a projected three dimensional position.
+     *
+     * `MercatorPoint` uses the web mercator projection ([EPSG:3857](https://epsg.io/3857)) with slightly different units:
+     * - the size of 1 unit is the width of the projected world instead of the "mercator meter"
+     * - the origin of the coordinate space is at the north-west corner instead of the middle.
+     *
+     * For example, `MercatorPoint(0, 0, 0)` is the north-west corner of the mercator world and
+     * `MercatorPoint(1, 1, 0)` is the south-east corner. If you are familiar with
+     * [vector tiles](https://github.com/mapbox/vector-tile-spec) it may be helpful to think
+     * of the coordinate space as the `0/0/0` tile with an extent of `1`.
+     *
+     * The `z` dimension of `MercatorPoint` is conformal. A cube in the mercator coordinate space would be rendered as a cube.
+     */
+    var MercatorPoint = /** @class */ (function (_super) {
+        __extends(MercatorPoint, _super);
+        /**
+         * Constructs a MercatorPoint.
+         * @param x A points x position in mercator units.
+         * @param y A points y position in mercator units.
+         * @param z A points z position in mercator units.
+         */
+        function MercatorPoint(x, y, z) {
+            return _super.call(this, x, y, z ? z : 0) || this;
+        }
+        /***********************************
+         * Public static functions
+         ***********************************/
+        /**
+         * Converts a position into a mercator point.
+         * @param position Position to convert.
+         * @returns A mercator point.
+         */
+        MercatorPoint.fromPosition = function (position) {
+            if (position.length >= 2) {
+                return new MercatorPoint((180 + position[0]) / 360, MercatorPoint._latToMercatorY(position[1]), position.length >= 3 ? MercatorPoint._altitudeToMercatorZ(position[2], position[1]) : 0);
+            }
+            return [0, 0, 0];
+        };
+        /**
+         * Converts an array of positions into an array of mercator points.
+         * @param positions Array of positions to convert.
+         * @returns An array of  mercator points.
+         */
+        MercatorPoint.fromPositions = function (positions) {
+            var mercators = [];
+            for (var i = 0, len = positions.length; i < len; i++) {
+                mercators.push(this.fromPosition(positions[i]));
+            }
+            return mercators;
+        };
+        /**
+         * Converts an array of positions into a Float32Array of mercator xyz values.
+         * @param positions Array of positions to convert.
+         * @returns A Float32Array of mercator xyz values.
+         */
+        MercatorPoint.toFloat32Array = function (positions) {
+            var arr = new Float32Array(positions.length * 3);
+            for (var i = 0, len = positions.length; i < len; i++) {
+                var idx = i * 3;
+                var p = positions[i];
+                //x
+                arr[idx] = (180 + p[0]) / 360;
+                //y
+                arr[idx + 1] = MercatorPoint._latToMercatorY(p[1]);
+                //z
+                arr[idx + 2] = p.length >= 3 ? MercatorPoint._altitudeToMercatorZ(p[2], p[1]) : 0;
+            }
+            return arr;
+        };
+        /**
+         * Converts a mercator point into a map position.
+         * @param mercator Mercator point to convert.
+         * @returns A map position.
+         */
+        MercatorPoint.toPosition = function (mercator) {
+            if (mercator.length >= 2) {
+                var lat = (360 / Math.PI) * Math.atan(Math.exp(((180 - mercator[1] * 360) * Math.PI) / 180)) - 90;
+                return new Position(mercator[0] * 360 - 180, lat, mercator.length >= 3 ? MercatorPoint._mercatorZToAltitude(mercator[2], mercator[1]) : 0);
+            }
+            return [0, 0, 0];
+        };
+        /**
+         * Converts an array of mercator points into an array of map positions.
+         * @param mercators Mercator points to convert.
+         * @returns An array of map positions.
+         */
+        MercatorPoint.toPositions = function (mercators) {
+            var positions = [];
+            for (var i = 0, len = mercators.length; i < len; i++) {
+                positions.push(this.toPosition(mercators[i]));
+            }
+            return positions;
+        };
+        /**
+         * Determine the Mercator scale factor for a given latitude, see
+         * https://en.wikipedia.org/wiki/Mercator_projection#Scale_factor
+         *
+         * At the equator the scale factor will be 1, which increases at higher latitudes.
+         *
+         * @param latitude Latitude
+         * @returns The mercator scale factor.
+         */
+        MercatorPoint.mercatorScale = function (latitude) {
+            return 1 / Math.cos((latitude * Math.PI) / 180);
+        };
+        /**
+         * Returns the distance of 1 meter in `MercatorPoint` units at this latitude.
+         *
+         * For coordinates in real world units using meters, this naturally provides the scale
+         * to transform into `MercatorPoint`s.
+         *
+         * @returns {number} Distance of 1 meter in `MercatorPoint` units.
+         */
+        MercatorPoint.meterInMercatorUnits = function (latitude) {
+            // 1 meter / circumference at equator in meters * Mercator projection scale factor at this latitude
+            return ((1 / MercatorPoint.earthCircumference) *
+                MercatorPoint.mercatorScale(MercatorPoint._latToMercatorY(latitude)));
+        };
+        /***********************************
+         * Private static functions
+         ***********************************/
+        /*
+         * The circumference at a line of latitude in meters.
+         */
+        MercatorPoint._circumferenceAtLatitude = function (latitude) {
+            return MercatorPoint.earthCircumference * Math.cos((latitude * Math.PI) / 180);
+        };
+        MercatorPoint._altitudeToMercatorZ = function (altitude, latitude) {
+            return altitude / MercatorPoint._circumferenceAtLatitude(latitude);
+        };
+        MercatorPoint._mercatorZToAltitude = function (zoom, y) {
+            return zoom * MercatorPoint._circumferenceAtLatitude(MercatorPoint._latToMercatorY(y));
+        };
+        MercatorPoint._latToMercatorY = function (y) {
+            return (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (y * Math.PI) / 360))) / 360;
+        };
+        /*
+         * The average circumference of the world in meters.
+         */
+        MercatorPoint.earthCircumference = 2 * Math.PI * getEarthRadius(); // meters
+        return MercatorPoint;
+    }(Array));
+
 
 
     var index$1 = /*#__PURE__*/Object.freeze({
@@ -9106,6 +9251,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         Polygon: Polygon,
         Position: Position,
         BoundingBox: BoundingBox,
+        MercatorPoint: MercatorPoint,
         MultiLineString: MultiLineString,
         MultiPoint: MultiPoint,
         MultiPolygon: MultiPolygon,
@@ -9522,6 +9668,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             return this.container;
         };
         ZoomControl.prototype.onRemove = function () {
+            _super.prototype.onRemove.call(this);
             if (this.map) {
                 this.map.events.remove('zoom', this.zoomChanged);
                 this.map.events.remove('minzoomchanged', this.minZoomChanged);
@@ -12389,6 +12536,155 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         return TileLayer;
     }(SourceBuildingLayer));
 
+    /**
+     * Options used to render graphics in a WebGLLayer.
+     */
+    var WebGLLayerOptions = /** @class */ (function (_super) {
+        __extends(WebGLLayerOptions, _super);
+        function WebGLLayerOptions() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            /**
+             * An object that contains the rendering logic.
+             */
+            _this.renderer = undefined;
+            return _this;
+        }
+        return WebGLLayerOptions;
+    }(LayerOptions));
+
+    /**
+     * Enables custom rendering logic with access to the WebGL context of the map.
+     */
+    var WebGLLayer = /** @class */ (function (_super) {
+        __extends(WebGLLayer, _super);
+        /**
+         * Constructs a new WebGLLayer.
+         * @param id The id of the layer. If not specified a random one will be generated.
+         * @param options The options of the WebGL layer.
+         */
+        function WebGLLayer(id, options) {
+            var _this = _super.call(this, id) || this;
+            /**
+             * Make sure the layer is available after a style change.
+             * @internal
+             */
+            _this._onStyleChange = function () {
+                var _a;
+                // Custom layers cannot be serialized and preserved by mapbox.
+                // Add this layer again if the layer was removed by mapbox after a style change.
+                if (!_this.map._getMap().getLayer(_this.id)) {
+                    var map = _this.map;
+                    var before = (_a = _this.map.layers._getUserLayers().find(function (l) { return l.layer.getId() == _this.id; })) === null || _a === void 0 ? void 0 : _a.before;
+                    map.layers.remove(_this);
+                    map.layers.add(_this, before);
+                }
+            };
+            _this.options = new WebGLLayerOptions().merge(cloneDeepWith_1(options, WebGLLayerOptions._cloneCustomizer));
+            _this.source = new DataSource();
+            return _this;
+        }
+        /**
+         * Gets the options of the WebGL layer.
+         */
+        WebGLLayer.prototype.getOptions = function () {
+            // Copy the options so the user can't directly change options.
+            // They must use setOptions(...).
+            return cloneDeepWith_1(this.options, WebGLLayerOptions._cloneCustomizer);
+        };
+        /**
+         * Sets the options of the WebGL layer.
+         * @param options The new options of the WebGL layer.
+         */
+        WebGLLayer.prototype.setOptions = function (options) {
+            var newOptions = new WebGLLayerOptions().merge(this.options, cloneDeepWith_1(options, WebGLLayerOptions._cloneCustomizer));
+            // Trigger a repaint of the map if the layer options have changed.
+            if (this.map) {
+                this.map.triggerRepaint();
+            }
+            this.options = newOptions;
+        };
+        WebGLLayer.prototype.onAdd = function (map) {
+            var _a, _b;
+            _super.prototype.onAdd.call(this, map);
+            // Make sure the layer is available after a style change.
+            this.map.events.add("stylechanged", this._onStyleChange);
+            // Notify the renderer this layer has been added to the map.
+            if (this.options.renderer && this.glContext) {
+                (_b = (_a = this.options.renderer).onAdd) === null || _b === void 0 ? void 0 : _b.call(_a, map, this.glContext);
+            }
+        };
+        WebGLLayer.prototype.onRemove = function () {
+            var _a, _b;
+            // Notify the renderer this layer has been removed from the map.
+            if (this.options.renderer && this.glContext) {
+                (_b = (_a = this.options.renderer).onRemove) === null || _b === void 0 ? void 0 : _b.call(_a, this.map, this.glContext);
+            }
+            // Cleanup
+            this.map.events.remove("stylechanged", this._onStyleChange);
+            this.glContext = null;
+            _super.prototype.onRemove.call(this);
+        };
+        /**
+         * @internal
+         */
+        WebGLLayer.prototype._buildLayers = function () {
+            var _this = this;
+            if (!this.options.renderer) {
+                throw new Error("Cannot build the WebGL layer because renderer was not set.");
+            }
+            return [
+                {
+                    id: this.id,
+                    type: "custom",
+                    renderingMode: this.options.renderer.renderingMode,
+                    onAdd: function (m, gl) {
+                        // Capture the GL context to reuse it later.
+                        // renderer.onAdd will be called in the onAdd callback of this layer.
+                        _this.glContext = gl;
+                    },
+                    onRemove: function (m, gl) {
+                        // renderer.onRemove will be called in the onRemove callback of this layer.
+                    },
+                    prerender: function (gl, matrix) {
+                        var _a, _b;
+                        if (_this._shouldRender()) {
+                            (_b = (_a = _this.options.renderer).prerender) === null || _b === void 0 ? void 0 : _b.call(_a, gl, matrix);
+                        }
+                    },
+                    render: function (gl, matrix) {
+                        if (_this._shouldRender()) {
+                            _this.options.renderer.render(gl, matrix);
+                        }
+                    }
+                }
+            ];
+        };
+        /**
+         * @internal
+         */
+        WebGLLayer.prototype._getLayerIds = function () {
+            return [this.id];
+        };
+        /**
+         * @internal
+         */
+        WebGLLayer.prototype._getSourceIds = function () {
+            return new Set().add(this.source.getId());
+        };
+        /**
+         * Returns true if the next frame should be rendered
+         * @internal
+         */
+        WebGLLayer.prototype._shouldRender = function () {
+            if (this.map) {
+                var zoom = this.map.getCamera().zoom;
+                return this.options.visible && this.options.minZoom <= zoom && this.options.maxZoom > zoom;
+            }
+            return false;
+        };
+        return WebGLLayer;
+    }(Layer));
+
 
 
     var index$5 = /*#__PURE__*/Object.freeze({
@@ -12401,7 +12697,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         SymbolLayer: SymbolLayer,
         TileLayer: TileLayer,
         HeatMapLayer: HeatMapLayer,
-        ImageLayer: ImageLayer
+        ImageLayer: ImageLayer,
+        WebGLLayer: WebGLLayer
     });
 
     var Html = /** @class */ (function () {
@@ -12946,7 +13243,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (options.anchor === "none") {
                 this.autoAnchor = autoAnchor || "bottom";
                 this.containerDiv.classList.add(this.autoAnchor);
-                marker = new mapboxgl.Marker({
+                marker = new maplibregl.Marker({
                     anchor: this.autoAnchor,
                     element: this.containerDiv,
                     offset: options.pixelOffset,
@@ -12954,7 +13251,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
             else {
                 this.containerDiv.classList.add(options.anchor);
-                marker = new mapboxgl.Marker({
+                marker = new maplibregl.Marker({
                     anchor: options.anchor,
                     element: this.containerDiv,
                     offset: options.pixelOffset,
@@ -13320,7 +13617,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (!options.visible) {
                 this.element.classList.add(HtmlMarker.hiddenClass);
             }
-            this.marker = new mapboxgl.Marker({
+            this.marker = new maplibregl.Marker({
                 element: this.element,
                 offset: options.pixelOffset,
                 draggable: options.draggable,
@@ -14029,13 +14326,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
      * Gets the worker count that will get created.
      */
     function getWorkerCount() {
-        return mapboxgl__default.workerCount;
+        return maplibregl.workerCount;
     }
     /**
      * Gets the Maximum number of images (raster tiles, sprites, icons) to load in parallel
      */
     function getMaxParallelImageRequests() {
-        return mapboxgl__default.maxParallelImageRequests;
+        return maplibregl.maxParallelImageRequests;
     }
     /**
      * Gets the default language that was provided.
@@ -14088,7 +14385,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         if (UserAgent.isIE()) {
             return false;
         }
-        return mapboxgl__default.supported({
+        return maplibregl.supported({
             failIfMajorPerformanceCaveat: failIfMajorPerformanceCaveat
         });
     }
@@ -14147,7 +14444,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
      */
     function setWorkerCount(workerCount) {
         if (workerCount > 0) {
-            mapboxgl__default.workerCount = workerCount;
+            maplibregl.workerCount = workerCount;
             hasWorkerCount = true;
         }
     }
@@ -14158,7 +14455,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
      */
     function setMaxParallelImageRequests(maxParallelImageRequests) {
         if (maxParallelImageRequests > 0) {
-            mapboxgl__default.maxParallelImageRequests = maxParallelImageRequests;
+            maplibregl.maxParallelImageRequests = maxParallelImageRequests;
             hasMaxParallelImageRequests = true;
         }
     }
@@ -14273,7 +14570,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
      * created and destroyed.
      */
     function prewarm() {
-        mapboxgl__default.prewarm();
+        maplibregl.prewarm();
     }
     /**
      * Clears up resources that have previously been created by `atlas.prewarm()`.
@@ -14282,7 +14579,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
      * in your application.
      */
     function clearPrewarmedResources() {
-        mapboxgl__default.clearPrewarmedResources();
+        maplibregl.clearPrewarmedResources();
     }
     /**
      * Returns if authentication options are set.
@@ -15960,6 +16257,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     40
                 ];
                 // accessibility recommendation: After using any of the map shortcut keys, NVDA should not read all the shortcut keys again.
+                // // TODO: this should be this.map._getMap().getCanvas
                 var mapCanvas = _this.map._getMap()._canvas;
                 mapCanvas === null || mapCanvas === void 0 ? void 0 : mapCanvas.addEventListener('keyup', function (event) {
                     if (baseShortcutKeyCodes.find(function (code) { return event.keyCode === code; })) {
@@ -22926,6 +23224,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 
     // Disable unified signatures linter rule so we can generate separate docs for function overloads.
     // tslint:disable:unified-signatures
+    var MAP_CLIENT_EVENTS = ['maxzoomchanged', 'minzoomchanged', 'mapconfigurationchanged'];
     /**
      * A manager for the map control's events.
      * Exposed through the events property of the atlas.Map class.
@@ -23037,6 +23336,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          * @private
          */
         EventManager.prototype._addGlobalListener = function (eventType, callback, legacy, once) {
+            // add our custom events emitted by Map client to the map (note: they don't utilize modifiedCallback) 
+            if (MAP_CLIENT_EVENTS.includes(eventType)) {
+                this.map._addEventListener(eventType, callback, once);
+                return;
+            }
             var oldModifiedCallback = this.mapCallbackHandler.getModifiedCallback(eventType, "", callback);
             // Get a new modified callback.
             this.mapCallbackHandler.addCallback(eventType, "", callback, legacy, once);
@@ -23061,9 +23365,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     setTimeout(function () { return modifiedCallback(readyData_1); });
                 }
             }
-            else if (["minzoomchanged", "maxzoomchanged", "stylesetchanged"].includes(eventType)) {
-                this.map._addEventListener(eventType, callback, once);
-            }
             else {
                 // If a callback already exists disable it so the new one can replace it.
                 if (oldModifiedCallback) {
@@ -23160,6 +23461,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          */
         EventManager.prototype._removeListener = function (eventType, target, callback) {
             var e_5, _a;
+            // remove our custom events emitted by Map client to the map (note: they don't utilize modifiedCallback)
+            if (MAP_CLIENT_EVENTS.includes(eventType)) {
+                this.map._removeEventListener(eventType, callback);
+                return;
+            }
             var layerId = target instanceof Layer ? target.getId() : target;
             var modifiedCallback = this.mapCallbackHandler.getModifiedCallback(eventType, layerId, callback);
             // If a callback already exists disable it so the new one can replace it.
@@ -23645,6 +23951,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     // Replace the existing layer with the new one.
                     // 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);
@@ -23653,8 +23960,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     this.layerIndex.splice(layerIndex, 1);
                     var beforeIndex = this.layerIndex.findIndex(function (l) { return l.getId() === before; });
                     this.layerIndex.splice(beforeIndex, 0, layer);
-                    if (!(layer instanceof FundamentalMapLayer))
-                        this.userLayers.push({ layer: layer, before: before });
+                    if (!(layer instanceof FundamentalMapLayer)) {
+                        this.userLayers[userLayerIndex] = { layer: layer, before: before };
+                    }
                     tempLayer.onRemove();
                     layer.onAdd(this.map);
                 }
@@ -23664,14 +23972,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     this.map.events._enableLayerEvents(layer);
                     var beforeIndex = this.layerIndex.findIndex(function (l) { return l.getId() === before; });
                     this.layerIndex.splice(beforeIndex, 0, layer);
-                    if (!(layer instanceof FundamentalMapLayer))
+                    if (!(layer instanceof FundamentalMapLayer)) {
                         this.userLayers.push({ layer: layer, before: before });
+                    }
                     layer.onAdd(this.map);
                 }
             }
             else {
                 var layerIndex = this.layerIndex.findIndex(function (l) { return l.getId() === layer.getId(); });
-                if (layerIndex >= 0) {
+                var userLayerIndex = this.userLayers.findIndex(function (ul) { return ul.layer.getId() === layer.getId(); });
+                if (layerIndex >= 0 && userLayerIndex >= 0) {
                     // Replace the existing layer with the new one.
                     var tempLayer = this.layerIndex[layerIndex];
                     this._removeMapboxLayers(tempLayer);
@@ -23679,6 +23989,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     this.map.events._disableLayerEvents(tempLayer);
                     this.map.events._enableLayerEvents(layer);
                     this.layerIndex[layerIndex] = layer;
+                    if (!(layer instanceof FundamentalMapLayer)) {
+                        this.userLayers[userLayerIndex] = { layer: layer, before: undefined };
+                    }
                     tempLayer.onRemove();
                     layer.onAdd(this.map);
                 }
@@ -23687,8 +24000,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     this._addMapboxLayers(layer);
                     this.map.events._enableLayerEvents(layer);
                     this.layerIndex.push(layer);
-                    if (!(layer instanceof FundamentalMapLayer))
+                    if (!(layer instanceof FundamentalMapLayer)) {
                         this.userLayers.push({ layer: layer, before: before });
+                    }
                     layer.onAdd(this.map);
                 }
             }
@@ -23934,6 +24248,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             else {
                 this.layerIndex.push(layer);
             }
+            // Update before property of the user layer
+            var userLayer = this.userLayers.find(function (ul) { return ul.layer.getId() === layerId; });
+            if (userLayer) {
+                userLayer.before = beforeId;
+            }
         };
         LayerManager.prototype._moveMapboxLayers = function (layer, before) {
             var e_7, _a;
@@ -24067,15 +24386,15 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          */
         LayerManager.prototype._removeLayer = function (layer) {
             var layerId = layer instanceof Layer ? layer.getId() : layer;
-            if (!this.layerIndex.find(function (l) { return l.getId() === layerId; })) {
+            var layerIndex = this.layerIndex.findIndex(function (l) { return l.getId() === layerId; });
+            if (layerIndex == -1) {
                 throw new Error("The layer '" + layerId + "' has not been added to the map and cannot be removed.");
             }
-            var layerIndex = this.layerIndex.findIndex(function (l) { return l.getId() === layerId; });
             var tempLayer = this.layerIndex[layerIndex];
             this._removeMapboxLayers(tempLayer);
             this.layerIndex.splice(layerIndex, 1);
-            var userLayerIndex = this.userLayers.findIndex(function (ul) { return ul.layer.getId() === tempLayer.getId(); });
-            if (userLayerIndex >= 0) {
+            var userLayerIndex = this.userLayers.findIndex(function (ul) { return ul.layer.getId() === layerId; });
+            if (userLayerIndex != -1) {
                 this.userLayers.splice(userLayerIndex, 1);
             }
             tempLayer.onRemove();
@@ -25051,6 +25370,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         __extends(StyleOptions, _super);
         function StyleOptions() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
+            /**
+             * If true, the gl context will be created with MSAA antialiasing, which can be useful for antialiasing WebGL layers.
+             */
+            _this.antialias = undefined;
             /**
              * If true the map will automatically resize whenever the window's size changes.
              * Otherwise map.resize() must be called.
@@ -25247,10 +25570,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
              */
             _this.styleAPIVersion = getStyleAPIVersion();
             /**
-             * The style set of the map. Determines which styles are available to be picked
-             * and what do they consist of (style names, thumbnails, URLs, etc). If passed
-             * as a string then the request will be made to resolve it. Use Style Set API
-             * for modifications of the style set for all your apps in the field.
+             * The map configuration defines the set of styles available to the map.
+             */
+            _this.mapConfiguration = undefined;
+            /**
+             * @deprecated use mapConfiguration instead
              */
             _this.styleSet = undefined;
             /**
@@ -25421,6 +25745,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             if (merged.authOptions.authType !== exports.AuthenticationType.subscriptionKey) {
                 merged["subscription-key"] = merged.subscriptionKey = undefined;
             }
+            // if mapConfiguration is not set and legacy styleSet option is used, assign it to mapConfiguration
+            if (merged.styleSet !== undefined && merged.mapConfiguration === undefined) {
+                merged.mapConfiguration = merged.styleSet;
+            }
+            // reassign properties from legacy mapConfiguration to new structure if needed
+            if (merged.mapConfiguration && typeof merged.mapConfiguration !== 'string') {
+                merged.mapConfiguration = __assign(__assign({}, merged.mapConfiguration), { defaultConfiguration: merged.mapConfiguration.defaultConfiguration || merged.mapConfiguration['defaultStyle'], configurations: merged.mapConfiguration.configurations || merged.mapConfiguration['styles'] });
+            }
             this._transformers = __spread(currentTransforms || [], transformersToMerge.filter(function (toMerge) { return !currentTransforms.includes(toMerge); }));
             if (this.transformRequest && !this._transformers.includes(this.transformRequest)) {
                 this._transformers.push(this.transformRequest);
@@ -25475,10 +25807,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          */
         LayerGroupComparator.getLayerGroup = function (layer) {
             var _a;
-            if ((layer === null || layer === void 0 ? void 0 : layer.metadata) && layer.metadata['microsoft.maps:layerGroup']) {
-                return layer.metadata['microsoft.maps:layerGroup'];
+            var layerObject = layer;
+            if ((layerObject === null || layerObject === void 0 ? void 0 : layerObject.metadata) && layerObject.metadata['microsoft.maps:layerGroup']) {
+                return layerObject.metadata['microsoft.maps:layerGroup'];
             }
-            var layerId = (_a = layer === null || layer === void 0 ? void 0 : layer.id) !== null && _a !== void 0 ? _a : layer;
+            var layerId = (_a = layerObject === null || layerObject === void 0 ? void 0 : layerObject.id) !== null && _a !== void 0 ? _a : layer;
             if (!layerId.startsWith("microsoft.")) {
                 return undefined;
             }
@@ -25625,9 +25958,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
              */
             this.indoorState = undefined;
             /**
-             * Preserve the styleset that was used before the indoor styleset was set
+             * Preserve the map configuration that was used before the indoor map configuration was set
              */
-            this.preservedPreindoorStyleset = undefined;
+            this.preservedPreindoorMapConfiguration = undefined;
             this._onStyleData = function () {
                 _this._lookUpAsync(_this.map.getStyle()).then(function (style) {
                     _this.map.events.invoke("stylechanged", {
@@ -25650,11 +25983,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     return null;
                 }
                 else {
-                    return definitions.styles.find(function (style) { return style.name === (options.style || definitions.defaultStyle); })
+                    return definitions.configurations.find(function (style) { return style.name === (options.style || definitions.defaultConfiguration); })
                         // retrieve default style definition unless option.style's one was found
-                        || definitions.styles.find(function (style) { return style.name === definitions.defaultStyle; })
-                        // no default style in the styleSet -> pick the first style
-                        || definitions.styles[0];
+                        || definitions.configurations.find(function (style) { return style.name === definitions.defaultConfiguration; })
+                        // no default style in the mapConfiguration -> pick the first style
+                        || definitions.configurations[0];
                 }
             };
             this._lookUpAsync = function (options) { return __awaiter(_this, void 0, void 0, function () {
@@ -25664,11 +25997,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                         case 0: return [4 /*yield*/, this.definitions()];
                         case 1:
                             definitions = _a.sent();
-                            result = definitions.styles.find(function (style) { return style.name === (options.style || definitions.defaultStyle); })
+                            result = definitions.configurations.find(function (style) { return style.name === (options.style || definitions.defaultConfiguration); })
                                 // retrieve default style definition unless option.style's one was found
-                                || definitions.styles.find(function (style) { return style.name === definitions.defaultStyle; })
-                                // no default style in the styleSet -> pick the first style
-                                || definitions.styles[0];
+                                || definitions.configurations.find(function (style) { return style.name === definitions.defaultConfiguration; })
+                                // no default style in the mapConfiguration -> pick the first style
+                                || definitions.configurations[0];
                             return [2 /*return*/, result];
                     }
                 });
@@ -25679,13 +26012,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         StyleManager.prototype.updateIndoorState = function (theme, tilesetId) {
             var _this = this;
             var _a;
-            var styleset = this.map.styles.getMapConfiguration();
-            if (styleset) {
-                this.preservedPreindoorStyleset = styleset;
+            var mapConfiguration = this.map.styles.getMapConfiguration();
+            if (mapConfiguration) {
+                this.preservedPreindoorMapConfiguration = mapConfiguration;
                 // tilesetId fallback
                 // MAGIC: if we are on a default style set - match existing style to the one in the default indoor style set
                 var desiredIndoorStyle = this.map.getStyle().style ? this.map.getStyle().style + "_indoor" + (theme === 'dark' ? '_dark' : '') + "_tileset_" + tilesetId : undefined;
-                this.map.styles.setMapConfiguration("defaultIndoor_" + tilesetId, styleset === 'microsoft-maps:default' ? desiredIndoorStyle : undefined);
+                this.map.styles.setMapConfiguration("defaultIndoor_" + tilesetId, mapConfiguration === 'microsoft-maps:default' ? desiredIndoorStyle : undefined);
             }
             else {
                 var didTilesetIdChange_1 = ((_a = this.indoorState) === null || _a === void 0 ? void 0 : _a.tilesetId) !== tilesetId;
@@ -25695,12 +26028,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 };
                 this.initStyleset();
                 this.definitions().then(function (definitions) {
-                    var currentStyle = (_this.map.getStyle().style || definitions.defaultStyle)
+                    var currentStyle = (_this.map.getStyle().style || definitions.defaultConfiguration)
                         .replace('_indoor_dark', '')
                         .replace('_indoor', '');
                     // we cannot compose the precise style name for auto theme, search for prefix style name match
                     var targetStylePrefix = currentStyle + "_indoor";
-                    var candidateStyle = definitions.styles.find(function (style) { return style.name.startsWith(targetStylePrefix); });
+                    var candidateStyle = definitions.configurations.find(function (style) { return style.name.startsWith(targetStylePrefix); });
                     if (candidateStyle) {
                         // force style reload if tileset id has changed to make sure the tiles will be re-requested with new tileset applied in indoor source placeholder
                         _this.map.setStyle({ style: candidateStyle.name }, !didTilesetIdChange_1);
@@ -25710,10 +26043,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         StyleManager.prototype.unsetIndoorState = function () {
             var _this = this;
-            var styleset = this.preservedPreindoorStyleset;
-            if (styleset) {
+            var mapConfiguration = this.preservedPreindoorMapConfiguration;
+            if (mapConfiguration) {
                 // we need to revert to the styleset that was ap
-                this.map.styles.setMapConfiguration(styleset);
+                this.map.styles.setMapConfiguration(mapConfiguration);
             }
             else {
                 this.indoorState = undefined;
@@ -25740,11 +26073,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 var baseName = _this.indoorState && styleName.includes('_indoor') ? styleName.split('_indoor')[0] : styleName;
                 return baseName in styleNamesMap ? styleNamesMap[baseName] : baseName;
             };
-            if (!this.serviceOptions.styleSet) {
+            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 ({
                     version: isNaN(definitions.version) ? 0 : parseFloat(definitions.version),
-                    defaultStyle: definitions.defaultStyle,
-                    styles: definitions.styles
+                    defaultConfiguration: definitions.defaultStyle,
+                    configurations: definitions.styles
                         .filter(function (style) {
                         if (!_this.indoorState) {
                             return !style.name.includes('indoor');
@@ -25775,11 +26108,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     }); })
                 }); }));
             }
-            else if (typeof this.serviceOptions.styleSet === 'string') {
-                newPromise = new HijackablePromise(this._request(this.serviceOptions.domain, constants.styleResourcePath + "/mapconfigurations/metadata/" + this.serviceOptions.styleSet, "StyleDefinitions"));
+            else if (typeof this.serviceOptions.mapConfiguration === 'string') {
+                newPromise = new HijackablePromise(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(__assign({}, definitions), { defaultConfiguration: definitions.defaultConfiguration || definitions['defaultStyle'], configurations: definitions.configurations || definitions['styles'] })); }));
             }
             else {
-                newPromise = HijackablePromise.resolve(this.serviceOptions.styleSet);
+                newPromise = HijackablePromise.resolve(this.serviceOptions.mapConfiguration);
             }
             if (this.initPromise) {
                 this.initPromise.switchWith(newPromise);
@@ -25789,7 +26124,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 this.initPromise = newPromise;
             }
             // propagate styleset change
-            this.initPromise.then(function (styleset) { return _this.map._invokeEvent("stylesetchanged", styleset); });
+            this.initPromise.then(function (styleset) { return _this.map._invokeEvent("mapconfigurationchanged", styleset); });
             return this.initPromise;
         };
         /**
@@ -25809,16 +26144,153 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
             throw Error("Style definition does not contain neither URL nor style object.");
         };
+        StyleManager.prototype.deriveNewStyle = function (previousStyle, nextStyle) {
+            // 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();
+            return __assign(__assign({}, nextStyle), { 
+                // force a replacement of language placeholder in the tileset url to avoid resolution to a same cache with placeholders on language change
+                sources: Object.entries(nextStyle.sources).reduce(function (newSources, _a) {
+                    var _b = __read(_a, 2), sourceKey = _b[0], source = _b[1];
+                    var newSource = __assign({}, 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;
+                }, {}), layers: nextStyle.layers.map(function (layer) {
+                    var _a, _b, _c, _d, _e;
+                    var nextLayer = __assign({}, layer);
+                    var layerGroup = LayerGroupComparator.getLayerGroup(nextLayer);
+                    if (!layerGroup) {
+                        return 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) {
+                            nextLayer.layout = (_d = nextLayer.layout) !== null && _d !== void 0 ? _d : {};
+                            nextLayer.layout.visibility = "visible";
+                        }
+                        else {
+                            nextLayer.layout = (_e = nextLayer.layout) !== null && _e !== void 0 ? _e : {};
+                            nextLayer.layout.visibility = "none";
+                        }
+                    }
+                    return nextLayer;
+                }) });
+        };
+        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({}, 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
+                    validate: this.serviceOptions.validateStyle,
+                    transformStyle: function (previousStyle, nextStyle) {
+                        // 1. derive the base new style (without user layers)
+                        var targetStyle = _this.deriveNewStyle(previousStyle, nextStyle);
+                        // 2. derive layer groups for the new style
+                        var layerGroupLayers = targetStyle.layers
+                            .map(function (nextLayer) { return ({ nextLayer: nextLayer, layerGroup: LayerGroupComparator.getLayerGroup(nextLayer) }); })
+                            .filter(function (_a) {
+                            var nextLayer = _a.nextLayer, layerGroup = _a.layerGroup;
+                            return layerGroup !== undefined;
+                        })
+                            .reduce(function (layerGroupLayers, _a) {
+                            var _b;
+                            var nextLayer = _a.nextLayer, layerGroup = _a.layerGroup;
+                            return (__assign(__assign({}, layerGroupLayers), (_b = {}, _b[layerGroup] = layerGroup in layerGroupLayers ? __spread(layerGroupLayers[layerGroup], [nextLayer]) : [nextLayer], _b)));
+                        }, {});
+                        // 3. copy user layers and sources from previous style into new one
+                        var targetStyleWithUserLayers = _this.injectUserLayersIntoStyle(previousStyle, nextStyle, layerGroupLayers);
+                        // 4. side effects: sync our control's LayerManager and SourceManager
+                        var nextFundamentalLayers = Object.entries(layerGroupLayers).map(function (_a) {
+                            var _b = __read(_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
+                        // 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", _this._onStyleData);
+                        _this.map.events.addOnce("styledata", _this._onStyleData);
+                        return targetStyleWithUserLayers;
+                    }
                 });
             }
             catch (e) {
@@ -25848,30 +26320,30 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         /**
          * Replaces the style set used. Very costly as it reloads all controls and resources.
          */
-        StyleManager.prototype.setMapConfiguration = function (styleSet, styleName) {
+        StyleManager.prototype.setMapConfiguration = function (mapConfiguration, styleName) {
             var _this = this;
-            this.serviceOptions.styleSet = styleSet;
-            if (typeof styleSet === 'string') {
+            this.serviceOptions.mapConfiguration = mapConfiguration;
+            if (typeof mapConfiguration === 'string') {
                 this.initStyleset();
             }
             else {
                 if (this.initPromise) {
-                    this.initPromise.hijackAndResolve(styleSet);
+                    this.initPromise.hijackAndResolve(mapConfiguration);
                 }
                 else {
-                    this.initPromise = HijackablePromise.resolve(styleSet);
+                    this.initPromise = HijackablePromise.resolve(mapConfiguration);
                 }
             }
             this.definitions().then(function (definitions) {
-                var targetStyleName = definitions.defaultStyle;
-                if (definitions.styles.find(function (s) { return s.name === styleName; })) {
+                var targetStyleName = definitions.defaultConfiguration;
+                if (definitions.configurations.find(function (s) { return s.name === styleName; })) {
                     targetStyleName = styleName;
                 }
                 _this.map.setStyle({ style: targetStyleName });
             });
         };
         StyleManager.prototype.getMapConfiguration = function () {
-            return this.serviceOptions.styleSet;
+            return this.serviceOptions.mapConfiguration;
         };
         // backward-compatibility: this method preserves the interface that azure-maps-indoor@2.0.6 assumes
         StyleManager.prototype.setStyleSet = function (styleSet) {
@@ -25888,147 +26360,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(_a, 2), sourceKey = _b[0], source = _b[1];
-                var newSource = __assign({}, 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;
-            }, {});
-            // A FundamentalMapLayer (grouped layer) representation of the next style must be built.
-            var previousLayers = this.map.layers.getLayers();
-            var nextLayers = [];
-            var currentLayerGroupId = "";
-            var currentLayerGroupLayers = [];
-            var advanceLayerGroup = function (nextLayerGroup) {
-                nextLayers.push(_this._buildFundamentalLayerFrom(currentLayerGroupLayers, currentLayerGroupId));
-                currentLayerGroupId = nextLayerGroup;
-                currentLayerGroupLayers = [];
-            };
-            nextStyle.layers.forEach(function (nextLayer) {
-                var _a, _b, _c, _d, _e;
-                var layerGroup = LayerGroupComparator.getLayerGroup(nextLayer);
-                currentLayerGroupId = currentLayerGroupId ? currentLayerGroupId : layerGroup;
-                // Set visiblity of fill-extrusion layers according to StyleOptions.showBuildingModels
-                if (!styleOptions.showBuildingModels && nextLayer.type === "fill-extrusion") {
-                    updateLayoutProperty(nextLayer.id, "visibility", "none");
-                    nextLayer.layout = (_a = nextLayer.layout) !== null && _a !== void 0 ? _a : {};
-                    nextLayer.layout.visibility = "none";
-                }
-                else if (nextLayer.type === "fill-extrusion") {
-                    updateLayoutProperty(nextLayer.id, "visibility", "visible");
-                    nextLayer.layout = (_b = nextLayer.layout) !== null && _b !== void 0 ? _b : {};
-                    nextLayer.layout.visibility = "visible";
-                }
-                // Set visibility of traffic layers depending on traffic settings.
-                if (trafficOptions.flow !== "none" && layerGroup) {
-                    if (layerGroup === "traffic_" + trafficOptions.flow && nextLayer.type == "line") {
-                        updateLayoutProperty(nextLayer.id, "visibility", "visible");
-                        nextLayer.layout = (_c = nextLayer.layout) !== null && _c !== void 0 ? _c : {};
-                        nextLayer.layout.visibility = "visible";
-                    }
-                }
-                // Set visibility of labels
-                var isLabelLayerGroup = layerGroup === 'labels' || layerGroup === 'labels_places' || layerGroup === 'labels_indoor';
-                if (isLabelLayerGroup && nextLayer.type === 'symbol') {
-                    if (styleOptions.showLabels) {
-                        updateLayoutProperty(nextLayer.id, "visibility", "visible");
-                        nextLayer.layout = (_d = nextLayer.layout) !== null && _d !== void 0 ? _d : {};
-                        nextLayer.layout.visibility = "visible";
-                    }
-                    else {
-                        updateLayoutProperty(nextLayer.id, "visibility", "none");
-                        nextLayer.layout = (_e = nextLayer.layout) !== null && _e !== void 0 ? _e : {};
-                        nextLayer.layout.visibility = "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 (layerGroup) {
-                    if (currentLayerGroupLayers.length > 0 && layerGroup != currentLayerGroupId) {
-                        advanceLayerGroup(layerGroup);
-                    }
-                    currentLayerGroupLayers.push(nextLayer);
-                }
-                else if (currentLayerGroupLayers.length > 0) {
-                    advanceLayerGroup(layerGroup);
-                }
-            });
-            if (currentLayerGroupLayers.length > 0) {
-                advanceLayerGroup("");
-            }
-            // Update FundamentalMapLayers in LayerManager
-            var userLayers = this.map.layers._getUserLayers();
-            var firstUserLayer = userLayers[0];
-            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 {
-                        // Insert new layer underneath the first user layer, or the .
-                        _this.map.layers.add(newFundamentalLayer, firstUserLayer === null || firstUserLayer === void 0 ? void 0 : firstUserLayer.layer);
-                    }
-                }
-            });
-            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) {
-                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.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);
@@ -26172,6 +26503,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
             else {
                 var mapboxMapOptions = {
+                    antialias: _this.styleOptions.antialias,
                     attributionControl: false,
                     container: container,
                     fadeDuration: _this.serviceOptions.fadeDuration,
@@ -26199,10 +26531,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                         if (_this.serviceOptions.transformRequest) {
                             merge_1(requestParams, _this.serviceOptions.transformRequest(requestParams.url, resourceType));
                         }
+                        // TODO: fix type variation
                         return requestParams;
                     }
                 };
-                mapboxMap = new mapboxgl__default.Map(mapboxMapOptions);
+                mapboxMap = new maplibregl.Map(mapboxMapOptions);
             }
             try {
                 _this.map = mapboxMap;
@@ -26370,6 +26703,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          */
         Map.prototype.removeRequestTransformer = function (transformer) { this.serviceOptions.removeTransformer(transformer); };
         Map.prototype.setCamera = function (options, fromControl) {
+            var _a;
             if (fromControl === void 0) { fromControl = false; }
             var mapboxCameraOptions;
             var maxBounds;
@@ -26378,13 +26712,22 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 var cameraBoundsOptions = new CameraBoundsOptions()
                     .merge({ maxZoom: this.getCamera().maxZoom }, options);
                 var bounds = this._generateSafeBounds(cameraBoundsOptions.bounds);
-                mapboxCameraOptions = this.map.cameraForBounds(bounds, {
+                var cameraForBoundsOptions = {
                     padding: cameraBoundsOptions.padding,
                     offset: cameraBoundsOptions.offset,
                     maxZoom: cameraBoundsOptions.maxZoom
-                });
+                };
+                mapboxCameraOptions = this.map.cameraForBounds(bounds, cameraForBoundsOptions);
                 if (!mapboxCameraOptions) {
-                    throw new Error("The map cannot be fit to the current canvas with the given CameraBoundsOptions.");
+                    var currentContainer = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getContainer();
+                    var errorDetails = {
+                        message: "The map cannot be fit to the current canvas with the given CameraBoundsOptions.",
+                        containerWidth: currentContainer === null || currentContainer === void 0 ? void 0 : currentContainer.clientWidth,
+                        containerHeight: currentContainer === null || currentContainer === void 0 ? void 0 : currentContainer.clientHeight,
+                        safeBounds: bounds,
+                        cameraForBoundsOptions: cameraForBoundsOptions
+                    };
+                    throw new Error(JSON.stringify(errorDetails));
                 }
                 this.map.setMaxZoom(cameraBoundsOptions.maxZoom);
                 this._invokeEvent("maxzoomchanged", this.map.getMaxZoom());
@@ -27162,6 +27505,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         Map.prototype.stop = function () {
             this.map.stop();
         };
+        /**
+         * Trigger the rendering of a single frame.
+         * Use this method with WebGL layers to repaint the map when the layer's
+         * properties or properties associated with the layer's source change.
+         * Calling this multiple times before the next frame is rendered will still
+         * result in only a single frame being rendered.
+         */
+        Map.prototype.triggerRepaint = function () {
+            this.map.triggerRepaint();
+        };
         /**
          * @internal
          */
@@ -27293,9 +27646,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 return;
             }
             // Check if the default style is set by the client and if it exists in the current style set
-            this.styles.definitions().then(function (styleSet) {
-                if (!_this.styleOptions.style || !styleSet.styles.map(function (styleSetStyle) { return styleSetStyle.name; }).includes(_this.styleOptions.style)) {
-                    _this.styleOptions.style = styleSet.defaultStyle;
+            this.styles.definitions().then(function (mapConfiguration) {
+                if (!_this.styleOptions.style || !mapConfiguration.configurations.map(function (mapConfigurationStyle) { return mapConfigurationStyle.name; }).includes(_this.styleOptions.style)) {
+                    _this.styleOptions.style = mapConfiguration.defaultConfiguration;
                 }
                 _this.styleOptions = styleOptions;
                 _this._rebuildStyle(diff);
@@ -27937,7 +28290,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         domain: env.staticAssetsDomain,
         path: "sdk/javascript/mapcontrol/" + Version.getEndpointVersion() + "/mapbox-gl-rtl-text.min.js"
     });
-    mapboxgl.setRTLTextPlugin(rtlPluginUrl.toString(), function (error) {
+    maplibregl.setRTLTextPlugin(rtlPluginUrl.toString(), function (error) {
         if (error) {
             console.warn(error);
         }