From c865d4e77fb5116bdbabe689337806484272d91e Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Mon, 30 Sep 2024 03:35:06 -0500
Subject: [PATCH 1/6] Map - support Azure provider

---
 .../devextreme/js/__internal/ui/map/m_map.ts  |   2 +
 .../ui/map/m_provider.dynamic.azure.ts        | 456 ++++++++++++++++++
 .../ui/map/m_provider.dynamic.google.ts       |  11 -
 .../__internal/ui/map/m_provider.dynamic.ts   |  13 +
 4 files changed, 471 insertions(+), 11 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts

diff --git a/packages/devextreme/js/__internal/ui/map/m_map.ts b/packages/devextreme/js/__internal/ui/map/m_map.ts
index 2f70418c9eca..b72404aceaa4 100644
--- a/packages/devextreme/js/__internal/ui/map/m_map.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_map.ts
@@ -15,12 +15,14 @@ import { addNamespace } from '@js/events/utils/index';
 import errors from '@js/ui/widget/ui.errors';
 import Widget from '@js/ui/widget/ui.widget';
 
+import azure from './m_provider.dynamic.azure';
 import bing from './m_provider.dynamic.bing';
 import google from './m_provider.dynamic.google';
 // NOTE external urls must have protocol explicitly specified (because inside Cordova package the protocol is "file:")
 import googleStatic from './m_provider.google_static';
 
 const PROVIDERS = {
+  azure,
   googleStatic,
   google,
   bing,
diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
new file mode 100644
index 000000000000..2be2aa747b35
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
@@ -0,0 +1,456 @@
+import Color from '@js/color';
+import $ from '@js/core/renderer';
+import ajax from '@js/core/utils/ajax';
+import { noop } from '@js/core/utils/common';
+import { Deferred } from '@js/core/utils/deferred';
+import { map } from '@js/core/utils/iterator';
+import { isDefined } from '@js/core/utils/type';
+import { getWindow } from '@js/core/utils/window';
+import errors from '@js/ui/widget/ui.errors';
+
+import DynamicProvider from './m_provider.dynamic';
+
+const window = getWindow();
+
+declare let atlas: any;
+
+const AZURE_LINK = 'https://atlas.microsoft.com/';
+const AZURE_JS_URL = `${AZURE_LINK}sdk/javascript/mapcontrol/3/atlas.min.js`;
+const AZURE_CSS_URL = `${AZURE_LINK}/sdk/javascript/mapcontrol/3/atlas.min.css`;
+
+const MAP_MARKER_TOOLTIP_CLASS = 'dx-map-marker-tooltip';
+
+const azureMapsLoaded = function () {
+  // @ts-expect-error
+  return window.atlas && window.atlas.Map;
+};
+
+let azureMapsLoader;
+
+const AzureProvider = DynamicProvider.inherit({
+  _mapType(type) {
+    const mapTypes = {
+      roadmap: 'road',
+      satellite: 'satellite',
+      hybrid: 'satellite_road_labels',
+    };
+    return mapTypes[type] || mapTypes.roadmap;
+  },
+
+  _movementMode(type) {
+    const movementTypes = {
+      driving: 'car',
+      walking: 'pedestrian',
+    };
+    return movementTypes[type] || movementTypes.driving;
+  },
+
+  _resolveLocation(location) {
+    return new Promise((resolve) => {
+      const latLng = this._getLatLng(location);
+      if (latLng) {
+        resolve(new atlas.data.Position(latLng.lng, latLng.lat));
+      } else {
+        this._geocodeLocation(location).then((geocodedLocation) => {
+          resolve(geocodedLocation);
+        });
+      }
+    });
+  },
+
+  _geocodedLocations: {},
+  _geocodeLocationImpl(location) {
+    return new Promise((resolve) => {
+      if (!isDefined(location)) {
+        resolve(new atlas.data.Position(0, 0));
+        return;
+      }
+
+      const searchURL = `${AZURE_LINK}geocode?subscription-key=${this._keyOption('azure')}&api-version=2023-06-01&query=${location}&limit=1`;
+
+      ajax.sendRequest({
+        url: searchURL,
+        dataType: 'json',
+      }).then((result) => {
+        const coordinates = result?.features[0]?.geometry?.coordinates;
+        if (coordinates) {
+          resolve(new atlas.data.Position(coordinates[0], coordinates[1]));
+        } else {
+          resolve(new atlas.data.Position(0, 0));
+        }
+      });
+    });
+  },
+
+  _normalizeLocation(location) {
+    return {
+      lat: location[1],
+      lng: location[0],
+    };
+  },
+
+  _normalizeLocationRect(locationRect) {
+    return {
+      northEast: {
+        lat: locationRect[1],
+        lng: locationRect[2],
+      },
+      southWest: {
+        lat: locationRect[3],
+        lng: locationRect[0],
+      },
+    };
+  },
+
+  _loadImpl() {
+    if (azureMapsLoaded()) {
+      return Promise.resolve();
+    }
+
+    if (!azureMapsLoader) {
+      azureMapsLoader = this._loadMapResources();
+    }
+
+    return azureMapsLoader;
+  },
+
+  _loadMapResources() {
+    return Promise.all([
+      this._loadMapScript(),
+      this._loadMapStyles(),
+    ]);
+  },
+
+  _loadMapScript() {
+    return new Promise<void>((resolve) => {
+      ajax.sendRequest({
+        url: AZURE_JS_URL,
+        dataType: 'script',
+      }).done(() => { resolve(); });
+    });
+  },
+
+  _loadMapStyles() {
+    return new Promise<void>((resolve) => {
+      ajax.sendRequest({
+        url: AZURE_CSS_URL,
+        dataType: 'text',
+      }).done((css) => {
+        $('<style>').html(css).appendTo($('head'));
+        resolve();
+      });
+    });
+  },
+
+  _init() {
+    if (!azureMapsLoaded()) {
+      return this._loadMapResources();
+    }
+    this._createMap();
+
+    return Promise.resolve();
+  },
+
+  _createMap() {
+    //  @ts-expect-error
+    this._mapReady = new Deferred();
+    this._map = new atlas.Map(this._$container[0], {
+      authOptions: {
+        authType: 'subscriptionKey',
+        subscriptionKey: this._keyOption('azure'),
+      },
+      zoom: this._option('zoom'),
+      style: this._mapType(this._option('type')),
+    });
+
+    this._map.events.add('ready', () => {
+      this.updateControls();
+
+      this._mapReady.resolve();
+    });
+  },
+
+  _attachHandlers() {
+    this._map.events.add('move', this._viewChangeHandler.bind(this));
+    this._map.events.add('click', this._clickActionHandler.bind(this));
+  },
+
+  _viewChangeHandler() {
+    const { bounds } = this._map.getCamera();
+    this._option('bounds', this._normalizeLocationRect(bounds));
+
+    const { center } = this._map.getCamera();
+    this._option('center', this._normalizeLocation(center));
+
+    if (!this._preventZoomChangeEvent) {
+      this._option('zoom', this._map.getCamera().zoom);
+    }
+  },
+
+  _clickActionHandler(e) {
+    if (e.type === 'click') {
+      this._fireClickAction({ location: this._normalizeLocation(e.position) });
+    }
+  },
+
+  updateDimensions() {
+    this._map.resize();
+
+    return Promise.resolve();
+  },
+
+  updateMapType() {
+    const type = this._option('type');
+
+    this._map.setStyle({
+      style: this._mapType(type),
+    });
+
+    return Promise.resolve();
+  },
+
+  updateBounds() {
+    return Promise.all([
+      this._resolveLocation(this._option('bounds.northEast')),
+      this._resolveLocation(this._option('bounds.southWest')),
+    ]).then((result) => {
+      this._map.setCamera({
+        bounds: [
+          result[1][0], result[1][1], result[0][0], result[0][1],
+        ],
+        padding: 50,
+      });
+    });
+  },
+
+  updateCenter() {
+    return this._resolveLocation(this._option('center')).then((center) => {
+      this._map.setCamera({
+        center,
+      });
+    });
+  },
+
+  updateZoom() {
+    this._map.setCamera({
+      zoom: this._option('zoom'),
+    });
+
+    return Promise.resolve();
+  },
+
+  updateControls() {
+    const controls = this._option('controls');
+
+    if (controls) {
+      this._map.controls.add([
+        new atlas.control.CompassControl(),
+        new atlas.control.PitchControl(),
+        new atlas.control.StyleControl(),
+        new atlas.control.ZoomControl(),
+      ], {
+        position: 'top-right',
+      });
+    } else {
+      this._map.controls.remove(this._map.controls.getControls());
+    }
+
+    return Promise.resolve();
+  },
+
+  _renderMarker(options) {
+    return this._resolveLocation(options.location).then((location) => {
+      const markerOptions: any = {
+        position: location,
+      };
+      const icon = options.iconSrc || this._option('markerIconSrc');
+      if (icon) {
+        markerOptions.htmlContent = this._createIconTemplate(icon);
+      }
+      const marker = new atlas.HtmlMarker(markerOptions);
+      this._map.markers.add(marker);
+
+      const popup = this._renderTooltip(location, options.tooltip);
+      let handler;
+      if (options.onClick || options.tooltip) {
+        const markerClickAction = this._mapWidget._createAction(options.onClick || noop);
+        const markerNormalizedLocation = this._normalizeLocation(location);
+
+        handler = this._map.events.add('click', marker, () => {
+          markerClickAction({
+            location: markerNormalizedLocation,
+          });
+
+          if (popup) {
+            if (popup.isOpen()) {
+              popup.close();
+            } else {
+              popup.open();
+            }
+          }
+        });
+      }
+
+      return {
+        location,
+        marker,
+        popup,
+        handler,
+      };
+    });
+  },
+
+  _renderTooltip(location, options) {
+    if (!options) {
+      return;
+    }
+
+    options = this._parseTooltipOptions(options);
+
+    const $content = $('<div>').text(options.text).addClass(MAP_MARKER_TOOLTIP_CLASS);
+    const popup = new atlas.Popup({
+      content: $content[0],
+      position: location,
+      pixelOffset: [0, -30],
+    });
+
+    this._map.popups.add(popup);
+
+    if (options.visible) {
+      popup.open();
+    }
+
+    return popup;
+  },
+
+  _destroyMarker(marker) {
+    this._map.markers.remove(marker.marker);
+    if (marker.popup) {
+      this._map.popups.remove(marker.popup);
+    }
+    if (marker.handler) {
+      this._map.events.remove(marker.handler);
+    }
+  },
+
+  _renderRoute(options) {
+    return this._mapReady.promise().then(() => Promise.all(map(options.locations, (point) => this._resolveLocation(point))).then((locations) => new Promise((resolve) => {
+      const routeColor = new Color(options.color || this._defaultRouteColor()).toHex();
+      const routeOpacity = options.opacity || this._defaultRouteOpacity();
+      const queryCoordinates = locations.map((location) => `${location[1]},${location[0]}`);
+      const query = queryCoordinates.join(':');
+      const routeType = this._movementMode(options.mode);
+
+      const searchUrl = `${AZURE_LINK}route/directions/json?subscription-key=${this._keyOption('azure')}&api-version=1.0&query=${query}&travelMode=${routeType}`;
+
+      ajax.sendRequest({
+        url: searchUrl,
+        dataType: 'json',
+      }).then((result) => {
+        if (result?.routes && result.routes.length > 0) {
+          const route = result.routes[0];
+          const routeCoordinates = route.legs.flatMap((leg) => leg.points.map((point) => [point.longitude, point.latitude]));
+          const dataSource = new atlas.source.DataSource();
+          dataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
+            routeLength: route.summary.lengthInMeters,
+            routeDuration: route.summary.travelTimeInSeconds,
+          }));
+
+          const lineLayer = new atlas.layer.LineLayer(dataSource, null, {
+            strokeColor: routeColor,
+            strokeOpacity: routeOpacity,
+            strokeWidth: options.weight || this._defaultRouteWeight(),
+          });
+
+          this._map.sources.add(dataSource);
+          this._map.layers.add(lineLayer);
+
+          const bounds = atlas.data.BoundingBox.fromPositions(routeCoordinates);
+          this._map.setCamera({
+            bounds,
+            padding: 50,
+          });
+
+          resolve({
+            instance: { dataSource, lineLayer },
+            northEast: [bounds[2], bounds[3]],
+            southWest: [bounds[0], bounds[1]],
+          });
+        }
+      }).catch((e) => {
+        const errorMessage = e.responseJSON.error.message;
+        const dataSource = new atlas.source.DataSource();
+        const lineLayer = new atlas.layer.LineLayer(dataSource, null, {});
+
+        errors.log('W1006', errorMessage);
+
+        resolve({
+          instance: { dataSource, lineLayer },
+        });
+      });
+    })));
+  },
+
+  _destroyRoute(routeObject) {
+    this._map.layers.remove(routeObject.instance.lineLayer);
+    this._map.sources.remove(routeObject.instance.dataSource);
+  },
+
+  _fitBounds() {
+    this._updateBounds();
+
+    if (this._bounds && this._option('autoAdjust')) {
+      const zoomBeforeFitting = this._map.getCamera().zoom;
+      this._preventZoomChangeEvent = true;
+
+      this._map.setCamera({
+        bounds: this._bounds,
+        padding: 50,
+      });
+
+      const zoomAfterFitting = this._map.getCamera().zoom;
+      if (zoomBeforeFitting < zoomAfterFitting) {
+        this._map.setCamera({
+          zoom: zoomBeforeFitting,
+        });
+      } else {
+        this._option('zoom', zoomAfterFitting);
+      }
+      delete this._preventZoomChangeEvent;
+    }
+
+    return Promise.resolve();
+  },
+
+  _extendBounds(location) {
+    const [longitude, latitude] = location;
+    const delta = 0.0001;
+    if (this._bounds) {
+      const newBounds = new atlas.data.BoundingBox([longitude, latitude, longitude, latitude]);
+      this._bounds = atlas.data.BoundingBox.merge(this._bounds, newBounds);
+    } else {
+      this._bounds = new atlas.data.BoundingBox([
+        longitude - delta,
+        latitude - delta,
+        longitude + delta,
+        latitude + delta,
+      ]);
+    }
+  },
+
+  clean() {
+    if (this._map) {
+      this._map.events.remove('move', this._viewChangeHandler);
+      this._map.events.remove('click', this._clickActionHandler);
+
+      this._clearMarkers();
+      this._clearRoutes();
+
+      this._map.dispose();
+    }
+
+    return Promise.resolve();
+  },
+});
+
+export default AzureProvider;
diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts
index ba43ef03c997..05cf765163e0 100644
--- a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts
@@ -18,7 +18,6 @@ declare let google: any;
 
 const window = getWindow();
 
