azure-maps-control 2.1.3 → 2.1.8

package/dist/atlas.js

@@ -77,7 +77,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	}
 
 	var azuremapsMaplibreGlUnminified = createCommonjsModule(function (module, exports) {
-	/* The Azure Maps fork of MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v1.14.0-rc2/LICENSE.txt */
+	/* The Azure Maps fork of MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v1.14.0-rc4/LICENSE.txt */
 	(function (global, factory) {
 	 module.exports = factory() ;
 	}(commonjsGlobal, (function () {
@@ -109,7 +109,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		return module = { exports: {} }, fn(module, module.exports), module.exports;
 	}
 
-	var version = "1.14.0-rc2";
+	var version = "1.14.0-rc4";
 
 	var unitbezier = UnitBezier;
 	function UnitBezier(p1x, p1y, p2x, p2y) {
@@ -33075,7 +33075,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        }
 	    };
 	    Style.prototype.update = function update(parameters) {
-	        if (!this.loaded) {
+	        if (!this._loaded) {
 	            return;
 	        }
 	        var changed = this._changed;
@@ -33096,7 +33096,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            this._updateTilesForChangedImages();
 	            for (var id$1 in this._updatedPaintProps) {
 	                this._layers[id$1].updateTransitions(parameters);
-	                this._serializeLayers[id$1] = this._layers[id$1].serialize();
+	                this._serializedLayers[id$1] = this._layers[id$1].serialize();
 	            }
 	            this.light.updateTransitions(parameters);
 	            this._resetUpdates();
@@ -33477,7 +33477,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            return;
 	        }
 	        layer.setLayoutProperty(name, value, options);
-	        this._serializeLayers[layerId] = layer.serialize();
+	        this._serializedLayers[layerId] = layer.serialize();
 	        this._updateLayer(layer);
 	    };
 	    Style.prototype.getLayoutProperty = function getLayoutProperty(layerId, name) {
@@ -43487,7 +43487,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    return Url;
 	}());
 
-	var version = "2.1.3";
+	var version = "2.1.8";
 
 	/**
 	 * A helper class that provides methods for getting various forms of the map controls current version.
@@ -43519,6 +43519,78 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    return Version;
 	}());
 
+	/** The vertical distance between the tooltip and its target */
+	var tooltipVerticalOffset = 4;
+	/**
+	  * Creates tooltip content element
+	  */
+	var buildAccessibleTooltip = function (name) {
+	    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); });
+	    }
+	    return tooltipContent;
+	};
+	/**
+	 * Determines tooltip position
+	 * @param tooltip tooltip to position
+	 * @param eventTarget target element that tooltip is bound to
+	 * @param forceAbsolute position:fixed is generally desired, however since tooltip is positioned alongside the target,
+	 *  the runtime transform of the parent container(maplibre marker) will apply to tooltip as well, in such case resort to position:absolute
+	 */
+	var positionTooltip = function (tooltip, eventTarget, forceAbsolute) {
+	    if (forceAbsolute === void 0) { forceAbsolute = false; }
+	    var positionTooltip = function (event) {
+	        var buttonRect = eventTarget.getBoundingClientRect();
+	        var tooltipRect = tooltip.getBoundingClientRect();
+	        var left, top;
+	        if ((buttonRect.x + tooltipRect.width) > window.innerWidth) {
+	            // the tooltip body may not fit the visible window width
+	            left = window.innerWidth - tooltipRect.width;
+	        }
+	        else {
+	            left = buttonRect.x;
+	        }
+	        if ((buttonRect.y + buttonRect.height + tooltipRect.height + tooltipVerticalOffset) > window.innerHeight) {
+	            // the tooltip body may not fit the visible window height
+	            // position above the target element
+	            top = buttonRect.y - tooltipRect.height - tooltipVerticalOffset;
+	        }
+	        else {
+	            top = buttonRect.y + buttonRect.height + tooltipVerticalOffset;
+	        }
+	        if (forceAbsolute && eventTarget.parentElement) {
+	            var parentRect = eventTarget.parentElement ? eventTarget.parentElement.getBoundingClientRect() : null;
+	            tooltip.style.position = 'absolute';
+	            left = left - parentRect.x;
+	            top = top - parentRect.y;
+	        }
+	        tooltip.style.transform = "translate(" + left + "px, " + top + "px)";
+	    };
+	    eventTarget.addEventListener("mouseover", positionTooltip);
+	    eventTarget.addEventListener("focusin", positionTooltip);
+	};
+
 	(function (ControlPosition) {
 	    /**
 	     * Places the control in the top left of the map.
@@ -43856,6 +43928,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var container = this.buildContainer(map, this.options.style, "Rotation Control");
 	        var rotationButton = this.constructRotationButton(map);
 	        var grid = this.constructRotationGrid(map, options);
+	        var tooltip = buildAccessibleTooltip("Reset to Default Rotation");
 	        container.addEventListener("mouseover", function (event) {
 	            _this.lastActiveTime = _this.lastActiveTime || event.timeStamp;
 	            _this.hasMouse = true;
@@ -43891,9 +43964,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (options && CompassControl.InvertOrderPositions.includes(options.position)) {
 	            container.appendChild(grid);
 	            container.appendChild(rotationButton);
+	            container.appendChild(tooltip);
+	            positionTooltip(tooltip, rotationButton);
 	        }
 	        else {
 	            container.appendChild(rotationButton);
+	            container.appendChild(tooltip);
+	            positionTooltip(tooltip, rotationButton);
 	            container.appendChild(grid);
 	        }
 	        return container;
@@ -43904,13 +43981,23 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        grid.classList.add("hidden-accessible-element");
 	        var rotationRightButton = this.constructRightRotationButton(map);
 	        var rotationLeftButton = this.constructLeftRotationButton(map);
+	        var tooltipLeft = buildAccessibleTooltip("Rotate Left");
+	        var tooltipRight = buildAccessibleTooltip("Rotate Right");
 	        if (options && CompassControl.InvertOrderPositions.includes(options.position)) {
 	            grid.appendChild(rotationRightButton);
+	            grid.appendChild(tooltipRight);
+	            positionTooltip(tooltipRight, rotationRightButton);
 	            grid.appendChild(rotationLeftButton);
+	            grid.appendChild(tooltipLeft);
+	            positionTooltip(tooltipLeft, rotationLeftButton);
 	        }
 	        else {
 	            grid.appendChild(rotationLeftButton);
+	            grid.appendChild(tooltipLeft);
+	            positionTooltip(tooltipLeft, rotationLeftButton);
 	            grid.appendChild(rotationRightButton);
+	            grid.appendChild(tooltipRight);
+	            positionTooltip(tooltipRight, rotationRightButton);
 	        }
 	        return grid;
 	    };
@@ -43919,7 +44006,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var rotationButton = document.createElement("button");
 	        rotationButton.classList.add("azure-maps-control-button");
 	        rotationButton.classList.add("rotation");
-	        rotationButton.setAttribute("title", "Reset to Default Rotation");
+	        rotationButton.setAttribute("aria-label", "Reset to Default Rotation");
 	        rotationButton.setAttribute("alt", "Reset to Default Rotation");
 	        rotationButton.setAttribute("type", "button");
 	        var icon = document.createElement("div");
@@ -43942,7 +44029,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var rotationRightButton = document.createElement("button");
 	        rotationRightButton.classList.add("azure-maps-control-button");
 	        rotationRightButton.classList.add("rotation-right");
-	        rotationRightButton.setAttribute("title", "Rotate Right");
+	        rotationRightButton.setAttribute("aria-label", "Rotate Right");
 	        rotationRightButton.setAttribute("alt", "Rotate Right");
 	        rotationRightButton.setAttribute("type", "button");
 	        rotationRightButton.addEventListener("click", function () {
@@ -43959,7 +44046,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var rotationLeftButton = document.createElement("button");
 	        rotationLeftButton.classList.add("azure-maps-control-button");
 	        rotationLeftButton.classList.add("rotation-left");
-	        rotationLeftButton.setAttribute("title", "Rotate Left");
+	        rotationLeftButton.setAttribute("aria-label", "Rotate Left");
 	        rotationLeftButton.setAttribute("alt", "Rotate Left");
 	        rotationLeftButton.setAttribute("type", "button");
 	        rotationLeftButton.addEventListener("click", function () {
@@ -44043,6 +44130,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var container = this.buildContainer(map, this.options.style, "Pitch Control");
 	        var pitchButton = this.constructPitchButton(map);
 	        var grid = this.constructPitchGrid(map, options);
+	        var tooltip = buildAccessibleTooltip("Reset to Default Pitch");
 	        container.addEventListener("mouseover", function (event) {
 	            _this.lastActiveTime = _this.lastActiveTime || event.timeStamp;
 	            _this.hasMouse = true;
@@ -44078,9 +44166,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (options && PitchControl.INVERT_ORDER_POSITIONS.includes(options.position)) {
 	            container.appendChild(grid);
 	            container.appendChild(pitchButton);
+	            container.appendChild(tooltip);
+	            positionTooltip(tooltip, container);
 	        }
 	        else {
 	            container.appendChild(pitchButton);
+	            container.appendChild(tooltip);
+	            positionTooltip(tooltip, container);
 	            container.appendChild(grid);
 	        }
 	        this.map = map;
@@ -44106,13 +44198,23 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        grid.classList.add("hidden-accessible-element");
 	        this.pitchIncrementButton = this.constructPitchIncrementButton(map);
 	        this.pitchDecrementButton = this.constructPitchDecrementButton(map);
+	        var tooltipIncrement = buildAccessibleTooltip("Increase Pitch");
+	        var tooltipDecrease = buildAccessibleTooltip("Decrease Pitch");
 	        if (options && PitchControl.INVERT_ORDER_POSITIONS.includes(options.position)) {
 	            grid.appendChild(this.pitchDecrementButton);
+	            grid.appendChild(tooltipDecrease);
+	            positionTooltip(tooltipDecrease, this.pitchDecrementButton);
 	            grid.appendChild(this.pitchIncrementButton);
+	            grid.appendChild(tooltipIncrement);
+	            positionTooltip(tooltipIncrement, this.pitchIncrementButton);
 	        }
 	        else {
 	            grid.appendChild(this.pitchIncrementButton);
+	            grid.appendChild(tooltipIncrement);
+	            positionTooltip(tooltipIncrement, this.pitchIncrementButton);
 	            grid.appendChild(this.pitchDecrementButton);
+	            grid.appendChild(tooltipDecrease);
+	            positionTooltip(tooltipDecrease, this.pitchDecrementButton);
 	        }
 	        return grid;
 	    };
@@ -44121,7 +44223,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var pitchButton = document.createElement("button");
 	        pitchButton.classList.add("azure-maps-control-button");
 	        pitchButton.classList.add("pitch");
-	        pitchButton.setAttribute("title", "Reset to Default Pitch");
+	        pitchButton.setAttribute("aria-label", "Reset to Default Pitch");
 	        pitchButton.setAttribute("alt", "Reset to Default Pitch");
 	        pitchButton.setAttribute("type", "button");
 	        pitchButton.addEventListener("click", function () {
@@ -44139,7 +44241,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var pitchDecrementButton = document.createElement("button");
 	        pitchDecrementButton.classList.add("azure-maps-control-button");
 	        pitchDecrementButton.classList.add("pitch-down");
-	        pitchDecrementButton.setAttribute("title", "Decrease Pitch");
+	        pitchDecrementButton.setAttribute("aria-label", "Decrease Pitch");
 	        pitchDecrementButton.setAttribute("alt", "Decrease Pitch");
 	        pitchDecrementButton.setAttribute("type", "button");
 	        pitchDecrementButton.addEventListener("click", function () {
@@ -44156,7 +44258,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var pitchIncrementButton = document.createElement("button");
 	        pitchIncrementButton.classList.add("azure-maps-control-button");
 	        pitchIncrementButton.classList.add("pitch-up");
-	        pitchIncrementButton.setAttribute("title", "Increase Pitch");
+	        pitchIncrementButton.setAttribute("aria-label", "Increase Pitch");
 	        pitchIncrementButton.setAttribute("alt", "Increase Pitch");
 	        pitchIncrementButton.setAttribute("type", "button");
 	        pitchIncrementButton.addEventListener("click", function () {
@@ -46744,6 +46846,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var container = this.buildContainer(map, this.options.style, "Map Style Control");
 	        var styleOpsGrid = this.buildStyleOpsGrid(container);
 	        var currStyleButton = this.buildCurrStyleBtn(container, styleOpsGrid);
+	        var tooltip = buildAccessibleTooltip("Select Style");
+	        styleOpsGrid.classList.add(options ? options.position || 'top-right' : 'top-right');
 	        container.addEventListener("mouseover", function () {
 	            _this.hasMouse = true;
 	            container.classList.add(StyleControl.Css.inUse);
@@ -46773,9 +46877,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (options && StyleControl.InvertOrderPositions.includes(options.position)) {
 	            container.appendChild(styleOpsGrid);
 	            container.appendChild(currStyleButton);
+	            container.appendChild(tooltip);
+	            positionTooltip(tooltip, currStyleButton);
 	        }
 	        else {
 	            container.appendChild(currStyleButton);
+	            container.appendChild(tooltip);
+	            positionTooltip(tooltip, currStyleButton);
 	            container.appendChild(styleOpsGrid);
 	        }
 	        return container;
@@ -46805,6 +46913,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            if (image.alt !== newAlt) {
 	                image.alt = newAlt;
 	            }
+	            if (image.parentElement.lastChild instanceof Text) {
+	                image.parentElement.lastChild.textContent = newAlt;
+	            }
 	        }
 	    };
 	    /**
@@ -46831,17 +46942,20 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var _this = this;
 	        var styleOptionButton = document.createElement("button");
 	        var friendlyName = this.mapToFriendlyStyleName(name);
-	        styleOptionButton.setAttribute("title", friendlyName);
 	        styleOptionButton.setAttribute("alt", friendlyName);
 	        styleOptionButton.setAttribute("type", "button");
 	        var styleIconImage = new Image();
 	        styleIconImage.src = icon;
-	        styleIconImage.alt = friendlyName;
+	        if (this.options.layout === "icons") {
+	            styleIconImage.alt = friendlyName;
+	        }
 	        styleOptionButton.appendChild(styleIconImage);
 	        if (this.options.layout === "icons") {
 	            styleOptionButton.classList.add(StyleControl.Css.button);
 	        }
 	        else {
+	            styleOptionButton.classList.add(StyleControl.Css.listButton);
+	            styleOptionButton.classList.add(StyleControl.Css.expanded);
 	            styleOptionButton.appendChild(document.createTextNode(friendlyName));
 	        }
 	        styleOptionButton.addEventListener("click", function () {
@@ -46851,15 +46965,27 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                if (_this.options.autoSelectionMode) {
 	                    _this.map.setStyle({ style: name });
 	                }
+	                Object.entries(_this.styleButtons).forEach(function (_a) {
+	                    var _b = __read(_a, 2), styleName = _b[0], button = _b[1];
+	                    return button.setAttribute('aria-current', styleName === name ? 'true' : 'false');
+	                });
 	            }
 	        });
+	        var iconDiv = document.createElement('div');
+	        iconDiv.classList.add('selected-icon');
+	        styleOptionButton.appendChild(iconDiv);
 	        return styleOptionButton;
 	    };
 	    StyleControl.prototype.buildCurrStyleBtn = function (container, opsGrid) {
 	        var selectCurrButton = document.createElement("button");
-	        selectCurrButton.classList.add(StyleControl.Css.button);
+	        if (this.options.layout == 'icons') {
+	            selectCurrButton.classList.add(StyleControl.Css.button);
+	        }
+	        else {
+	            selectCurrButton.classList.add(StyleControl.Css.listButton);
+	        }
 	        selectCurrButton.classList.add(StyleControl.Css.currentStyle);
-	        selectCurrButton.setAttribute("title", "Select Style");
+	        selectCurrButton.setAttribute("aria-label", "Select Style");
 	        selectCurrButton.setAttribute("alt", "Select Style");
 	        selectCurrButton.setAttribute("type", "button");
 	        this.currStyleImage = new Image();
@@ -46873,7 +46999,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var _this = this;
 	        var styleOpsGrid = document.createElement("div");
 	        styleOpsGrid.classList.add(StyleControl.Css.styleOptions);
-	        styleOpsGrid.classList.add(this.options.layout);
+	        if (this.options.layout === 'icons') {
+	            styleOpsGrid.classList.add(this.options.layout);
+	        }
+	        else {
+	            styleOpsGrid.classList.add(StyleControl.Css.dropdown);
+	        }
 	        styleOpsGrid.setAttribute("aria-label", "Style Options");
 	        styleOpsGrid.classList.add("hidden-accessible-element");
 	        // Once the map's style definition is initialized create a map between style names and icons.
@@ -46907,6 +47038,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    if (style.name === currStyle) {
 	                        _this.currStyleImage.src = iconUrl;
 	                        _this.currStyleImage.alt = _this.mapToFriendlyStyleName(style.name);
+	                        _this.currStyleImage.parentElement.appendChild(document.createTextNode(_this.mapToFriendlyStyleName(style.name)));
 	                    }
 	                }
 	            }
@@ -46922,6 +47054,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    var styleOptionButton = _this.buildSelectStyleBtn(styleName, iconUrl);
 	                    styleOpsGrid.appendChild(styleOptionButton);
 	                    _this.styleButtons[styleName] = styleOptionButton;
+	                    if (_this.options.layout === "icons") {
+	                        var tooltip = buildAccessibleTooltip(_this.mapToFriendlyStyleName(styleName));
+	                        styleOpsGrid.appendChild(tooltip);
+	                        positionTooltip(tooltip, styleOptionButton);
+	                    }
 	                });
 	            }
 	            else {
@@ -46930,8 +47067,17 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    var styleOptionButton = _this.buildSelectStyleBtn(styleName, iconUrl);
 	                    styleOpsGrid.appendChild(styleOptionButton);
 	                    _this.styleButtons[styleName] = styleOptionButton;
+	                    if (_this.options.layout === "icons") {
+	                        var tooltip = buildAccessibleTooltip(_this.mapToFriendlyStyleName(styleName));
+	                        styleOpsGrid.appendChild(tooltip);
+	                        positionTooltip(tooltip, styleOptionButton);
+	                    }
 	                });
 	            }
+	            Object.entries(_this.styleButtons).forEach(function (_a) {
+	                var _b = __read(_a, 2), styleName = _b[0], button = _b[1];
+	                return button.setAttribute('aria-current', styleName === currStyle ? 'true' : 'false');
+	            });
 	            _this.map.events.add("styledata", _this.onStyleChange);
 	        });
 	        return styleOpsGrid;
@@ -46947,9 +47093,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    StyleControl.InvertOrderPositions = [exports.ControlPosition.TopRight, exports.ControlPosition.BottomRight];
 	    StyleControl.Css = {
 	        button: "azure-maps-control-button",
+	        listButton: "azure-maps-control-list-button",
+	        expanded: 'expanded',
 	        currentStyle: "curr-style",
 	        inUse: "in-use",
-	        styleOptions: "style-options"
+	        styleOptions: "style-options",
+	        dropdown: "azure-maps-control-dropdown"
 	    };
 	    StyleControl.StyleNamesMap = {
 	        road: "Road",
@@ -46968,11 +47117,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	}(ControlBase));
 
 	/**
-	 * The options for a TrafficControl object.
+	 * The options for setting traffic on the map.
 	 */
-	var TrafficControlOptions = /** @class */ (function (_super) {
-	    __extends(TrafficControlOptions, _super);
-	    function TrafficControlOptions() {
+	var TrafficOptions = /** @class */ (function (_super) {
+	    __extends(TrafficOptions, _super);
+	    function TrafficOptions() {
 	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        /**
 	         * The type of traffic flow to display:
@@ -46981,16 +47130,28 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	         * <p>"absolute" is the absolute speed of the road</p>
 	         * <p>"relative-delay" displays relative speed only where they differ from free-flow;
 	         * false to stop displaying the traffic flow.</p>
-	         * default `"relative"``
-	         * @default "relative"
+	         * default `"none"``
+	         * @default "none"
 	         */
-	        _this.flow = "relative";
+	        _this.flow = "none";
 	        /**
 	         * Whether to display incidents on the map.
-	         * default `true`
-	         * @default true
+	         * default `false`
+	         * @default false
 	         */
-	        _this.incidents = true;
+	        _this.incidents = false;
+	        return _this;
+	    }
+	    return TrafficOptions;
+	}(Options));
+
+	/**
+	 * The options for a TrafficControl object.
+	 */
+	var TrafficControlOptions = /** @class */ (function (_super) {
+	    __extends(TrafficControlOptions, _super);
+	    function TrafficControlOptions() {
+	        var _this = _super !== null && _super.apply(this, arguments) || this;
 	        /**
 	         * Specifies if the control is in the active state (displaying traffic).
 	         * Default: false
@@ -47006,7 +47167,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        return _this;
 	    }
 	    return TrafficControlOptions;
-	}(Options));
+	}(TrafficOptions));
 
 	/**
 	 * A control that toggles traffic data on the map.
@@ -47021,9 +47182,49 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var _this = _super.call(this) || this;
 	        _this.hasMouse = false;
 	        _this.hasFocus = false;
-	        _this.options = new TrafficControlOptions().merge(options);
+	        // desired map traffic state when control is enabled 
+	        _this.options = new TrafficOptions().merge({
+	            flow: 'relative',
+	            incidents: true
+	        });
+	        _this.style = exports.ControlStyle.light;
+	        _this.container = null;
+	        _this.trafficButton = null;
+	        _this.map = null;
+	        if (options) {
+	            _this.initIsActive = options.isActive || false;
+	            _this.options.flow = options.flow || 'relative';
+	            _this.options.incidents = options.incidents || true;
+	            _this.style = options.style || exports.ControlStyle.light;
+	        }
 	        return _this;
 	    }
+	    Object.defineProperty(TrafficControl.prototype, "isActive", {
+	        /**
+	         * Current control state (is traffic information displayed?)
+	         */
+	        get: function () {
+	            if (!this.map) {
+	                return false;
+	            }
+	            var trafficState = this.map.getTraffic();
+	            return trafficState.flow !== "none" || trafficState.incidents;
+	        },
+	        /**
+	         * Sets the control state
+	         */
+	        set: function (newValue) {
+	            if (!this.map) {
+	                return;
+	            }
+	            this.map.setTraffic({
+	                flow: newValue ? this.options.flow : 'none',
+	                incidents: newValue ? this.options.incidents : false
+	            });
+	        },
+	        enumerable: false,
+	        configurable: true
+	    });
 	    /**
 	     * Initialization method for the control which is called when added to the map.
 	     * @param map The map that the control will be added to.
@@ -47031,49 +47232,63 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	     * @return An HTMLElement to be placed on the map for the control.
 	     */
 	    TrafficControl.prototype.onAdd = function (map) {
-	        this.container = this.buildContainer(map, this.options.style, "Traffic Control");
+	        this.map = map;
+	        var trafficState = map.getTraffic();
+	        // bring map traffic state in sync with desired if initIsActive have been set
+	        if (this.initIsActive !== undefined) {
+	            this.isActive = this.initIsActive;
+	        }
+	        this.container = this.buildContainer(map, this.style, "Traffic Control");
 	        this.container.style.flexDirection = "column";
 	        var trafficButton = this.constructTrafficButton(map);
 	        this.container.appendChild(trafficButton);
+	        var tooltip = buildAccessibleTooltip("Toggle Traffic Display");
+	        this.container.appendChild(tooltip);
+	        positionTooltip(tooltip, trafficButton);
 	        return this.container;
 	    };
+	    TrafficControl.prototype.onRemove = function () {
+	        this.map = null;
+	    };
 	    /**
 	     * Get the TrafficControlOptions
 	     */
 	    TrafficControl.prototype.getOptions = function () {
-	        return cloneDeep_1(this.options);
+	        return new TrafficControlOptions().merge({
+	            isActive: this.isActive,
+	            flow: this.options.flow,
+	            incidents: this.options.incidents,
+	            style: this.style
+	        });
+	    };
+	    /**
+	     * Updates the button state according to current traffic state
+	     * This is invoked on init in constructTrafficButton and on each Map.setTraffic()
+	     */
+	    TrafficControl.prototype.updateButtonState = function () {
+	        if (this.isActive) {
+	            this.container.classList.add("in-use");
+	        }
+	        else {
+	            this.container.classList.remove("in-use");
+	        }
+	        if (this.trafficButton) {
+	            this.trafficButton.setAttribute("aria-pressed", this.isActive ? "true" : "false");
+	        }
 	    };
 	    TrafficControl.prototype.constructTrafficButton = function (map) {
 	        var _this = this;
 	        var trafficButton = document.createElement("button");
 	        trafficButton.classList.add("azure-maps-control-button");
 	        trafficButton.classList.add("traffic");
-	        trafficButton.setAttribute("title", "Toggle Traffic Display");
+	        trafficButton.setAttribute("aria-label", "Toggle Traffic Display");
 	        trafficButton.setAttribute("alt", "Toggle Traffic Display");
 	        trafficButton.setAttribute("type", "button");
+	        this.trafficButton = trafficButton;
+	        this.updateButtonState();
 	        // toggle button
 	        trafficButton.addEventListener("click", function () {
-	            var t = map.getTraffic();
-	            _this.options.isActive = !(t.flow !== "none" || t.incidents);
-	            if (_this.options.isActive) {
-	                map.setTraffic({
-	                    flow: _this.options.flow,
-	                    incidents: _this.options.incidents
-	                });
-	                _this.container.classList.add("in-use");
-	            }
-	            else {
-	                map.setTraffic({
-	                    flow: "none",
-	                    incidents: false
-	                });
-	                _this.container.classList.remove("in-use");
-	            }
-	        });
-	        map.events.addOnce("styledata", function () {
-	            if (_this.options.isActive) {
-	                trafficButton.dispatchEvent(new Event("click"));
-	            }
+	            _this.isActive = !_this.isActive;
 	        });
 	        return trafficButton;
 	    };
@@ -47111,18 +47326,19 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var e_1, _a, e_2, _b;
 	        var trafficLegend = document.createElement("div");
 	        trafficLegend.classList.add("traffic-legend", "hidden");
-	        trafficLegend.setAttribute("title", "Traffic Legend");
 	        trafficLegend.setAttribute("alt", "Traffic Legend");
 	        var trafficLegendTable = document.createElement("table");
 	        // legend table title
 	        var tr1 = document.createElement("tr");
 	        var td = document.createElement("td");
-	        td.setAttribute("title", "Traffic");
 	        td.setAttribute("alt", "Traffic");
 	        td.appendChild(document.createTextNode("Traffic"));
+	        var tooltip = buildAccessibleTooltip("Traffic");
 	        td.classList.add("traffic-legend-title");
 	        td.colSpan = 6;
 	        tr1.appendChild(td);
+	        tr1.appendChild(tooltip);
+	        positionTooltip(tooltip, td);
 	        trafficLegendTable.appendChild(tr1);
 	        // legend table contents
 	        var tr2 = document.createElement("tr");
@@ -47131,13 +47347,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                var col = _d.value;
 	                var data = document.createElement("td");
 	                if (col === "Fast" || col === "Slow") {
-	                    data.setAttribute("title", col);
 	                    data.setAttribute("alt", col);
 	                    data.appendChild(document.createTextNode(col));
 	                    data.classList.add("traffic-legend-text");
 	                }
 	                else {
 	                    data.classList.add("traffic-legend-colors");
+	                    data.setAttribute("aria-label", "Traffic Legend");
+	                    data.setAttribute("role", "img");
 	                    try {
 	                        for (var col_1 = (e_2 = void 0, __values(col)), col_1_1 = col_1.next(); !col_1_1.done; col_1_1 = col_1.next()) {
 	                            var color = col_1_1.value;
@@ -47155,6 +47372,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    }
 	                }
 	                tr2.appendChild(data);
+	                var tooltip_1 = buildAccessibleTooltip(col instanceof Array ? "Traffic Legend" : col);
+	                tr2.appendChild(tooltip_1);
+	                positionTooltip(tooltip_1, data);
 	            }
 	        }
 	        catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -48105,6 +48325,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	 * Cached array of powers of 10. This will be faster than call Math.pow.
 	 */
 	var POWERS_OF_10 = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000];
+	/**
+	 * Maximum latitude as defined in WebMercator
+	 */
+	var WEBMERCATOR_MAXLAT = 85.0511;
 	//////////////////////
 	/// Private Functions
 	//////////////////////
@@ -48979,11 +49203,42 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    var normalUnit = _normalizeDistanceUnit(units);
 	    return convertDistance(EARTH_RADIUS_SEMI_MAJOR_AXIS, DistanceUnits.meters, normalUnit);
 	}
+	/**
+	 * constructs raw geodesic path that doesn't handle antimeridian crossing
+	 */
+	function _constructGeodesic(position, nextPosition, nodeSize) {
+	    var geodesic = [];
+	    // Convert positions from degrees to Radians
+	    var lat1 = _toRadians(position[1]);
+	    var lon1 = _toRadians(position[0]);
+	    var lat2 = _toRadians(nextPosition[1]);
+	    var lon2 = _toRadians(nextPosition[0]);
+	    // Calculate the total extent of the route
+	    var d = 2 * Math.asin(Math.sqrt(Math.pow((Math.sin((lat1 - lat2) / 2)), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow((Math.sin((lon1 - lon2) / 2)), 2)));
+	    // Calculate positions at fixed intervals along the route
+	    for (var k = 0; k <= nodeSize; k++) {
+	        var f = (k / nodeSize);
+	        var A = Math.sin((1 - f) * d) / Math.sin(d);
+	        var B = Math.sin(f * d) / Math.sin(d);
+	        // Obtain 3D Cartesian coordinates of each point
+	        var x = A * Math.cos(lat1) * Math.cos(lon1) + B * Math.cos(lat2) * Math.cos(lon2);
+	        var y = A * Math.cos(lat1) * Math.sin(lon1) + B * Math.cos(lat2) * Math.sin(lon2);
+	        var z = A * Math.sin(lat1) + B * Math.sin(lat2);
+	        // Convert these to latitude/longitude
+	        var lat = Math.atan2(z, Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
+	        var lon = Math.atan2(y, x);
+	        lat = _clip(_toDegrees(lat), -85, 85);
+	        lon = _toDegrees(lon);
+	        // Add this to the array
+	        geodesic.push([lon, lat]);
+	    }
+	    return geodesic;
+	}
 	/**
 	 * Takes an array of positions objects and fills in the space between them with accurately positioned positions to form an approximated Geodesic path.
 	 * @param path Array of position objects that form a path to fill in.
 	 * @param nodeSize Number of nodes to insert between each position. Default: 15
-	 * @returns An array of position objects that form a geodesic paths.
+	 * @returns An array of position objects that form a geodesic paths, geodesic path crossing antimeridian will contain longitude outside of -180 to 180 range. See getGeodesicPaths() when this is undesired.
 	 */
 	function getGeodesicPath(path, nodeSize) {
 	    if (!nodeSize || nodeSize <= 0) {
@@ -48997,34 +49252,70 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        locs = path.coordinates;
 	    }
 	    var len = locs.length - 1;
-	    var outputLocs = [];
+	    var geodesic = [];
 	    for (var i = 0; i < len; i++) {
 	        // Convert positions from degrees to Radians
-	        var lat1 = _toRadians(locs[i][1]);
-	        var lon1 = _toRadians(locs[i][0]);
-	        var lat2 = _toRadians(locs[i + 1][1]);
-	        var lon2 = _toRadians(locs[i + 1][0]);
-	        // Calculate the total extent of the route
-	        var d = 2 * Math.asin(Math.sqrt(Math.pow((Math.sin((lat1 - lat2) / 2)), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow((Math.sin((lon1 - lon2) / 2)), 2)));
-	        // Calculate positions at fixed intervals along the route
-	        for (var k = 0; k <= nodeSize; k++) {
-	            var f = (k / nodeSize);
-	            var A = Math.sin((1 - f) * d) / Math.sin(d);
-	            var B = Math.sin(f * d) / Math.sin(d);
-	            // Obtain 3D Cartesian coordinates of each point
-	            var x = A * Math.cos(lat1) * Math.cos(lon1) + B * Math.cos(lat2) * Math.cos(lon2);
-	            var y = A * Math.cos(lat1) * Math.sin(lon1) + B * Math.cos(lat2) * Math.sin(lon2);
-	            var z = A * Math.sin(lat1) + B * Math.sin(lat2);
-	            // Convert these to latitude/longitude
-	            var lat = Math.atan2(z, Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
-	            var lon = Math.atan2(y, x);
-	            lat = _clip(_toDegrees(lat), -85, 85);
-	            lon = _toDegrees(lon);
-	            // Add this to the array
-	            outputLocs.push([lon, lat]);
+	        geodesic = geodesic.concat(_constructGeodesic(locs[i], locs[i + 1], nodeSize));
+	    }
+	    return geodesic.reduce(function (targetPath, coord) {
+	        var last = targetPath.length > 0 ? targetPath[targetPath.length - 1] : null;
+	        // denormalize longitude on antimeridian crossing
+	        if (last && Math.abs(coord[0] - last[0]) > 180.0) {
+	            var denormLon = last[0] < 0 ? coord[0] - 360.0 : coord[0] + 360.0;
+	            targetPath.push([denormLon, coord[1]]);
 	        }
+	        else {
+	            targetPath.push(coord);
+	        }
+	        return targetPath;
+	    }, []);
+	}
+	/**
+	 * Takes an array of positions objects and fills in the space between them with accurately positioned positions to form an approximated Geodesic path broken by antimeridian into multiple sub-paths.
+	 * @param path Array of position objects that form a path to fill in.
+	 * @param nodeSize Number of nodes to insert between each position. Default: 15
+	 * @returns An array of paths that form geodesic paths, Comparing to getGeodesicPath, sub-paths will always contain longitude in -180 to 180 range
+	 */
+	function getGeodesicPaths(path, nodeSize) {
+	    if (!nodeSize || nodeSize <= 0) {
+	        nodeSize = 15;
 	    }
-	    // TODO: Check for crossing the antimeridian, consider splitting path by -180/180 longitude
+	    var locs;
+	    if (Array.isArray(path)) {
+	        locs = path;
+	    }
+	    else if (path.type && path.type === "LineString") {
+	        locs = path.coordinates;
+	    }
+	    var len = locs.length - 1;
+	    var currentNonCrossing = [];
+	    var outputLocs = [];
+	    for (var i = 0; i < len; i++) {
+	        var geodesic = _constructGeodesic(locs[i], locs[i + 1], nodeSize);
+	        for (var k = 0; k < geodesic.length; k++) {
+	            currentNonCrossing.push(geodesic[k]);
+	            if (k + 1 >= geodesic.length) {
+	                continue;
+	            }
+	            var _a = __read(geodesic[k], 2), lon1 = _a[0], lat1 = _a[1];
+	            var _b = __read(geodesic[k + 1], 2), lon2 = _b[0], lat2 = _b[1];
+	            // split the line by antimeridian 
+	            // and break geodesic into two line segments
+	            if (Math.abs(lon2 - lon1) > 180.0) {
+	                var denormLon2 = lon1 > 0 ? lon2 + 360.0 : lon2 - 360.0;
+	                var antiLon = lon1 > 0 ? 180.0 : -180.0;
+	                var abs = Math.abs(denormLon2 - lon1);
+	                var antiAbs = Math.abs(antiLon - lon1);
+	                var f = antiAbs / abs;
+	                var dLat = (lat2 - lat1) * f;
+	                var antiLat = lat1 + dLat;
+	                currentNonCrossing.push([antiLon, antiLat]);
+	                outputLocs.push(currentNonCrossing);
+	                currentNonCrossing = [[-antiLon, antiLat]];
+	            }
+	        }
+	    }
+	    outputLocs.push(currentNonCrossing);
 	    return outputLocs;
 	}
 	/**
@@ -50431,6 +50722,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	var index$1 = /*#__PURE__*/Object.freeze({
 		__proto__: null,
 		AffineTransform: AffineTransform,
+		WEBMERCATOR_MAXLAT: WEBMERCATOR_MAXLAT,
 		_precision: _precision,
 		get AreaUnits () { return AreaUnits; },
 		get DistanceUnits () { return DistanceUnits; },
@@ -50444,6 +50736,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 		getDistanceTo: getDistanceTo,
 		getEarthRadius: getEarthRadius,
 		getGeodesicPath: getGeodesicPath,
+		getGeodesicPaths: getGeodesicPaths,
 		getHeading: getHeading,
 		getLengthOfPath: getLengthOfPath,
 		getPositionAlongPath: getPositionAlongPath,
@@ -51573,8 +51866,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        this.container.style.flexDirection = "column";
 	        this.zoomInButton = this.constructZoomInButton(map);
 	        this.zoomOutButton = this.constructZoomOutButton(map);
+	        var tooltipZoomIn = buildAccessibleTooltip("Zoom In");
+	        var tooltipZoomOut = buildAccessibleTooltip("Zoom Out");
 	        this.container.appendChild(this.zoomInButton);
+	        this.container.appendChild(tooltipZoomIn);
 	        this.container.appendChild(this.zoomOutButton);
+	        this.container.appendChild(tooltipZoomOut);
+	        positionTooltip(tooltipZoomIn, this.zoomInButton);
+	        positionTooltip(tooltipZoomOut, this.zoomOutButton);
 	        map.events.add('zoom', this.zoomChanged);
 	        map.events.add('minzoomchanged', this.minZoomChanged);
 	        map.events.add('maxzoomchanged', this.maxZoomChanged);
@@ -51600,8 +51899,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        // 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) <= -ZoomControl.WEBMERCATOR_MAXLAT
-	            && BoundingBox.getNorth(this.map.getCamera().bounds) >= ZoomControl.WEBMERCATOR_MAXLAT;
+	        var reachedLatitudeBoundaries = BoundingBox.getSouth(this.map.getCamera().bounds) <= -WEBMERCATOR_MAXLAT
+	            && BoundingBox.getNorth(this.map.getCamera().bounds) >= WEBMERCATOR_MAXLAT;
 	        var zoomOutDisabled = this.map.getCamera().zoom <= this.map._getMap().getMinZoom() || reachedLatitudeBoundaries;
 	        if (this.zoomInButton && this.zoomInButton.disabled != zoomInDisabled) {
 	            this.zoomInButton.disabled = zoomInDisabled;
@@ -51615,7 +51914,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var zoomInButton = document.createElement("button");
 	        zoomInButton.classList.add("azure-maps-control-button");
 	        zoomInButton.classList.add("zoom-in");
-	        zoomInButton.setAttribute("title", "Zoom In");
+	        zoomInButton.setAttribute("aria-label", "Zoom In");
 	        zoomInButton.setAttribute("alt", "Zoom In");
 	        zoomInButton.setAttribute("type", "button");
 	        zoomInButton.addEventListener("click", function () {
@@ -51632,7 +51931,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var zoomOutButton = document.createElement("button");
 	        zoomOutButton.classList.add("azure-maps-control-button");
 	        zoomOutButton.classList.add("zoom-out");
-	        zoomOutButton.setAttribute("title", "Zoom Out");
+	        zoomOutButton.setAttribute("aria-label", "Zoom Out");
 	        zoomOutButton.setAttribute("alt", "Zoom Out");
 	        zoomOutButton.setAttribute("type", "button");
 	        zoomOutButton.addEventListener("click", function () {
@@ -51644,7 +51943,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        });
 	        return zoomOutButton;
 	    };
-	    ZoomControl.WEBMERCATOR_MAXLAT = 85.0511;
 	    ZoomControl.ZOOM_DURATION_MS = 200;
 	    return ZoomControl;
 	}(ControlBase));
@@ -52507,6 +52805,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (value instanceof Source) {
 	            return value;
 	        }
+	        else {
+	            return undefined;
+	        }
 	    };
 	    return LayerOptions;
 	}(Options));
@@ -52763,6 +53064,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (value instanceof Source) {
 	            return value;
 	        }
+	        else {
+	            return undefined;
+	        }
 	    };
 	    return HeatMapLayerOptions;
 	}(LayerOptions));
@@ -52958,6 +53262,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (value instanceof Source) {
 	            return value;
 	        }
+	        else {
+	            return undefined;
+	        }
 	    };
 	    return ImageLayerOptions;
 	}(MediaLayerOptions));
@@ -54745,6 +55052,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (_this.options.closeButton) {
 	            _this.closeBtn = _this._createCloseButton();
 	            _this.contentDiv.appendChild(_this.closeBtn);
+	            var tooltip = buildAccessibleTooltip("close");
+	            _this.contentDiv.appendChild(tooltip);
+	            positionTooltip(tooltip, _this.closeBtn, true);
 	        }
 	        return _this;
 	    }