-const MAP_MARKER_CLASS = 'dx-map-marker';
 const GOOGLE_MAP_READY = '_googleScriptReady';
 let GOOGLE_URL = `https://maps.googleapis.com/maps/api/js?callback=${GOOGLE_MAP_READY}&libraries=marker&loading=async`;
 const INFO_WINDOW_CLASS = 'gm-style-iw';
@@ -350,16 +349,6 @@ const GoogleProvider = DynamicProvider.inherit({
     });
   },
 
-  _createIconTemplate(iconSrc: string) {
-    const $img = $('<img>');
-
-    $img.attr('src', iconSrc);
-    $img.attr('alt', 'Marker icon');
-    $img.addClass(MAP_MARKER_CLASS);
-
-    return $img[0];
-  },
-
   _renderTooltip(marker, options) {
     if (!options) {
       return;
diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.ts b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.ts
index 81cd858e00c6..4a1c0370a879 100644
--- a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.ts
@@ -1,3 +1,4 @@
+import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import { each, map } from '@js/core/utils/iterator';
 
@@ -5,6 +6,8 @@ import Provider from './m_provider';
 
 const { abstract } = Provider;
 
+const MAP_MARKER_CLASS = 'dx-map-marker';
+
 const DynamicProvider = Provider.inherit({
   _geocodeLocation(location) {
     return new Promise((resolve) => {
@@ -81,6 +84,16 @@ const DynamicProvider = Provider.inherit({
 
   _renderMarker: abstract,
 
+  _createIconTemplate(iconSrc: string) {
+    const $img = $('<img>');
+
+    $img.attr('src', iconSrc);
+    $img.attr('alt', 'Marker icon');
+    $img.addClass(MAP_MARKER_CLASS);
+
+    return $img[0];
+  },
+
   removeMarkers(markersOptionsToRemove) {
     const that = this;
 

From d056e055b7cff78d2506b4b8689656cfa3be9d0d Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Sun, 6 Oct 2024 03:23:07 -0500
Subject: [PATCH 2/6] add tests

---
 .../testing/helpers/forMap/azureMock.js       | 176 ++++
 .../tests/DevExpress.ui.widgets/map.tests.js  |   1 +
 .../mapParts/azureTests.js                    | 884 ++++++++++++++++++
 3 files changed, 1061 insertions(+)
 create mode 100644 packages/devextreme/testing/helpers/forMap/azureMock.js
 create mode 100644 packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js

diff --git a/packages/devextreme/testing/helpers/forMap/azureMock.js b/packages/devextreme/testing/helpers/forMap/azureMock.js
new file mode 100644
index 000000000000..cbfcc5e449f2
--- /dev/null
+++ b/packages/devextreme/testing/helpers/forMap/azureMock.js
@@ -0,0 +1,176 @@
+(() => {
+    const atlas = window.atlas = {
+        Map: function(_, options) {
+            if(options) {
+                atlas.optionsSpecified = true;
+                atlas.options = options;
+            }
+
+            this.events = {
+                add: (eventName, _, callback) => {
+                    atlas.addedEvents = atlas.addedEvents || {};
+                    atlas.addedEvents[eventName] = callback;
+
+                    if(eventName === 'click') {
+                        atlas.clickActionCallback = callback;
+                    }
+                },
+                remove: (eventName) => {
+                    atlas.removedEvents = atlas.removedEvents || {};
+                    atlas.removedEvents[eventName] = true;
+                },
+                addOnce: () => {},
+            };
+            this.setCamera = (cameraOptions) => {
+                window.atlas.cameraOptions = cameraOptions;
+            };
+            this.setStyle = (styleOptions) => {
+                atlas.styleOptions = styleOptions;
+            };
+            this.getStyle = () => {
+                return atlas.styleOption ?? { style: atlas.options.style };
+            };
+            this.setUserInteraction = (interactionOptions) => {
+                atlas.interactionOptions = interactionOptions;
+            };
+            this.resize = () => {
+                atlas.mapResized = true;
+            };
+            this.dispose = () => {
+                atlas.mapDisposed = true;
+            };
+            this.getCamera = () => {
+                return {
+                    bounds: [0, 0, 1, 1],
+                    center: [0, 0],
+                    zoom: 10
+                };
+            };
+            this.controls = {
+                add: (controls, options) => {
+                    atlas.addedControls = controls.length;
+                    atlas.controlOptions = options;
+                },
+                remove: (controls) => {
+                    atlas.addedControls = atlas.addedControls ? atlas.addedControls - controls.length : 0;
+                },
+                getControls: () => {
+                    return new Array(atlas.addedControls ?? 0);
+                }
+            };
+            this.layers = {
+                add: (layer) => {
+                    window.atlas.addedLayers = atlas.addedLayers || [];
+                    window.atlas.addedLayers.push(layer);
+                },
+                remove: (layer) => {
+                    window.atlas.removedLayers = atlas.removedLayers || [];
+                    window.atlas.removedLayers.push(layer);
+                }
+            };
+            this.sources = {
+                add: (source) => {
+                    window.atlas.addedSources = atlas.addedSources || [];
+                    window.atlas.addedSources.push(source);
+                },
+                remove: (source) => {
+                    window.atlas.removedSources = atlas.removedSources || [];
+                    window.atlas.removedSources.push(source);
+                }
+            };
+            this.markers = {
+                add: (marker) => {
+                    atlas.addedMarkers = atlas.addedMarkers || [];
+                    atlas.addedMarkers.push(marker);
+                },
+                remove: (marker) => {
+                    atlas.removedMarkers = atlas.removedMarkers || [];
+                    atlas.removedMarkers.push(marker);
+                }
+            };
+            this.popups = {
+                add: (popup) => {
+                    atlas.addedPopups = atlas.addedPopups || [];
+                    atlas.addedPopups.push(popup);
+                },
+                remove: (popup) => {
+                    atlas.removedPopups = atlas.removedPopups || [];
+                    atlas.removedPopups.push(popup);
+                }
+            };
+        },
+        control: {
+            CompassControl: function() {},
+            PitchControl: function() {},
+            StyleControl: function() {},
+            ZoomControl: function() {},
+        },
+        data: {
+            Feature: function(geometry, properties) {
+                return {
+                    geometry: geometry,
+                    properties: properties
+                };
+            },
+            LineString: function(coordinates) {
+                return {
+                    type: 'LineString',
+                    coordinates: coordinates
+                };
+            },
+            Position: function(longitude, latitude) {
+                return [longitude, latitude];
+            },
+            BoundingBox: function(coordinates) {
+                this.coordinates = coordinates;
+            }
+        },
+        layer: {
+            LineLayer: function(source, _, options) {
+                atlas.lineLayerSource = source;
+                atlas.lineLayerOptions = options;
+            }
+        },
+        source: {
+            DataSource: function() {
+                this.add = (data) => {
+                    atlas.addedData = data;
+                };
+            }
+        },
+        HtmlMarker: function(options) {
+            atlas.markerOptions = options;
+        },
+        Popup: function(options) {
+            atlas.popupOptions = options;
+
+            this.open = () => {
+                atlas.popupOpened = true;
+            };
+            this.close = () => {
+                atlas.popupOpened = false;
+            };
+            this.isOpen = () => {
+                return atlas.popupOpened === true;
+            };
+        },
+    };
+
+    atlas.data.BoundingBox.fromPositions = function(positions) {
+        return new atlas.data.BoundingBox([
+            Math.min(...positions.map(p => p[0])),
+            Math.min(...positions.map(p => p[1])),
+            Math.max(...positions.map(p => p[0])),
+            Math.max(...positions.map(p => p[1]))
+        ]);
+    };
+
+    atlas.data.BoundingBox.merge = function(box1, box2) {
+        return new atlas.data.BoundingBox([
+            Math.min(box1.coordinates[0], box2.coordinates[0]),
+            Math.min(box1.coordinates[1], box2.coordinates[1]),
+            Math.max(box1.coordinates[2], box2.coordinates[2]),
+            Math.max(box1.coordinates[3], box2.coordinates[3])
+        ]);
+    };
+})();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js
index 694734b56be8..d8e43d40a4ee 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js
@@ -13,3 +13,4 @@ import './mapParts/commonTests.js';
 import './mapParts/googleStaticTests.js';
 import './mapParts/googleTests.js';
 import './mapParts/bingTests.js';
+import './mapParts/azureTests.js';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js
new file mode 100644
index 000000000000..926b75fc35fd
--- /dev/null
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js
@@ -0,0 +1,884 @@
+/* global atlas */
+
+import $ from 'jquery';
+import testing from './utils.js';
+import AzureProvider from '__internal/ui/map/m_provider.dynamic.azure';
+import ajaxMock from '../../../helpers/ajaxMock.js';
+
+import 'ui/map';
+
+const MARKERS = testing.MARKERS;
+const ROUTES = testing.ROUTES;
+
+const MARKER_CLASS = 'dx-map-marker';
+
+const prepareTestingAzureProvider = () => {
+    atlas.mapResized = false;
+    atlas.mapDisposed = false;
+    atlas.addedMarkers = [];
+    atlas.removedMarkers = [];
+    atlas.addedPopups = [];
+    atlas.addedLayers = [];
+    atlas.removedLayers = [];
+    atlas.addedSources = [];
+    atlas.removedSources = [];
+    atlas.popupOpened = false;
+};
+
+const moduleConfig = {
+    beforeEach: function() {
+        const fakeURL = '/fakeAzureUrl';
+
+        AzureProvider.remapConstant(fakeURL);
+        AzureProvider.prototype._geocodedLocations = {};
+
+        ajaxMock.setup({
+            url: fakeURL,
+            callback: () => {
+                $.getScript({
+                    url: '../../packages/devextreme/testing/helpers/forMap/azureMock.js',
+                    scriptAttrs: { nonce: 'qunit-test' }
+                }).done(() => {
+                    prepareTestingAzureProvider();
+                });
+            },
+            responseText: {
+                success: true,
+                routes: [{
+                    legs: [{
+                        points: [
+                            { latitude: 10, longitude: 10 },
+                            { latitude: 20, longitude: 20 },
+                            { latitude: 30, longitude: 30 },
+                        ],
+                    }],
+                }],
+                features: [{
+                    geometry: {
+                        coordinates: [77, 77],
+                    },
+                }],
+            },
+        });
+
+        if(window.atlas) {
+            prepareTestingAzureProvider();
+        }
+
+        this.geocodedCoordinates = [77, 77];
+        this.routeCoordinates = [[10, 10], [20, 20], [30, 30]];
+    },
+    afterEach: function() {
+        ajaxMock.clear();
+    }
+};
+
+QUnit.module('map loading', moduleConfig, () => {
+    QUnit.test('map initialize with loaded map', function(assert) {
+        const done = assert.async();
+
+        $.getScript({
+            url: '../../packages/devextreme/testing/helpers/forMap/azureMock.js',
+            scriptAttrs: { nonce: 'qunit-test' }
+        }).done(function() {
+            window.atlas.Map.customFlag = true;
+
+            setTimeout(function() {
+                $('#map').dxMap({
+                    provider: 'azure',
+                    onReady: $.proxy(() => {
+                        assert.ok(window.atlas.Map.customFlag, 'map loaded without getting script');
+
+                        done();
+                    }, this)
+                });
+            });
+        });
+    });
+
+    QUnit.test('map initialize without loaded map', function(assert) {
+        const done = assert.async();
+
+        if(window.atlas) {
+            delete window.atlas;
+        }
+
+        const d1 = $.Deferred();
+        const d2 = $.Deferred();
+
+        $('<div>').appendTo($('#map')).dxMap({
+            provider: 'azure',
+            onReady: $.proxy((e) => {
+                assert.ok(window.atlas, 'map loaded');
+
+                d1.resolve();
+            }, this)
+        });
+
+        $('<div>').appendTo($('#map')).dxMap({
+            provider: 'azure',
+            onReady: $.proxy((e) => {
+                assert.ok(window.atlas, 'map loaded');
+
+                d2.resolve();
+            }, this)
+        });
+
+        $.when(d1, d2).done(function() {
+            done();
+        });
+    });
+
+    QUnit.test('map ready action', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            onReady: (e) => {
+                assert.ok(true, 'map ready');
+                assert.strictEqual(atlas.optionsSpecified, true, 'map options specified');
+                assert.ok(e.originalMap instanceof atlas.Map, 'map instance specified');
+
+                done();
+            }
+        });
+    });
+});
+
+QUnit.module('basic options', moduleConfig, () => {
+    ['someKey', { azure: 'someKey' }].forEach((apiKey) => {
+        QUnit.test(`map credintials should be passed to a config (apiKey is a ${typeof apiKey})`, function(assert) {
+            const done = assert.async();
+
+            $('#map').dxMap({
+                provider: 'azure',
+                apiKey,
+                onReady: () => {
+                    const authOptions = {
+                        authType: 'subscriptionKey',
+                        subscriptionKey: 'someKey',
+                    };
+                    assert.deepEqual(atlas.options.authOptions, authOptions, 'map credentials are passed to config');
+
+                    done();
+                }
+            });
+        });
+    });
+
+    [
+        {
+            type: 'roadmap',
+            style: 'road',
+        },
+        {
+            type: 'hybrid',
+            style: 'satellite_road_labels',
+        },
+        {
+            type: 'satellite',
+            style: 'satellite',
+        }
+    ].forEach(({ type, style }) => {
+        QUnit.test(`map should have style=${style} when type option=${type}`, function(assert) {
+            const done = assert.async();
+
+            $('#map').dxMap({
+                provider: 'azure',
+                type,
+                onReady: () => {
+                    assert.strictEqual(atlas.options.style, style, 'style is passed correctly');
+
+                    done();
+                }
+            });
+        });
+    });
+
+    QUnit.test('map should change style on runtime type update', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            type: 'hybrid',
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(atlas.styleOptions.style, 'road', 'map style is updated');
+
+                done();
+            });
+
+            map.option('type', 'roadmap');
+        });
+    });
+
+    QUnit.test('map should pass zoom option', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            zoom: 10,
+            onReady: () => {
+                assert.strictEqual(atlas.options.zoom, 10, 'zoom is passed on init');
+
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(atlas.cameraOptions.zoom, 5, 'zoom is passed on runtime');
+
+                done();
+            });
+
+            map.option('zoom', 5);
+        });
+    });
+
+    QUnit.test('center should be at [0,0] if it is not specified', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                assert.deepEqual(atlas.cameraOptions.center, [0, 0], 'initial center is correct');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('map should pass center option', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            center: { lng: 20, lat: 10 },
+            onReady: () => {
+                assert.deepEqual(atlas.cameraOptions.center, [20, 10], 'center is passed on init');
+
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.deepEqual(atlas.cameraOptions.center, [200, 200], 'center is passed on runtime');
+
+                done();
+            });
+
+            map.option('center', [200, 200]);
+        });
+    });
+
+    QUnit.test('center should be geocoded if adress is passed as a string', function(assert) {
+        const done = assert.async();
+        const center = 'Cedar Park, Texas';
+
+        $('#map').dxMap({
+            provider: 'azure',
+            center,
+            onReady: () => {
+                assert.deepEqual(atlas.cameraOptions.center, this.geocodedCoordinates, 'center coordinated are correct');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Previously geocoded location should be taken from cache instead of geocoding second time', function(assert) {
+        const done = assert.async();
+        const d1 = $.Deferred();
+        const d2 = $.Deferred();
+        const d3 = $.Deferred();
+        const center = 'Cedar Park, Texas';
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                d1.resolve();
+            }
+        }).dxMap('instance');
+
+        const spy = sinon.spy(map._provider, '_geocodeLocationImpl');
+
+        d1.done(() => {
+            map.option('onUpdated', () => {
+                assert.deepEqual(atlas.cameraOptions.center, this.geocodedCoordinates, 'center coordinated are correct');
+                assert.strictEqual(spy.callCount, 1, 'geocode location function was called');
+
+                d2.resolve();
+            });
+
+            map.option('center', center);
+        });
+
+        d2.done(() => {
+            map.option('onUpdated', () => {
+                assert.deepEqual(atlas.cameraOptions.center, [10, 10], 'center coordinated are updated');
+                assert.strictEqual(spy.callCount, 1, 'geocode location function was not called on numbers location');
+
+                d3.resolve();
+            });
+
+            map.option('center', [10, 10]);
+        });
+
+        d3.done(() => {
+            map.option('onUpdated', () => {
+                assert.deepEqual(atlas.cameraOptions.center, this.geocodedCoordinates, 'center coordinated are udated');
+                assert.strictEqual(spy.callCount, 1, 'geocode location function was not called on the same string location as before');
+
+                done();
+            });
+
+            map.option('center', center);
+        });
+    });
+
+    QUnit.test('Bounds option should have more priority than center option', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            bounds: {
+                northEast: [-10, -10],
+                southWest: [10, 10],
+            },
+            center: [50, 50],
+            onReady: function() {
+                assert.deepEqual(atlas.cameraOptions.bounds, [10, 10, -10, -10], 'comeraOptions have bounds');
+                assert.strictEqual(atlas.cameraOptions.center, undefined, 'comeraOptions do not have center');
+
+                done();
+            }
+        });
+    });
+
+    ['width', 'height'].forEach((dimension) => {
+        QUnit.test(`map should resize on runtime ${dimension} change`, function(assert) {
+            const done = assert.async();
+            const d = $.Deferred();
+
+            const map = $('#map').dxMap({
+                provider: 'azure',
+                dimension: 300,
+                onReady: () => {
+                    assert.strictEqual(atlas.mapResized, false, 'map was not resized so far');
+                    d.resolve();
+                }
+            }).dxMap('instance');
+
+            d.done(() => {
+                map.option('onUpdated', () => {
+                    assert.strictEqual(atlas.mapResized, true, 'map was resized');
+
+                    done();
+                });
+
+                map.option(dimension, 400);
+            });
+        });
+    });
+
+    QUnit.test('map should be able add and remove controls', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            controls: true,
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            assert.strictEqual(atlas.addedControls, 4, 'four controls are added');
+            assert.strictEqual(atlas.controlOptions.position, 'top-right', 'controls position is correct');
+
+            map.option('onUpdated', () => {
+                assert.strictEqual(atlas.addedControls, 0, 'controls are removed');
+
+                done();
+            });
+
+            map.option('controls', false);
+        });
+    });
+});
+
+
+QUnit.module('Markers', moduleConfig, () => {
+    QUnit.test('Should add markers on init', function(assert) {
+        const done = assert.async();
+        const marker = { location: [33, 33] };
+        $('#map').dxMap({
+            provider: 'azure',
+            markers: [marker],
+            onReady: () => {
+                assert.strictEqual(atlas.addedMarkers.length, 1, 'Marker is added');
+                assert.strictEqual(atlas.addedMarkers[0] instanceof atlas.HtmlMarker, true, 'Marker class is correct');
+                assert.deepEqual(atlas.markerOptions, { position: [33, 33] }, 'Marker options are correct');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Should add markers on runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+        const marker = { location: [33, 33] };
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(atlas.addedMarkers.length, 1, 'Marker is added');
+                assert.strictEqual(atlas.addedMarkers[0] instanceof atlas.HtmlMarker, true, 'Marker class is correct');
+                assert.deepEqual(atlas.markerOptions.position, [33, 33], 'Marker position is correct');
+
+                done();
+            });
+
+            map.option('markers', [marker]);
+        });
+    });
+
+    QUnit.test('Should create a Popup if marker include tooltip config', function(assert) {
+        const done = assert.async();
+        const marker = { location: [10, 20], tooltip: 'Austin, Texas' };
+        $('#map').dxMap({
+            provider: 'azure',
+            markers: [marker],
+            onReady: () => {
+                const popupText = $(atlas.popupOptions.content).text();
+                assert.strictEqual(atlas.addedPopups.length, 1, 'Popup is added');
+                assert.strictEqual(atlas.addedPopups[0] instanceof atlas.Popup, true, 'Popup class is correct');
+                assert.deepEqual(atlas.popupOptions.position, [20, 10], 'Popup position is correct');
+                assert.deepEqual(popupText, marker.tooltip, 'Popup text is correct');
+
+                done();
+            }
+        });
+    });
+
+    [false, true].forEach((isShown) => {
+        QUnit.test(`Click on marker should ${isShown ? 'hide' : 'show'} Popup if tooltip.isShown=${isShown}`, function(assert) {
+            const done = assert.async();
+
+            const marker = {
+                location: [40, -80],
+                tooltip: {
+                    text: 'Austin, Texas',
+                    isShown,
+                }
+            };
+            $('#map').dxMap({
+                provider: 'azure',
+                markers: [marker],
+                onReady: () => {
+                    atlas.clickActionCallback();
+                    assert.strictEqual(atlas.popupOpened, !isShown);
+
+                    done();
+                }
+            });
+        });
+    });
+
+
+    QUnit.test('Click on marker should trigger onClick handler', function(assert) {
+        const done = assert.async();
+        let clickFired = 0;
+
+        const marker = {
+            location: [40, -80],
+            onClick: (e) => {
+                assert.deepEqual(e.location, { lat: 40, lng: -80 }, 'click event includes correct location');
+                clickFired++;
+            }
+        };
+        $('#map').dxMap({
+            provider: 'azure',
+            markers: [marker],
+            onReady: () => {
+                atlas.clickActionCallback();
+                assert.strictEqual(clickFired, 1, 'click action fired');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Marker should have custom icon if map markerIconSrc is specified', function(assert) {
+        const done = assert.async();
+        const markerIconSrc = 'customMarker.png';
+
+        $('#map').dxMap({
+            provider: 'azure',
+            markers: [MARKERS[0]],
+            markerIconSrc,
+            onReady: () => {
+                const $marker = $(atlas.markerOptions.htmlContent);
+
+                assert.strictEqual($marker.hasClass(MARKER_CLASS), true, `Marker has ${MARKER_CLASS} class`);
+                assert.strictEqual($marker.attr('alt'), 'Marker icon', 'Marker has correct alt text');
+                assert.strictEqual($marker.attr('src'), markerIconSrc, 'Marker has src');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Marker should have custom icon if map marker.iconSrc is specified', function(assert) {
+        const done = assert.async();
+        const iconSrc = 'customMarker.png';
+
+        $('#map').dxMap({
+            provider: 'azure',
+            markers: [{ iconSrc }],
+            onReady: () => {
+                const $marker = $(atlas.markerOptions.htmlContent);
+
+                assert.strictEqual($marker.hasClass(MARKER_CLASS), true, `Marker has ${MARKER_CLASS} class`);
+                assert.strictEqual($marker.attr('alt'), 'Marker icon', 'Marker has correct alt text');
+                assert.strictEqual($marker.attr('src'), iconSrc, 'Marker has src');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('addMarker method', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            markers: [MARKERS[0]],
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.addMarker({ location: [7, 7] }).done((instance) => {
+                assert.strictEqual(atlas.addedMarkers.length, 2, 'Marker is added');
+                assert.strictEqual(instance instanceof atlas.HtmlMarker, true, 'Marker class is correct');
+                assert.deepEqual(atlas.markerOptions.position, [7, 7], 'Marker position is correct');
+
+                done();
+            });
+        });
+    });
+
+    QUnit.test('removeMarker method', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            markers: [MARKERS[0]],
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.removeMarker(0).done(() => {
+                assert.strictEqual(atlas.removedMarkers.length, 1, 'Marker is removed');
+
+                done();
+            });
+        });
+    });
+
+    QUnit.test('add marker should trigger onMarkerAdded', function(assert) {
+        const done = assert.async();
+        let markerAddedFired = false;
+
+        $('#map').dxMap({
+            provider: 'azure',
+            markers: [MARKERS[0]],
+            onReady: () => {
+                assert.strictEqual(markerAddedFired, true, 'onMarkerAdded fired');
+
+                done();
+            },
+            onMarkerAdded: ({ options, originalMarker }) => {
+                markerAddedFired = true;
+
+                assert.deepEqual(options, MARKERS[0], 'marker options are passed as arg');
+                assert.strictEqual(originalMarker instanceof atlas.HtmlMarker, true, 'added marker include HtmlMarker instance');
+            },
+        });
+    });
+
+    QUnit.test('remove marker should trigger onMarkerRemoved', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+        let markerRemovedFired = false;
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            markers: [MARKERS[0]],
+            onReady: () => {
+                d.resolve();
+            },
+            onMarkerRemoved: ({ options }) => {
+                markerRemovedFired = true;
+
+                assert.deepEqual(options, MARKERS[0], 'marker options are passed as arg');
+            },
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', function() {
+                assert.strictEqual(markerRemovedFired, true, 'onMarkerRemoved fired');
+
+                done();
+            });
+
+            map.option('markers', []);
+        });
+    });
+
+    QUnit.test('Map should move bounds to fit Markers when autoAdjust is enabled', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            autoAdjust: true,
+            center: [30, 30],
+            markers: [{ location: [20, 20] }],
+            onReady: () => {
+                const expectedBounds = [19.9999, 19.9999, 20.0001, 20.0001];
+
+                assert.strictEqual(atlas.cameraOptions.center, undefined, 'center is no defined anymore');
+                assert.deepEqual(atlas.cameraOptions.bounds.coordinates, expectedBounds, 'bounds coordinates are around Marker');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Map should not move bounds to fit Markers when autoAdjust is disabled', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            autoAdjust: false,
+            center: [30, 30],
+            markers: [MARKERS[0], MARKERS[1]],
+            onReady: () => {
+                const expectedCameraOptions = { center: [30, 30] };
+                assert.deepEqual(atlas.cameraOptions, expectedCameraOptions, 'camera was not moved to fit Markers');
+
+                done();
+            }
+        });
+    });
+});
+
+QUnit.module('Routes', moduleConfig, () => {
+    QUnit.test('Should add routes on init', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            routes: [ROUTES[0]],
+            onReady: () => {
+                assert.strictEqual(atlas.addedSources.length, 1, 'dataSource added');
+                assert.strictEqual(atlas.addedSources[0] instanceof atlas.source.DataSource, true, 'dataSource class is correct');
+                assert.strictEqual(atlas.addedLayers.length, 1, 'lineLayer added');
+                assert.strictEqual(atlas.addedLayers[0] instanceof atlas.layer.LineLayer, true, 'lineLayer class is correct');
+                assert.deepEqual(atlas.addedData.geometry.coordinates, this.routeCoordinates, 'Datasource have a route coordinates');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Should add routes on runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(atlas.addedSources.length, 1, 'dataSource added');
+                assert.strictEqual(atlas.addedSources[0] instanceof atlas.source.DataSource, true, 'dataSource class is correct');
+                assert.strictEqual(atlas.addedLayers.length, 1, 'lineLayer added');
+                assert.strictEqual(atlas.addedLayers[0] instanceof atlas.layer.LineLayer, true, 'lineLayer class is correct');
+                assert.deepEqual(atlas.addedData.geometry.coordinates, this.routeCoordinates, 'Datasource have a route coordinates');
+
+                done();
+            });
+
+            map.option('routes', [ROUTES[0]]);
+        });
+    });
+
+    QUnit.test('addRoute method', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.addRoute(ROUTES[0]).done(({ dataSource, lineLayer }) => {
+                assert.strictEqual(atlas.addedSources.length, 1, 'dataSource added');
+                assert.strictEqual(atlas.addedSources[0] instanceof atlas.source.DataSource, true, 'dataSource class is correct');
+                assert.strictEqual(atlas.addedLayers.length, 1, 'lineLayer added');
+                assert.strictEqual(atlas.addedLayers[0] instanceof atlas.layer.LineLayer, true, 'lineLayer class is correct');
+                assert.strictEqual(dataSource instanceof atlas.source.DataSource, true, 'argument include a datasource instance');
+                assert.strictEqual(lineLayer instanceof atlas.layer.LineLayer, true, 'argument include a lineLayer instance');
+                assert.deepEqual(atlas.addedData.geometry.coordinates, this.routeCoordinates, 'Datasource have a route coordinates');
+
+                done();
+            });
+        });
+    });
+
+    QUnit.test('removeRoute method', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            routes: [ROUTES[0]],
+            onReady: () => {
+                d.resolve();
+            }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.removeRoute(0).done(() => {
+                assert.strictEqual(atlas.removedSources.length, 1, 'dataSource was removed');
+                assert.strictEqual(atlas.removedLayers.length, 1, 'lineLayer was removed');
+
+                done();
+            });
+        });
+    });
+
+    QUnit.test('add route should trigger onRouteAdded', function(assert) {
+        const done = assert.async();
+        let routeAddedFired = false;
+
+        $('#map').dxMap({
+            provider: 'azure',
+            routes: [ROUTES[0]],
+            onReady: () => {
+
+                assert.strictEqual(routeAddedFired, true, 'onRouteAdded fired');
+
+                done();
+            },
+            onRouteAdded: ({ options, originalRoute }) => {
+                routeAddedFired = true;
+
+                assert.deepEqual(options, ROUTES[0], 'route options are passed as arg');
+                assert.strictEqual(originalRoute.dataSource instanceof atlas.source.DataSource, true, 'added route include dataSource instance');
+                assert.strictEqual(originalRoute.lineLayer instanceof atlas.layer.LineLayer, true, 'added route include lineLayer instance');
+            },
+        });
+    });
+
+    QUnit.test('remove route should trigger onRouteRemoved', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+        let routeRemovedFired = false;
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            routes: [ROUTES[0]],
+            onReady: () => {
+                d.resolve();
+            },
+            onRouteRemoved: ({ options }) => {
+                routeRemovedFired = true;
+
+                assert.deepEqual(options, ROUTES[0], 'route options are passed as arg');
+            },
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', function() {
+                assert.strictEqual(routeRemovedFired, true, 'onRouteRemoved fired');
+
+                done();
+            });
+
+            map.option('routes', []);
+        });
+    });
+
+    QUnit.test('It should be possible to customize Route color, weight, opacity', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            routes: [{
+                weight: 4,
+                color: 'red',
+                opacity: 0.3,
+                locations: [[10, 10], [20, 20]],
+            }],
+            onReady: () => {
+                assert.strictEqual(atlas.lineLayerOptions.strokeColor, '#ff0000', 'color is applied');
+                assert.strictEqual(atlas.lineLayerOptions.strokeOpacity, 0.3, 'opacity is applied');
+                assert.strictEqual(atlas.lineLayerOptions.strokeWidth, 4, 'weight is applied');
+
+                done();
+            }
+        });
+    });
+
+    ['driving', 'walking'].forEach((mode) => {
+        QUnit.test(`strokeDashArray style should ${mode === 'walking' ? '' : 'not'} be applied to lineLayer when route mode is ${mode}`, function(assert) {
+            const done = assert.async();
+            const expectedStrokeDashArray = mode === 'walking' ? [1, 1] : undefined;
+            $('#map').dxMap({
+                provider: 'azure',
+                routes: [{
+                    mode,
+                    locations: [[10, 10], [20, 20]],
+                }],
+                onReady: () => {
+                    assert.deepEqual(atlas.lineLayerOptions.strokeDashArray, expectedStrokeDashArray, 'strokeDashArray is correct');
+
+                    done();
+                }
+            });
+        });
+    });
+});