@@ -54778,6 +55088,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        if (newOptions.closeButton && !this.closeBtn) {
 	            this.closeBtn = this._createCloseButton();
 	            this.contentDiv.appendChild(this.closeBtn);
+	            var tooltip = buildAccessibleTooltip("close");
+	            this.contentDiv.appendChild(tooltip);
+	            positionTooltip(tooltip, this.closeBtn, true);
 	        }
 	        else if (!newOptions.closeButton && this.closeBtn) {
 	            this.contentDiv.removeChild(this.closeBtn);
@@ -54955,7 +55268,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        ele.addEventListener("click", this.close);
 	        ele.classList.add(Popup.Css.close);
 	        ele.setAttribute("aria-label", "close");
-	        ele.setAttribute("title", "close");
 	        ele.setAttribute("tabindex", "0");
 	        ele.innerHTML = "&times;";
 	        return ele;
@@ -55248,7 +55560,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                (newOptions.color !== this.options.color ||
 	                    newOptions.text !== this.options.text ||
 	                    newOptions.secondaryColor !== this.options.secondaryColor)) {
-	                this.element.innerHTML = this._getSubbedHtmlString(newOptions);
+	                this.element.innerHTML = this._getSubbedHtmlString(newOptions) || "";
 	            }
 	            if (newOptions.draggable !== this.options.draggable) {
 	                this._setDraggable(newOptions.draggable);
@@ -55343,7 +55655,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        // Must converts a HTML string to a HTMLElement (div with innerHTML == htmlContent).
 	        // Must also handle the substitution of HTML string placeholders.
 	        if (typeof options.htmlContent === "string") {
-	            var subbedContent = this._getSubbedHtmlString(options);
+	            var subbedContent = this._getSubbedHtmlString(options) || "";
 	            this.element = Html.convertHtmlString(subbedContent);
 	        }
 	        else {
@@ -55394,6 +55706,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                .replace(/{secondaryColor}/ig, options.secondaryColor || "")
 	                .replace(/{text}/ig, options.text || "");
 	        }
+	        else {
+	            return null;
+	        }
 	    };
 	    /**
 	     * Returns the element that should contain all the markers.
@@ -67250,16 +67565,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            }
 	            this.options.copyrightContent = newOptions.copyrightContent;
 	        }
-	        if (!newOptions.showLogo && this.logoDiv) {
+	        if (!newOptions.showLogo && this.logoAnchor) {
 	            this.addRemoveLogo(false);
 	        }
-	        else if (newOptions.showLogo && !this.logoDiv) {
+	        else if (newOptions.showLogo && !this.logoAnchor) {
 	            this.addRemoveLogo(true);
 	        }
-	        if (!newOptions.showFeedbackLink && this.feedbackDiv) {
+	        if (!newOptions.showFeedbackLink && this.feedbackAnchor) {
 	            this.addRemoveFeedbackDiv(false);
 	        }
-	        else if (newOptions.showFeedbackLink && !this.feedbackDiv) {
+	        else if (newOptions.showFeedbackLink && !this.feedbackAnchor) {
 	            this.addRemoveFeedbackDiv(true);
 	        }
 	        this.options = newOptions;
@@ -67278,56 +67593,45 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        return copyright;
 	    };
 	    CopyrightControl.prototype.buildFeedbackLink = function () {
-	        var _this = this;
 	        var link = document.createElement("a");
+	        link.setAttribute("alt", "Give Feedback");
+	        link.setAttribute("aria-label", "Give Feedback");
 	        link.href = "https://feedback.azuremaps.com";
 	        link.target = "_blank";
 	        link.rel = "noopener";
 	        link.className = "azure-map-feedback";
-	        link.onmouseover = function () {
-	            _this.tooltip.style.visibility = "visible";
-	        };
-	        link.onmouseout = function () {
-	            _this.tooltip.style.visibility = "hidden";
-	        };
 	        return link;
 	    };
-	    CopyrightControl.prototype.addToolTip = function () {
-	        var tooltip = document.createElement("div");
-	        var tooltipText = document.createElement("div");
-	        tooltipText.innerText = "Give Feedback";
-	        tooltipText.className = "azure-map-feedback-tooltip";
-	        var tooltipBeak = document.createElement("div");
-	        tooltipBeak.className = "azure-map-feedback-tooltip-beak";
-	        tooltip.appendChild(tooltipText);
-	        tooltip.appendChild(tooltipBeak);
-	        tooltip.style.visibility = "hidden";
-	        tooltip.style.zIndex = "1000";
-	        return tooltip;
-	    };
 	    CopyrightControl.prototype.addRemoveFeedbackDiv = function (add) {
 	        if (add) {
-	            this.feedbackDiv = this.buildFeedbackLink();
-	            this.container.appendChild(this.feedbackDiv);
-	            this.tooltip = this.addToolTip();
+	            this.feedbackAnchor = this.buildFeedbackLink();
+	            this.tooltip = buildAccessibleTooltip("Give Feedback");
+	            this.container.appendChild(this.feedbackAnchor);
 	            this.container.appendChild(this.tooltip);
+	            positionTooltip(this.tooltip, this.feedbackAnchor);
 	        }
 	        else {
-	            this.feedbackDiv.remove();
+	            this.feedbackAnchor.remove();
 	            this.tooltip.remove();
 	            delete this.tooltip;
-	            delete this.feedbackDiv;
+	            delete this.feedbackAnchor;
 	        }
 	    };
 	    CopyrightControl.prototype.addRemoveLogo = function (add) {
 	        if (add) {
-	            this.logoDiv = document.createElement("div");
-	            this.logoDiv.className = "azure-map-logo";
-	            this.container.appendChild(this.logoDiv);
+	            this.logoAnchor = document.createElement("a");
+	            this.logoAnchor.className = "azure-map-logo";
+	            this.logoAnchor.href = "https://microsoft.com";
+	            this.logoAnchor.setAttribute("aria-label", "Microsoft");
+	            this.container.appendChild(this.logoAnchor);
+	            this.logoTooltip = buildAccessibleTooltip("Visit microsoft.com");
+	            this.container.appendChild(this.logoTooltip);
+	            positionTooltip(this.logoTooltip, this.logoAnchor);
 	        }
 	        else {
-	            this.logoDiv.remove();
-	            delete this.logoDiv;
+	            this.logoAnchor.remove();
+	            this.logoTooltip.remove();
+	            delete this.logoAnchor;
 	        }
 	    };
 	    return CopyrightControl;
@@ -68380,6 +68684,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                if (this._getCanonicalZoom(this._lastCam.zoom) !== this._getCanonicalZoom(cam.zoom)) {
 	                    msg.push("to " + this._getCanonicalZoom(cam.zoom) + " level");
 	                }
+	                // announce maximum zoom reached
+	                if (cam.zoom >= cam.maxZoom) {
+	                    msg.push("Zoom In button disabled, maximum zoom level reached");
+	                }
+	                var reachedLatitudeBoundaries = BoundingBox.getSouth(cam.bounds) <= -WEBMERCATOR_MAXLAT
+	                    && BoundingBox.getNorth(cam.bounds) >= WEBMERCATOR_MAXLAT;
+	                // annouce minimum zoom level reached
+	                if (cam.zoom <= cam.minZoom || reachedLatitudeBoundaries) {
+	                    msg.push("Zoom Out button disabled, minimum zoom level reached");
+	                }
 	                // Add the complete message to the actions array.
 	                actions.push(msg.join(" "));
 	            }
@@ -68880,14 +69194,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var titleEl = document.createElement("div");
 	        titleEl.classList.add("incident-popup-title");
 	        titleEl.classList.add("font-segoeui-b");
-	        titleEl.setAttribute("tabindex", "0");
 	        titleEl.innerText = incident.properties.incidentType;
 	        titleEl.setAttribute("aria-label", "Incident Type " + incident.properties.incidentType);
 	        var subtitleEl = document.createElement("div");
 	        subtitleEl.classList.add("incident-popup-subtitle");
 	        subtitleEl.classList.add("font-segoeui-b");
 	        subtitleEl.setAttribute("aria-label", "Incident Description " + incident.properties.description);
-	        subtitleEl.setAttribute("tabindex", "0");
 	        subtitleEl.innerText = incident.properties.description;
 	        var headerEl = document.createElement("div");
 	        headerEl.classList.add("incident-popup-header");
@@ -68947,7 +69259,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        messageEl.classList.add("message");
 	        messageEl.classList.add("font-segoeui");
 	        messageEl.setAttribute("aria-label", "Incident " + iconName + " " + message);
-	        messageEl.setAttribute("tabindex", "0");
 	        messageEl.innerText = message;
 	        infoSectionEl.appendChild(iconEl);
 	        infoSectionEl.appendChild(messageEl);
@@ -69244,9 +69555,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    if (_this.dpPoint) {
 	                        _this.map._getMap().touchZoomRotate.enable();
 	                        _this.map._getMap().dragPan.enable();
-	                        _this.map._getMap().touchZoomRotate.onStart(Date.now() - _this.startTiming >= _this.delay
-	                            ? data.originalEvent
-	                            : _this.startEventData.originalEvent);
 	                    }
 	                    _this.dpPoint = undefined;
 	                    return;
@@ -74983,6 +75291,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        else if (this.options.authType === exports.AuthenticationType.subscriptionKey) {
 	            return this.options.subscriptionKey;
 	        }
+	        else {
+	            return undefined;
+	        }
 	    };
 	    /**
 	     * Given a token, calculate the time left for token expiry
@@ -75719,7 +76030,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	     */
 	    EventManager.prototype._invokeListeners = function (eventType, layer, args) {
 	        var _this = this;
-	        var callbacks = this.mapCallbackHandler.getEventCallbacks(eventType, layer);
+	        // copy event callbacks in order to prevent being mutated during iteration below (even callbacks added as part of other event callbacks) 
+	        var callbacks = new Dictionary(this.mapCallbackHandler.getEventCallbacks(eventType, layer));
 	        if (callbacks) {
 	            callbacks.forEach(function (_a, callback) {
 	                var _b = __read(_a, 2), _ = _b[0], once = _b[1];
@@ -76033,11 +76345,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                var timedOut_1 = false;
 	                // Use the map to send the request so transformRequest is used.
 	                _this.map._sendRequest(imageSrc, "Image").then(function (response) {
-	                    if (!timedOut_1) {
-	                        return response.blob();
-	                    }
+	                    return !timedOut_1 ? response.blob() : undefined;
 	                }).then(function (blob) {
-	                    if (!timedOut_1) {
+	                    if (!timedOut_1 && blob) {
 	                        clearTimeout(timeoutId_1);
 	                        var imageEle_1 = new Image();
 	                        // Wait for the blob to load into the element.
@@ -77798,35 +78108,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    return StyleOptions;
 	}(Options));
 
-	/**
-	 * The options for setting traffic on the map.
-	 */
-	var TrafficOptions = /** @class */ (function (_super) {
-	    __extends(TrafficOptions, _super);
-	    function TrafficOptions() {
-	        var _this = _super !== null && _super.apply(this, arguments) || this;
-	        /**
-	         * The type of traffic flow to display:
-	         * <p>"none" is to display no traffic flow data</p>
-	         * <p>"relative" is the speed of the road relative to free-flow</p>
-	         * <p>"absolute" is the absolute speed of the road</p>
-	         * <p>"relative-delay" displays relative speed only where they differ from free-flow;
-	         * false to stop displaying the traffic flow.</p>
-	         * default `"none"``
-	         * @default "none"
-	         */
-	        _this.flow = "none";
-	        /**
-	         * Whether to display incidents on the map.
-	         * default `false`
-	         * @default false
-	         */
-	        _this.incidents = false;
-	        return _this;
-	    }
-	    return TrafficOptions;
-	}(Options));
-
 	var composeTransformers = function (transformers) { return transformers.length == 0
 	    ? undefined
 	    : transformers.slice(1).reduce(function (chained, transform) {
@@ -77948,6 +78229,31 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	         * By default, it is set to half the number of CPU cores (capped at 6).
 	         */
 	        _this.workerCount = getWorkerCount();
+	        /**
+	         * Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds.
+	         * This setting affects all symbol layers.
+	         * This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
+	         * @default 300
+	         */
+	        _this.fadeDuration = 300;
+	        /**
+	         * Defines a CSS font-family for locally overriding generation of glyphs in the
+	         * 'CJK Unified Ideographs', 'Hiragana', 'Katakana' and 'Hangul Syllables' ranges.
+	         * In these ranges, font settings from the map's style will be ignored,
+	         * except for font-weight keywords (light/regular/medium/bold). Set to false,
+	         * to enable font settings from the map's style for these glyph ranges.
+	         * The purpose of this option is to avoid bandwidth-intensive glyph server requests.
+	         * @default 'sans-serif'
+	         */
+	        _this.localIdeographFontFamily = 'sans-serif';
+	        /**
+	         * True to validate styles before it's getting applied.
+	         * Validation takes significant(few hundred ms) time to process styles during initial load.
+	         * Can be set to false for production environment to improve performance.
+	         * @internal
+	         * @default 'true'
+	         */
+	        _this.validateStyle = true;
 	        return _this;
 	    }
 	    /**
@@ -78084,13 +78390,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var _a, _b;
 	        var layerId = (_b = (_a = layer) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : layer;
 	        if (!layerId.startsWith("microsoft.")) {
-	            return;
+	            return undefined;
 	        }
 	        var idTokens = layerId.split('.');
 	        if (idTokens.length >= 4) {
 	            return idTokens[3];
 	        }
-	        return;
+	        return undefined;
 	    };
 	    return LayerGroupComparator;
 	}());
@@ -78147,7 +78453,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    StyleManager.prototype.setStyleUrl = function (styleOptions) {
 	        var styleUrl = this.getStyleUrl(styleOptions);
 	        try {
-	            this.map._getMap().setStyle(styleUrl, { diff: true, stylePatch: this._stylePatch.bind(this) });
+	            this.map._getMap().setStyle(styleUrl, {
+	                diff: true,
+	                stylePatch: this._stylePatch.bind(this),
+	                validate: this.serviceOptions.validateStyle
+	            });
 	        }
 	        catch (e) {
 	            throw e;
@@ -78211,6 +78521,22 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	     */
 	    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 = [];
@@ -78221,10 +78547,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            currentLayerGroupId = nextLayerGroup;
 	            currentLayerGroupLayers = [];
 	        };
-	        // 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();
 	        nextStyle.layers.forEach(function (nextLayer) {
 	            var _a, _b, _c;
 	            var layerGroup = LayerGroupComparator.getLayerGroup(nextLayer.id);
@@ -78490,6 +78812,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            var mapboxMapOptions = {
 	                attributionControl: false,
 	                container: container,
+	                fadeDuration: _this.serviceOptions.fadeDuration,
+	                localIdeographFontFamily: _this.serviceOptions.localIdeographFontFamily,
 	                preserveDrawingBuffer: _this.styleOptions.preserveDrawingBuffer,
 	                refreshExpiredTiles: _this.serviceOptions.refreshExpiredTiles,
 	                renderWorldCopies: _this.styleOptions.renderWorldCopies,
@@ -79324,6 +79648,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var previousIncidentsOption = this.trafficOptions.incidents;
 	        var previousFlowOption = this.trafficOptions.flow;
 	        this.trafficOptions = new TrafficOptions().merge(this.trafficOptions, options);
+	        this.controls.getControls().filter(function (control) { return control instanceof TrafficControl; }).forEach(function (control) {
+	            return control.updateButtonState();
+	        });
 	        if (this.incidentDelegate) {
 	            if (this.trafficOptions.incidents) {
 	                if (!previousIncidentsOption) {