From 568e432a54cb3d3f86f410d75a88385218dbac85 Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Sun, 6 Oct 2024 03:27:49 -0500
Subject: [PATCH 3/6] refactor

---
 .../ui/map/m_provider.dynamic.azure.ts        | 131 ++++++++++++------
 1 file changed, 87 insertions(+), 44 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
index 2be2aa747b35..ed4ed89ff72c 100644
--- a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
@@ -2,7 +2,6 @@ import Color from '@js/color';
 import $ from '@js/core/renderer';
 import ajax from '@js/core/utils/ajax';
 import { noop } from '@js/core/utils/common';
-import { Deferred } from '@js/core/utils/deferred';
 import { map } from '@js/core/utils/iterator';
 import { isDefined } from '@js/core/utils/type';
 import { getWindow } from '@js/core/utils/window';
@@ -15,8 +14,9 @@ const window = getWindow();
 declare let atlas: any;
 
 const AZURE_LINK = 'https://atlas.microsoft.com/';
-const AZURE_JS_URL = `${AZURE_LINK}sdk/javascript/mapcontrol/3/atlas.min.js`;
-const AZURE_CSS_URL = `${AZURE_LINK}/sdk/javascript/mapcontrol/3/atlas.min.css`;
+let AZURE_JS_URL = `${AZURE_LINK}sdk/javascript/mapcontrol/3/atlas.min.js`;
+let AZURE_CSS_URL = `${AZURE_LINK}/sdk/javascript/mapcontrol/3/atlas.min.css`;
+let CUSTOM_URL;
 
 const MAP_MARKER_TOOLTIP_CLASS = 'dx-map-marker-tooltip';
 
@@ -69,10 +69,11 @@ const AzureProvider = DynamicProvider.inherit({
       const searchURL = `${AZURE_LINK}geocode?subscription-key=${this._keyOption('azure')}&api-version=2023-06-01&query=${location}&limit=1`;
 
       ajax.sendRequest({
-        url: searchURL,
+        url: CUSTOM_URL ?? searchURL,
         dataType: 'json',
       }).then((result) => {
         const coordinates = result?.features[0]?.geometry?.coordinates;
+
         if (coordinates) {
           resolve(new atlas.data.Position(coordinates[0], coordinates[1]));
         } else {
@@ -103,15 +104,24 @@ const AzureProvider = DynamicProvider.inherit({
   },
 
   _loadImpl() {
-    if (azureMapsLoaded()) {
-      return Promise.resolve();
-    }
+    return new Promise<void>((resolve) => {
+      if (azureMapsLoaded()) {
+        resolve();
+      }
 
-    if (!azureMapsLoader) {
-      azureMapsLoader = this._loadMapResources();
-    }
+      if (!azureMapsLoader) {
+        azureMapsLoader = this._loadMapResources();
+      }
+
+      azureMapsLoader.then(() => {
+        if (azureMapsLoaded()) {
+          resolve();
+          return;
+        }
 
-    return azureMapsLoader;
+        this._loadMapResources().then(resolve);
+      });
+    });
   },
 
   _loadMapResources() {
@@ -126,7 +136,9 @@ const AzureProvider = DynamicProvider.inherit({
       ajax.sendRequest({
         url: AZURE_JS_URL,
         dataType: 'script',
-      }).done(() => { resolve(); });
+      }).then(() => {
+        resolve();
+      });
     });
   },
 
@@ -135,7 +147,7 @@ const AzureProvider = DynamicProvider.inherit({
       ajax.sendRequest({
         url: AZURE_CSS_URL,
         dataType: 'text',
-      }).done((css) => {
+      }).then((css) => {
         $('<style>').html(css).appendTo($('head'));
         resolve();
       });
@@ -143,17 +155,12 @@ const AzureProvider = DynamicProvider.inherit({
   },
 
   _init() {
-    if (!azureMapsLoaded()) {
-      return this._loadMapResources();
-    }
     this._createMap();
 
     return Promise.resolve();
   },
 
   _createMap() {
-    //  @ts-expect-error
-    this._mapReady = new Deferred();
     this._map = new atlas.Map(this._$container[0], {
       authOptions: {
         authType: 'subscriptionKey',
@@ -161,13 +168,10 @@ const AzureProvider = DynamicProvider.inherit({
       },
       zoom: this._option('zoom'),
       style: this._mapType(this._option('type')),
+      interactive: !this._option('disabled'),
     });
 
-    this._map.events.add('ready', () => {
-      this.updateControls();
-
-      this._mapReady.resolve();
-    });
+    this.updateControls();
   },
 
   _attachHandlers() {
@@ -199,16 +203,29 @@ const AzureProvider = DynamicProvider.inherit({
     return Promise.resolve();
   },
 
-  updateMapType() {
-    const type = this._option('type');
+  updateDisabled() {
+    const disabled = this._option('disabled');
 
-    this._map.setStyle({
-      style: this._mapType(type),
+    this._map.setUserInteraction({
+      interactive: !disabled,
     });
 
     return Promise.resolve();
   },
 
+  updateMapType() {
+    const newType = this._mapType(this._option('type'));
+    const currentType = this._map.getStyle().style;
+
+    if (newType !== currentType) {
+      this._map.setStyle({
+        style: newType,
+      });
+    }
+
+    return Promise.resolve();
+  },
+
   updateBounds() {
     return Promise.all([
       this._resolveLocation(this._option('bounds.northEast')),
@@ -240,13 +257,15 @@ const AzureProvider = DynamicProvider.inherit({
   },
 
   updateControls() {
-    const controls = this._option('controls');
+    const { controls } = this._option();
 
     if (controls) {
       this._map.controls.add([
         new atlas.control.CompassControl(),
         new atlas.control.PitchControl(),
-        new atlas.control.StyleControl(),
+        new atlas.control.StyleControl({
+          mapStyles: ['road', 'satellite', 'satellite_road_labels'],
+        }),
         new atlas.control.ZoomControl(),
       ], {
         position: 'top-right',
@@ -334,42 +353,56 @@ const AzureProvider = DynamicProvider.inherit({
   },
 
   _renderRoute(options) {
-    return this._mapReady.promise().then(() => Promise.all(map(options.locations, (point) => this._resolveLocation(point))).then((locations) => new Promise((resolve) => {
+    return Promise.all(
+      map(options.locations, (point) => this._resolveLocation(point)),
+    ).then((locations) => new Promise((resolve) => {
       const routeColor = new Color(options.color || this._defaultRouteColor()).toHex();
       const routeOpacity = options.opacity || this._defaultRouteOpacity();
       const queryCoordinates = locations.map((location) => `${location[1]},${location[0]}`);
       const query = queryCoordinates.join(':');
       const routeType = this._movementMode(options.mode);
-
+      const isWalkingType = routeType === this._movementMode('walking');
       const searchUrl = `${AZURE_LINK}route/directions/json?subscription-key=${this._keyOption('azure')}&api-version=1.0&query=${query}&travelMode=${routeType}`;
 
       ajax.sendRequest({
-        url: searchUrl,
+        url: CUSTOM_URL ?? searchUrl,
         dataType: 'json',
       }).then((result) => {
         if (result?.routes && result.routes.length > 0) {
           const route = result.routes[0];
-          const routeCoordinates = route.legs.flatMap((leg) => leg.points.map((point) => [point.longitude, point.latitude]));
+          const routeCoordinates = route.legs
+            .flatMap((leg) => leg.points.map((point) => [point.longitude, point.latitude]));
           const dataSource = new atlas.source.DataSource();
-          dataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
-            routeLength: route.summary.lengthInMeters,
-            routeDuration: route.summary.travelTimeInSeconds,
-          }));
 
-          const lineLayer = new atlas.layer.LineLayer(dataSource, null, {
+          dataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {}));
+
+          const lineLayerConfig: {
+            strokeColor: string;
+            strokeOpacity: number;
+            strokeWidth: number;
+            strokeDashArray?: number[];
+          } = {
             strokeColor: routeColor,
             strokeOpacity: routeOpacity,
             strokeWidth: options.weight || this._defaultRouteWeight(),
-          });
+          };
+
+          if (isWalkingType) {
+            lineLayerConfig.strokeDashArray = [1, 1];
+          }
+
+          const lineLayer = new atlas.layer.LineLayer(dataSource, null, lineLayerConfig);
 
           this._map.sources.add(dataSource);
           this._map.layers.add(lineLayer);
 
           const bounds = atlas.data.BoundingBox.fromPositions(routeCoordinates);
-          this._map.setCamera({
-            bounds,
-            padding: 50,
-          });
+          if (this._option('autoAdjust')) {
+            this._map.setCamera({
+              bounds,
+              padding: 50,
+            });
+          }
 
           resolve({
             instance: { dataSource, lineLayer },
@@ -388,7 +421,7 @@ const AzureProvider = DynamicProvider.inherit({
           instance: { dataSource, lineLayer },
         });
       });
-    })));
+    }));
   },
 
   _destroyRoute(routeObject) {
@@ -453,4 +486,14 @@ const AzureProvider = DynamicProvider.inherit({
   },
 });
 
+/// #DEBUG
+// @ts-expect-error
+AzureProvider.remapConstant = (newValue: string): void => {
+  AZURE_JS_URL = newValue;
+  AZURE_CSS_URL = newValue;
+  CUSTOM_URL = newValue;
+};
+
+/// #ENDDEBUG
+
 export default AzureProvider;

From f8b2d2991f335a1c82b5066899859fb21647d714 Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Sun, 6 Oct 2024 03:28:27 -0500
Subject: [PATCH 4/6] refactor

---
 packages/devextreme/js/__internal/ui/map/m_map.ts      | 1 +
 packages/devextreme/js/__internal/ui/map/m_provider.ts | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/devextreme/js/__internal/ui/map/m_map.ts b/packages/devextreme/js/__internal/ui/map/m_map.ts
index b72404aceaa4..80a365ee75ce 100644
--- a/packages/devextreme/js/__internal/ui/map/m_map.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_map.ts
@@ -201,6 +201,7 @@ const Map = Widget.inherit({
       case 'disabled':
         this._renderShield();
         this.callBase(args);
+        this._queueAsyncAction('updateDisabled');
         break;
       case 'width':
       case 'height':
diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.ts b/packages/devextreme/js/__internal/ui/map/m_provider.ts
index 2f7054f54795..c77f1445d9a6 100644
--- a/packages/devextreme/js/__internal/ui/map/m_provider.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_provider.ts
@@ -37,6 +37,8 @@ const Provider = Class.inherit({
 
   updateMapType: abstract,
 
+  updateDisabled: abstract,
+
   updateBounds: abstract,
 
   updateCenter: abstract,

From 2c552af552d64b90cdeb1f726126ee22094b7f01 Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Sun, 6 Oct 2024 03:29:12 -0500
Subject: [PATCH 5/6] add pointer-all on disabled map

---
 packages/devextreme-scss/scss/widgets/base/_map.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/devextreme-scss/scss/widgets/base/_map.scss b/packages/devextreme-scss/scss/widgets/base/_map.scss
index f3ce7f0a3df5..2e3346c486f4 100644
--- a/packages/devextreme-scss/scss/widgets/base/_map.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_map.scss
@@ -13,6 +13,7 @@
   left: 0;
   background: rgba(0, 0, 0, 0.01);
   opacity: 0.01;
+  pointer-events: all;
 }
 
 .dx-map-marker {

From afb7ef9f4bdc50d6abf32a3dbcbd1a54f52fe88d Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Thu, 10 Oct 2024 02:32:32 -0500
Subject: [PATCH 6/6] add more tests + refactor

---
 .../ui/map/m_provider.dynamic.azure.ts        |  30 +--
 .../testing/helpers/forMap/azureMock.js       |  23 +-
 .../mapParts/azureTests.js                    | 204 ++++++++++++------
 3 files changed, 160 insertions(+), 97 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
index ed4ed89ff72c..2fb303ebb6fb 100644
--- a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
+++ b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts
@@ -13,13 +13,15 @@ const window = getWindow();
 
 declare let atlas: any;
 
-const AZURE_LINK = 'https://atlas.microsoft.com/';
-let AZURE_JS_URL = `${AZURE_LINK}sdk/javascript/mapcontrol/3/atlas.min.js`;
-let AZURE_CSS_URL = `${AZURE_LINK}/sdk/javascript/mapcontrol/3/atlas.min.css`;
+const AZURE_BASE_LINK = 'https://atlas.microsoft.com/';
+let AZURE_JS_URL = `${AZURE_BASE_LINK}sdk/javascript/mapcontrol/3/atlas.min.js`;
+let AZURE_CSS_URL = `${AZURE_BASE_LINK}/sdk/javascript/mapcontrol/3/atlas.min.css`;
 let CUSTOM_URL;
 
 const MAP_MARKER_TOOLTIP_CLASS = 'dx-map-marker-tooltip';
 
+const CAMERA_PADDING = 50;
+
 const azureMapsLoaded = function () {
   // @ts-expect-error
   return window.atlas && window.atlas.Map;
@@ -66,7 +68,7 @@ const AzureProvider = DynamicProvider.inherit({
         return;
       }
 
-      const searchURL = `${AZURE_LINK}geocode?subscription-key=${this._keyOption('azure')}&api-version=2023-06-01&query=${location}&limit=1`;
+      const searchURL = `${AZURE_BASE_LINK}geocode?subscription-key=${this._keyOption('azure')}&api-version=2023-06-01&query=${location}&limit=1`;
 
       ajax.sendRequest({
         url: CUSTOM_URL ?? searchURL,
@@ -361,8 +363,7 @@ const AzureProvider = DynamicProvider.inherit({
       const queryCoordinates = locations.map((location) => `${location[1]},${location[0]}`);
       const query = queryCoordinates.join(':');
       const routeType = this._movementMode(options.mode);
-      const isWalkingType = routeType === this._movementMode('walking');
-      const searchUrl = `${AZURE_LINK}route/directions/json?subscription-key=${this._keyOption('azure')}&api-version=1.0&query=${query}&travelMode=${routeType}`;
+      const searchUrl = `${AZURE_BASE_LINK}route/directions/json?subscription-key=${this._keyOption('azure')}&api-version=1.0&query=${query}&travelMode=${routeType}`;
 
       ajax.sendRequest({
         url: CUSTOM_URL ?? searchUrl,
@@ -376,22 +377,11 @@ const AzureProvider = DynamicProvider.inherit({
 
           dataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {}));
 
-          const lineLayerConfig: {
-            strokeColor: string;
-            strokeOpacity: number;
-            strokeWidth: number;
-            strokeDashArray?: number[];
-          } = {
+          const lineLayer = new atlas.layer.LineLayer(dataSource, null, {
             strokeColor: routeColor,
             strokeOpacity: routeOpacity,
             strokeWidth: options.weight || this._defaultRouteWeight(),
-          };
-
-          if (isWalkingType) {
-            lineLayerConfig.strokeDashArray = [1, 1];
-          }
-
-          const lineLayer = new atlas.layer.LineLayer(dataSource, null, lineLayerConfig);
+          });
 
           this._map.sources.add(dataSource);
           this._map.layers.add(lineLayer);
@@ -438,7 +428,7 @@ const AzureProvider = DynamicProvider.inherit({
 
       this._map.setCamera({
         bounds: this._bounds,
-        padding: 50,
+        padding: CAMERA_PADDING,
       });
 
       const zoomAfterFitting = this._map.getCamera().zoom;
diff --git a/packages/devextreme/testing/helpers/forMap/azureMock.js b/packages/devextreme/testing/helpers/forMap/azureMock.js
index cbfcc5e449f2..e7aba4e4e19c 100644
--- a/packages/devextreme/testing/helpers/forMap/azureMock.js
+++ b/packages/devextreme/testing/helpers/forMap/azureMock.js
@@ -7,17 +7,22 @@
             }
 
             this.events = {
-                add: (eventName, _, callback) => {
-                    atlas.addedEvents = atlas.addedEvents || {};
-                    atlas.addedEvents[eventName] = callback;
+                add: (eventName, targetOrCallback, callback) => {
+                    atlas.addedEvents = atlas.addedEvents || [];
+                    const callbackFun = callback ?? targetOrCallback;
+                    atlas.addedEvents.push(eventName);
 
                     if(eventName === 'click') {
-                        atlas.clickActionCallback = callback;
+                        atlas.clickActionCallback = callbackFun;
+                    }
+
+                    if(eventName === 'move') {
+                        atlas.moveActionCallback = callbackFun;
                     }
                 },
                 remove: (eventName) => {
-                    atlas.removedEvents = atlas.removedEvents || {};
-                    atlas.removedEvents[eventName] = true;
+                    atlas.removedEvents = atlas.removedEvents || [];
+                    atlas.removedEvents.push(eventName);
                 },
                 addOnce: () => {},
             };
@@ -41,9 +46,9 @@
             };
             this.getCamera = () => {
                 return {
-                    bounds: [0, 0, 1, 1],
-                    center: [0, 0],
-                    zoom: 10
+                    bounds: [55, 5, 5, 55],
+                    center: [5, 5],
+                    zoom: 5
                 };
             };
             this.controls = {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js
index 926b75fc35fd..41c86aded7d2 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js
@@ -1,14 +1,12 @@
 /* global atlas */
 
 import $ from 'jquery';
-import testing from './utils.js';
+import { MARKERS, ROUTES } from './utils.js';
 import AzureProvider from '__internal/ui/map/m_provider.dynamic.azure';
 import ajaxMock from '../../../helpers/ajaxMock.js';
 
 import 'ui/map';
 
-const MARKERS = testing.MARKERS;
-const ROUTES = testing.ROUTES;
 
 const MARKER_CLASS = 'dx-map-marker';
 
@@ -22,6 +20,8 @@ const prepareTestingAzureProvider = () => {
     atlas.removedLayers = [];
     atlas.addedSources = [];
     atlas.removedSources = [];
+    atlas.addEvents = [];
+    atlas.removeEvents = [];
     atlas.popupOpened = false;
 };
 
@@ -103,15 +103,15 @@ QUnit.module('map loading', moduleConfig, () => {
             delete window.atlas;
         }
 
-        const d1 = $.Deferred();
-        const d2 = $.Deferred();
+        const mapReadyDeferred1 = $.Deferred();
+        const mapReadyDeferred2 = $.Deferred();
 
         $('<div>').appendTo($('#map')).dxMap({
             provider: 'azure',
             onReady: $.proxy((e) => {
                 assert.ok(window.atlas, 'map loaded');
 
-                d1.resolve();
+                mapReadyDeferred1.resolve();
             }, this)
         });
 
@@ -120,11 +120,11 @@ QUnit.module('map loading', moduleConfig, () => {
             onReady: $.proxy((e) => {
                 assert.ok(window.atlas, 'map loaded');
 
-                d2.resolve();
+                mapReadyDeferred2.resolve();
             }, this)
         });
 
-        $.when(d1, d2).done(function() {
+        $.when(mapReadyDeferred1, mapReadyDeferred2).done(function() {
             done();
         });
     });
@@ -197,17 +197,17 @@ QUnit.module('basic options', moduleConfig, () => {
 
     QUnit.test('map should change style on runtime type update', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             type: 'hybrid',
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', () => {
                 assert.strictEqual(atlas.styleOptions.style, 'road', 'map style is updated');
 
@@ -220,7 +220,7 @@ QUnit.module('basic options', moduleConfig, () => {
 
     QUnit.test('map should pass zoom option', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
@@ -228,11 +228,11 @@ QUnit.module('basic options', moduleConfig, () => {
             onReady: () => {
                 assert.strictEqual(atlas.options.zoom, 10, 'zoom is passed on init');
 
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', () => {
                 assert.strictEqual(atlas.cameraOptions.zoom, 5, 'zoom is passed on runtime');
 
@@ -258,7 +258,7 @@ QUnit.module('basic options', moduleConfig, () => {
 
     QUnit.test('map should pass center option', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
@@ -266,11 +266,11 @@ QUnit.module('basic options', moduleConfig, () => {
             onReady: () => {
                 assert.deepEqual(atlas.cameraOptions.center, [20, 10], 'center is passed on init');
 
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', () => {
                 assert.deepEqual(atlas.cameraOptions.center, [200, 200], 'center is passed on runtime');
 
@@ -289,7 +289,7 @@ QUnit.module('basic options', moduleConfig, () => {
             provider: 'azure',
             center,
             onReady: () => {
-                assert.deepEqual(atlas.cameraOptions.center, this.geocodedCoordinates, 'center coordinated are correct');
+                assert.deepEqual(atlas.cameraOptions.center, this.geocodedCoordinates, 'center coordinates are correct');
 
                 done();
             }
@@ -368,18 +368,18 @@ QUnit.module('basic options', moduleConfig, () => {
     ['width', 'height'].forEach((dimension) => {
         QUnit.test(`map should resize on runtime ${dimension} change`, function(assert) {
             const done = assert.async();
-            const d = $.Deferred();
+            const mapReadyDeferred = $.Deferred();
 
             const map = $('#map').dxMap({
                 provider: 'azure',
                 dimension: 300,
                 onReady: () => {
                     assert.strictEqual(atlas.mapResized, false, 'map was not resized so far');
-                    d.resolve();
+                    mapReadyDeferred.resolve();
                 }
             }).dxMap('instance');
 
-            d.done(() => {
+            mapReadyDeferred.done(() => {
                 map.option('onUpdated', () => {
                     assert.strictEqual(atlas.mapResized, true, 'map was resized');
 
@@ -393,17 +393,17 @@ QUnit.module('basic options', moduleConfig, () => {
 
     QUnit.test('map should be able add and remove controls', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             controls: true,
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             assert.strictEqual(atlas.addedControls, 4, 'four controls are added');
             assert.strictEqual(atlas.controlOptions.position, 'top-right', 'controls position is correct');
 
@@ -416,6 +416,94 @@ QUnit.module('basic options', moduleConfig, () => {
             map.option('controls', false);
         });
     });
+
+    QUnit.test('map should set interactive state depending on disabled option', function(assert) {
+        const done = assert.async();
+        const d1 = $.Deferred();
+        const d2 = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            disabled: true,
+        }).dxMap('instance');
+
+
+        setTimeout(() => {
+            d1.resolve();
+        }, 100);
+
+        d1.done(() => {
+            assert.strictEqual(atlas.options.interactive, false, 'interactive is disabled on init');
+
+            map.option('disabled', false);
+
+            setTimeout(() => {
+                d2.resolve();
+            }, 100);
+        });
+
+        d2.done(() => {
+            assert.strictEqual(atlas.options.interactive, false, 'interactive is enabled on runtime');
+
+            done();
+        });
+    });
+
+    QUnit.test('Map should have click and move events', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                assert.strictEqual(atlas.addedEvents.includes('click'), true, 'click event was added');
+                assert.strictEqual(atlas.addedEvents.includes('move'), true, 'move event was added');
+
+                done();
+            }
+        });
+    });
+
+    QUnit.test('Should add onClick handler with correct args', function(assert) {
+        const done = assert.async();
+        let clickFired = 0;
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            onClick: (e) => {
+                assert.strictEqual(e.component, map, 'click event includes component instance');
+                assert.strictEqual($(e.element).is($('#map')), true, 'click event includes root element');
+                assert.deepEqual(e.location, { lat: 88, lng: 88 }, 'click event includes correct location');
+
+                clickFired++;
+            },
+            onReady: () => {
+                atlas.clickActionCallback({ type: 'click', position: [88, 88] });
+                assert.strictEqual(clickFired, 1, 'click action fired');
+
+                done();
+            }
+        }).dxMap('instance');
+    });
+
+    QUnit.test('Move event trigger should update map center, bounds and zoom options', function(assert) {
+        const done = assert.async();
+
+        const map = $('#map').dxMap({
+            provider: 'azure',
+            onReady: () => {
+                atlas.moveActionCallback();
+
+                const { center, bounds, zoom } = map.option();
+                const expectedBounds = { northEast: { lat: 5, lng: 5 }, southWest: { lat: 55, lng: 55 } };
+
+                assert.deepEqual(center, { lat: 5, lng: 5 }, 'center option was updated');
+                assert.deepEqual(bounds, expectedBounds, 'bounds option was updated');
+                assert.strictEqual(zoom, 5, 'zoom option was updated');
+
+                done();
+            }
+        }).dxMap('instance');
+    });
 });
 
 
@@ -438,17 +526,17 @@ QUnit.module('Markers', moduleConfig, () => {
 
     QUnit.test('Should add markers on runtime', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
         const marker = { location: [33, 33] };
 
         const map = $('#map').dxMap({
             provider: 'azure',
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', () => {
                 assert.strictEqual(atlas.addedMarkers.length, 1, 'Marker is added');
                 assert.strictEqual(atlas.addedMarkers[0] instanceof atlas.HtmlMarker, true, 'Marker class is correct');
@@ -503,7 +591,6 @@ QUnit.module('Markers', moduleConfig, () => {
         });
     });
 
-
     QUnit.test('Click on marker should trigger onClick handler', function(assert) {
         const done = assert.async();
         let clickFired = 0;
@@ -568,17 +655,17 @@ QUnit.module('Markers', moduleConfig, () => {
 
     QUnit.test('addMarker method', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             markers: [MARKERS[0]],
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.addMarker({ location: [7, 7] }).done((instance) => {
                 assert.strictEqual(atlas.addedMarkers.length, 2, 'Marker is added');
                 assert.strictEqual(instance instanceof atlas.HtmlMarker, true, 'Marker class is correct');
@@ -591,17 +678,17 @@ QUnit.module('Markers', moduleConfig, () => {
 
     QUnit.test('removeMarker method', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             markers: [MARKERS[0]],
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.removeMarker(0).done(() => {
                 assert.strictEqual(atlas.removedMarkers.length, 1, 'Marker is removed');
 
@@ -633,14 +720,14 @@ QUnit.module('Markers', moduleConfig, () => {
 
     QUnit.test('remove marker should trigger onMarkerRemoved', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
         let markerRemovedFired = false;
 
         const map = $('#map').dxMap({
             provider: 'azure',
             markers: [MARKERS[0]],
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             },
             onMarkerRemoved: ({ options }) => {
                 markerRemovedFired = true;
@@ -649,7 +736,7 @@ QUnit.module('Markers', moduleConfig, () => {
             },
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', function() {
                 assert.strictEqual(markerRemovedFired, true, 'onMarkerRemoved fired');
 
@@ -718,16 +805,16 @@ QUnit.module('Routes', moduleConfig, () => {
 
     QUnit.test('Should add routes on runtime', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', () => {
                 assert.strictEqual(atlas.addedSources.length, 1, 'dataSource added');
                 assert.strictEqual(atlas.addedSources[0] instanceof atlas.source.DataSource, true, 'dataSource class is correct');
@@ -744,16 +831,16 @@ QUnit.module('Routes', moduleConfig, () => {
 
     QUnit.test('addRoute method', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.addRoute(ROUTES[0]).done(({ dataSource, lineLayer }) => {
                 assert.strictEqual(atlas.addedSources.length, 1, 'dataSource added');
                 assert.strictEqual(atlas.addedSources[0] instanceof atlas.source.DataSource, true, 'dataSource class is correct');
@@ -770,17 +857,17 @@ QUnit.module('Routes', moduleConfig, () => {
 
     QUnit.test('removeRoute method', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
 
         const map = $('#map').dxMap({
             provider: 'azure',
             routes: [ROUTES[0]],
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             }
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.removeRoute(0).done(() => {
                 assert.strictEqual(atlas.removedSources.length, 1, 'dataSource was removed');
                 assert.strictEqual(atlas.removedLayers.length, 1, 'lineLayer was removed');
@@ -815,14 +902,14 @@ QUnit.module('Routes', moduleConfig, () => {
 
     QUnit.test('remove route should trigger onRouteRemoved', function(assert) {
         const done = assert.async();
-        const d = $.Deferred();
+        const mapReadyDeferred = $.Deferred();
         let routeRemovedFired = false;
 
         const map = $('#map').dxMap({
             provider: 'azure',
             routes: [ROUTES[0]],
             onReady: () => {
-                d.resolve();
+                mapReadyDeferred.resolve();
             },
             onRouteRemoved: ({ options }) => {
                 routeRemovedFired = true;
@@ -831,7 +918,7 @@ QUnit.module('Routes', moduleConfig, () => {
             },
         }).dxMap('instance');
 
-        d.done(() => {
+        mapReadyDeferred.done(() => {
             map.option('onUpdated', function() {
                 assert.strictEqual(routeRemovedFired, true, 'onRouteRemoved fired');
 
@@ -862,23 +949,4 @@ QUnit.module('Routes', moduleConfig, () => {
             }
         });
     });
-
-    ['driving', 'walking'].forEach((mode) => {
-        QUnit.test(`strokeDashArray style should ${mode === 'walking' ? '' : 'not'} be applied to lineLayer when route mode is ${mode}`, function(assert) {
-            const done = assert.async();
-            const expectedStrokeDashArray = mode === 'walking' ? [1, 1] : undefined;
-            $('#map').dxMap({
-                provider: 'azure',
-                routes: [{
-                    mode,
-                    locations: [[10, 10], [20, 20]],
-                }],
-                onReady: () => {
-                    assert.deepEqual(atlas.lineLayerOptions.strokeDashArray, expectedStrokeDashArray, 'strokeDashArray is correct');
-
-                    done();
-                }
-            });
-        });
-    });
 });