@syncfusion/ej2-maps 20.4.49 → 21.1.35

package/src/maps/maps.js

@@ -24,23 +24,24 @@ import { Component, NotifyPropertyChanges, Property, Ajax } from '@syncfusion/ej
 import { EventHandler, Browser, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';
 import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
-import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, getMousePosition, calculateSize } from './utils/helper';
+import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';
 import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';
 import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
 import { Marker } from './layers/marker';
-import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
-import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel } from '../maps/utils/helper';
+import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint } from '../maps/utils/helper';
 import { Annotations } from '../maps/user-interaction/annotation';
 import { MarkerSettings } from './index';
 import { changeBorderWidth } from './index';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 /**
- * Represents the Maps control.
+ * Represents the maps control. It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that
+ * has rich feature set that includes markers, labels, bubbles and much more.
  * ```html
  * <div id="maps"/>
  * <script>
@@ -136,6 +137,8 @@ var Maps = /** @class */ (function (_super) {
         /** @private */
         _this.initialTileTranslate = new Point(0, 0);
         /** @private */
+        _this.markerDragId = '';
+        /** @private */
         _this.initialCheck = true;
         /** @private */
         _this.applyZoomReset = false;
@@ -144,8 +147,13 @@ var Maps = /** @class */ (function (_super) {
         /** @private */
         _this.markerClusterExpand = false;
         /** @private */
+        _this.mouseMoveId = '';
+        /** @private */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this.shapeSelectionItem = [];
+        /** @private */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.markerDragArgument = null;
         setValue('mergePersistData', _this.mergePersistMapsData, _this);
         return _this;
     }
@@ -154,7 +162,7 @@ var Maps = /** @class */ (function (_super) {
          *
          * Specifies whether the shape is selected in the maps or not.
          *
-         * @returns {boolean} - Returns the boolean value.
+         * @returns {boolean} - Returns a boolean value to specify whether the shape is selected in the maps or not.
          */
         get: function () {
             return this.mapSelect;
@@ -201,6 +209,7 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param  {string} key - Specifies the key
      * @returns {string} - Returns the string value
+     * @private
      */
     Maps.prototype.getLocalizedLabel = function (key) {
         return this.localeObject.getConstant(key);
@@ -343,6 +352,7 @@ var Maps = /** @class */ (function (_super) {
      * @param {LayerSettings} layer - Specifies the layer for the maps.
      * @param {string} dataType - Specifies the data type for maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.processResponseJsonData = function (processType, data, layer, dataType) {
         this.serverProcess['response']++;
@@ -383,7 +393,6 @@ var Maps = /** @class */ (function (_super) {
         }
         if (!isNullOrUndefined(this.dataLabelModule)) {
             this.dataLabelModule.dataLabelCollections = [];
-            this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
         if (!isNullOrUndefined(this.svgObject)) {
@@ -486,6 +495,9 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.zoomingChange();
+        if (this.zoomModule && this.isDevice) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.element.id + '_Zooming_');
+        }
         if (!this.isZoomByPosition && !this.zoomNotApplied) {
             this.trigger(loaded, { maps: this, isResized: this.isResize });
         }
@@ -881,7 +893,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.wireEVents = function () {
         //let cancelEvent: string = Browser.isPointer ? 'pointerleave' : 'mouseleave';
         EventHandler.add(this.element, 'click', this.mapsOnClick, this);
-        // EventHandler.add(this.element, 'contextmenu', this.mapsOnRightClick, this);
+        EventHandler.add(this.element, 'contextmenu', this.mapsOnRightClick, this);
         EventHandler.add(this.element, 'dblclick', this.mapsOnDoubleClick, this);
         EventHandler.add(this.element, Browser.touchStartEvent, this.mouseDownOnMap, this);
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap, this);
@@ -901,7 +913,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.unWireEVents = function () {
         //let cancelEvent: string = Browser.isPointer ? 'pointerleave' : 'mouseleave';
         EventHandler.remove(this.element, 'click', this.mapsOnClick);
-        // EventHandler.remove(this.element, 'contextmenu', this.mapsOnRightClick);
+        EventHandler.remove(this.element, 'contextmenu', this.mapsOnRightClick);
         EventHandler.remove(this.element, 'dblclick', this.mapsOnDoubleClick);
         EventHandler.remove(this.element, Browser.touchStartEvent, this.mouseDownOnMap);
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap);
@@ -917,6 +929,7 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mouseLeaveOnMap = function (e) {
         if (document.getElementsByClassName('highlightMapStyle').length > 0 && this.legendModule) {
@@ -962,6 +975,7 @@ var Maps = /** @class */ (function (_super) {
     };
     Maps.prototype.keyDownHandler = function (event) {
         var zoom = this.zoomModule;
+        var id = event.target['id'];
         if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
             || event.code === 'ArrowRight') && zoom) {
             var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
@@ -969,16 +983,18 @@ var Maps = /** @class */ (function (_super) {
                 this.currentTiles = animatedTiles.cloneNode(true);
             }
         }
-        if ((event.key === '+' || event.code === 'Equal') && zoom) {
+        if (this.zoomSettings.enable && zoom && (event.key === '+' || event.code === 'Equal')) {
             zoom.performZoomingByToolBar('zoomin');
         }
-        else if ((event.key === '-' || event.code === 'Minus') && zoom) {
+        else if (this.zoomSettings.enable && zoom && (event.key === '-' || event.code === 'Minus')) {
             zoom.performZoomingByToolBar('zoomout');
         }
-        else if (event['keyCode'] === 82 && zoom) {
+        else if (this.zoomSettings.enable && zoom && event['keyCode'] === 82) {
             zoom.performZoomingByToolBar('reset');
+            zoom.isPanning = false;
         }
-        else if ((event.code === 'ArrowUp' || event.code === 'ArrowDown') && zoom) {
+        else if (this.zoomSettings.enable && this.zoomSettings.enablePanning && zoom
+            && (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
             event.preventDefault();
             zoom.mouseDownLatLong['x'] = 0;
             zoom.mouseMoveLatLong['y'] = this.mapAreaRect.height / 7;
@@ -986,7 +1002,8 @@ var Maps = /** @class */ (function (_super) {
                 zoom.mouseMoveLatLong['y'], event);
             zoom.mouseDownLatLong['y'] = zoom.mouseMoveLatLong['y'];
         }
-        else if ((event.code === 'ArrowLeft' || event.code === 'ArrowRight') && zoom) {
+        else if (this.zoomSettings.enable && this.zoomSettings.enablePanning && zoom
+            && (event.code === 'ArrowLeft' || event.code === 'ArrowRight')) {
             event.preventDefault();
             zoom.mouseDownLatLong['y'] = 0;
             zoom.mouseMoveLatLong['x'] = this.mapAreaRect.width / 7;
@@ -994,7 +1011,7 @@ var Maps = /** @class */ (function (_super) {
             zoom.mouseDownLatLong['x'] = zoom.mouseMoveLatLong['x'];
         }
         else if (event.code === 'Enter') {
-            var id = event.target['id'];
+            id = event.target['id'];
             event.preventDefault();
             if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
                 this.mapAreaRect = this.legendModule.initialMapAreaRect;
@@ -1024,6 +1041,9 @@ var Maps = /** @class */ (function (_super) {
                 this.keyboardHighlightSelection(id, event.type);
             }
         }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.mouseMoveId);
+        }
     };
     /**
      * Gets the selected element to be maintained or not.
@@ -1044,6 +1064,7 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -1075,6 +1096,12 @@ var Maps = /** @class */ (function (_super) {
                 });
             }
         }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, targetId);
+            if (this.isDevice) {
+                this.zoomModule.removeToolbarClass('', '', '', '', '');
+            }
+        }
     };
     Maps.prototype.clickHandler = function (e, eventArgs, targetEle) {
         if (targetEle.id.indexOf('shapeIndex') > -1) {
@@ -1106,6 +1133,27 @@ var Maps = /** @class */ (function (_super) {
             this.selectionModule.removedSelectionList(targetEle);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Maps.prototype.getMarkerClickLocation = function (pageX, pageY, x, y, marker, isDragEnd) {
+        document.getElementById(this.element.id + "_svg").style.cursor = 'grabbing';
+        var targetElement = getElement(marker.targetId);
+        var latLongValue = this.getClickLocation(marker.targetId, pageX, pageY, targetElement, x, y);
+        var location = (this.isTileMap) ? convertTileLatLongToPoint(new MapLocation(latLongValue.longitude, latLongValue.latitude), this.scale, this.tileTranslatePoint, true) : convertGeoToPoint(latLongValue.latitude, latLongValue.longitude, this.mapLayerPanel.currentFactor, this.layersCollection[marker.layerIndex], this);
+        var transPoint = this.translatePoint;
+        var translateX = (this.isTileMap ? location.x : (location.x + transPoint.x) * this.scale);
+        var translateY = (this.isTileMap ? location.y : (location.y + transPoint.y) * this.scale);
+        if (this.markerDragArgument.shape !== 'Balloon') {
+            targetElement.setAttribute('transform', 'translate( ' + translateX + ' ' + translateY + ' )');
+        }
+        else {
+            targetElement.parentElement.setAttribute('transform', 'translate( ' + translateX + ' ' + translateY + ' )');
+        }
+        if (isDragEnd) {
+            var markerSettings = this.layers[marker.layerIndex].markerSettings[marker.markerIndex];
+            latLongValue = this.getClickLocation(marker.targetId, (pageX - markerSettings.offset.x), (pageY - markerSettings.offset.y), targetElement, (x - markerSettings.offset.x), (y - markerSettings.offset.y));
+        }
+        return latLongValue;
+    };
     Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y) {
         var layerIndex = 0;
         var latLongValue;
@@ -1168,6 +1216,7 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {boolean} - Returns the boolean value
+     * @private
      */
     Maps.prototype.mouseEndOnMap = function (e) {
         var targetEle = e.target;
@@ -1178,13 +1227,16 @@ var Maps = /** @class */ (function (_super) {
         var pageY;
         var target;
         var touchArg;
+        var layerX = 0;
+        var layerY = 0;
         var rect = this.element.getBoundingClientRect();
         var element = e.target;
         if (e.type.indexOf('touch') !== -1) {
             this.isTouch = true;
             touchArg = e;
-            pageX = touchArg.changedTouches[0].pageX;
+            layerX = pageX = touchArg.changedTouches[0].pageX;
             pageY = touchArg.changedTouches[0].pageY;
+            layerY = pageY - (this.isTileMap ? 10 : 0);
             target = touchArg.target;
             this.mouseClickEvent = { x: pageX, y: pageY };
         }
@@ -1192,6 +1244,8 @@ var Maps = /** @class */ (function (_super) {
             this.isTouch = e.pointerType === 'touch';
             pageX = e.pageX;
             pageY = e.pageY;
+            layerX = e['layerX'];
+            layerY = e['layerY'] - (this.isTileMap ? 10 : 0);
             target = e.target;
         }
         if (this.isTileMap) {
@@ -1214,6 +1268,45 @@ var Maps = /** @class */ (function (_super) {
         if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
+        if (!isNullOrUndefined(this.markerDragArgument)) {
+            var marker = this.markerDragArgument;
+            this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
+            this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
+            var latLongValue = this.getMarkerClickLocation(pageX, pageY, layerX, layerY, this.markerDragArgument, true);
+            var markerObject = this.layers[marker.layerIndex].markerSettings[marker.markerIndex];
+            document.getElementById(this.element.id + "_svg").style.cursor = markerObject.enableDrag ? 'pointer' : 'grabbing';
+            var dragEventArgs = {
+                name: 'markerDragEnd', x: pageX, y: pageY,
+                latitude: latLongValue.latitude, longitude: latLongValue.longitude,
+                layerIndex: marker.layerIndex, markerIndex: marker.markerIndex,
+                dataIndex: marker.dataIndex
+            };
+            if (isNullOrUndefined(markerObject.latitudeValuePath) && isNullOrUndefined(markerObject.longitudeValuePath)) {
+                var data = markerObject.dataSource[marker.dataIndex];
+                if (!isNullOrUndefined(data['Longitude']) && !isNullOrUndefined(data['Latitude'])) {
+                    markerObject.dataSource[marker.dataIndex].Latitude = dragEventArgs.latitude;
+                    markerObject.dataSource[marker.dataIndex].Longitude = dragEventArgs.longitude;
+                }
+                else {
+                    markerObject.dataSource[marker.dataIndex].latitude = dragEventArgs.latitude;
+                    markerObject.dataSource[marker.dataIndex].longitude = dragEventArgs.longitude;
+                }
+            }
+            else {
+                markerObject.dataSource[marker.dataIndex][markerObject.latitudeValuePath] = dragEventArgs.latitude;
+                markerObject.dataSource[marker.dataIndex][markerObject.longitudeValuePath] = dragEventArgs.longitude;
+            }
+            this.markerDragId = '';
+            this.markerDragArgument = null;
+            this.trigger('markerDragEnd', dragEventArgs);
+        }
+        else {
+            document.getElementById(this.element.id + "_svg").style.cursor = 'auto';
+        }
+        if (this.zoomModule && this.isDevice) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.scale, this.element.id + '_Zooming_');
+            this.zoomModule.removeToolbarClass('', '', '', '', '');
+        }
         return false;
     };
     /**
@@ -1221,6 +1314,7 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps
      * @returns {void}
+     * @private
      */
     Maps.prototype.mouseDownOnMap = function (e) {
         var pageX;
@@ -1231,8 +1325,12 @@ var Maps = /** @class */ (function (_super) {
         if (e.type.indexOf('touch') !== -1 && e.changedTouches) {
             this.mouseDownEvent = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
         }
+        if (this.isDevice) {
+            this.mapsTooltipModule.renderTooltip(e);
+        }
         var rect = this.element.getBoundingClientRect();
         var element = e.target;
+        this.markerDragId = element.id;
         var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
         if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
             this.currentTiles = animatedTiles.cloneNode(true);
@@ -1265,11 +1363,37 @@ var Maps = /** @class */ (function (_super) {
             this.markerModule.sameMarkerData = [];
         }
     };
+    /**
+     * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
+     * @private
+     */
+    Maps.prototype.mapsOnRightClick = function (e) {
+        var targetEle = e.target;
+        var targetId = targetEle.id;
+        var latitude = null;
+        var longitude = null;
+        this.mouseClickEvent = this.mouseDownEvent = { x: e.x, y: e.y };
+        if (targetEle.id.indexOf('_ToolBar') === -1) {
+            var latLongValue = this.getClickLocation(targetId, e.pageX, e.pageY, targetEle, e['layerX'], e['layerY']);
+            if (!isNullOrUndefined(latLongValue)) {
+                latitude = latLongValue.latitude;
+                longitude = latLongValue.longitude;
+            }
+            var eventArgs = {
+                cancel: false, name: rightClick, target: targetId, x: e.clientX, y: e.clientY,
+                latitude: latitude, longitude: longitude,
+                isShapeSelected: false
+            };
+            this.trigger('rightClick', eventArgs);
+        }
+    };
     /**
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -1305,6 +1429,7 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mouseMoveOnMap = function (e) {
         var pageX;
@@ -1324,6 +1449,9 @@ var Maps = /** @class */ (function (_super) {
         if (this.bubbleModule) {
             this.bubbleModule.bubbleMove(e);
         }
+        if (target.id.indexOf('MarkerIndex') == -1) {
+            document.getElementById(this.element.id + "_svg").style.cursor = 'auto';
+        }
         this.onMouseMove(e);
         this.notify(Browser.touchMoveEvent, e);
     };
@@ -1332,19 +1460,42 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.onMouseMove = function (e) {
         var element = e.target;
+        this.mouseMoveId = element['id'];
         var pageX;
         var pageY;
         var target;
         var touchArg;
-        if (!this.isTouch) {
+        var touches = null;
+        var layerX = 0;
+        var layerY = 0;
+        if (e.type.indexOf('touch') == -1) {
+            pageX = e.pageX;
+            pageY = e.pageY;
+            layerX = e['layerX'];
+            layerY = e['layerY'] - (this.isTileMap ? 10 : 0);
             this.titleTooltip(e, e.pageX, e.pageY);
             if (!isNullOrUndefined(this.legendModule)) {
                 this.legendTooltip(e, e.pageX, e.pageY, true);
             }
         }
+        else {
+            touches = e.touches;
+            layerX = pageX = touches[0].clientX;
+            layerY = pageY = touches[0].clientY - (this.isTileMap ? 10 : 0);
+        }
+        if (!isNullOrUndefined(this.markerDragArgument)) {
+            var marker = this.markerDragArgument;
+            this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
+            this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
+            this.getMarkerClickLocation(pageX, pageY, layerX, layerY, marker, false);
+        }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.scale, e.target.id);
+        }
         return false;
     };
     Maps.prototype.legendTooltip = function (event, x, y, isTouch) {
@@ -1427,10 +1578,8 @@ var Maps = /** @class */ (function (_super) {
     /**
      * This method is used to zoom the map by specifying the center position.
      *
-     * @param {number} centerPosition - Specifies the center position
-     * @param {number} centerPosition.latitude - Specifies the latitude value for the center position
-     * @param {number} centerPosition.longitude - Specifies the longitude value for the center position
-     * @param {number} zoomFactor - Specifies the zoom factor for maps.
+     * @param {number} centerPosition - Specifies the location of the maps to be zoomed as geographical coordinates.
+     * @param {number} zoomFactor - Specifies the zoom factor for the maps.
      * @returns {void}
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
@@ -1467,8 +1616,8 @@ var Maps = /** @class */ (function (_super) {
     /**
      * This method is used to perform panning by specifying the direction.
      *
-     * @param {PanDirection} direction - Specifies the direction in which the panning is performed.
-     * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps.
+     * @param {PanDirection} direction - Specifies the direction in which the panning must be performed.
+     * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps in pixels.
      * @returns {void}
      */
     Maps.prototype.panByDirection = function (direction, mouseLocation) {
@@ -1497,7 +1646,7 @@ var Maps = /** @class */ (function (_super) {
     /**
      * This method is used to add the layers dynamically to the maps.
      *
-     * @param {Object} layer - Specifies the layer for the maps.
+     * @param {Object} layer - Specifies the layer to be added in the maps.
      * @returns {void}
      */
     Maps.prototype.addLayer = function (layer) {
@@ -1509,7 +1658,7 @@ var Maps = /** @class */ (function (_super) {
         }
     };
     /**
-     * This method is used to remove a layer from map.
+     * This method is used to remove a layer from the maps.
      *
      * @param {number} index - Specifies the index number of the layer to be removed.
      * @returns {void}
@@ -1523,7 +1672,7 @@ var Maps = /** @class */ (function (_super) {
     };
     /**
      * This method is used to add markers dynamically in the maps.
-     * If we provide the index value of the layer in which the marker to be added and the coordinates
+     * If we provide the index value of the layer in which the marker to be added and the settings
      * of the marker as parameters, the marker will be added in the location.
      *
      * @param {number} layerIndex - Specifies the index number of the layer.
@@ -1545,12 +1694,12 @@ var Maps = /** @class */ (function (_super) {
         }
     };
     /**
-     * This method is used to select the geometric shape element in the maps component.
+     * This method is used to select the geometric shape element in the maps.
      *
      * @param {number} layerIndex - Specifies the index of the layer in maps.
      * @param {string | string[]} propertyName - Specifies the property name from the data source.
-     * @param {string} name - Specifies the name of the shape that is selected.
-     * @param {boolean} enable - Specifies the shape selection to be enabled.
+     * @param {string} name - Specifies the name of the shape, which is mapped from the data source, that is selected.
+     * @param {boolean} enable - Specifies whether the shape should be selected or the selection should be removed.
      * @returns {void}
      */
     Maps.prototype.shapeSelection = function (layerIndex, propertyName, name, enable) {
@@ -1654,12 +1803,12 @@ var Maps = /** @class */ (function (_super) {
         }
     };
     /**
-     * This method is used to zoom the maps component based on the provided coordinates.
+     * This method is used to zoom the maps based on the provided coordinates.
      *
-     * @param {number} minLatitude - Specifies the minimum latitude to be zoomed.
-     * @param {number} minLongitude - Specifies the minimum latitude to be zoomed.
-     * @param {number} maxLatitude - Specifies the maximum latitude to be zoomed.
-     * @param {number} maxLongitude - Specifies the maximum longitude to be zoomed.
+     * @param {number} minLatitude - Specifies the minimum latitude of the location to be zoomed.
+     * @param {number} minLongitude - Specifies the minimum latitude of the location to be zoomed.
+     * @param {number} maxLatitude - Specifies the maximum latitude of the location to be zoomed.
+     * @param {number} maxLongitude - Specifies the maximum longitude of the location to be zoomed.
      * @returns {void}
      */
     Maps.prototype.zoomToCoordinates = function (minLatitude, minLongitude, maxLatitude, maxLongitude) {
@@ -1702,7 +1851,7 @@ var Maps = /** @class */ (function (_super) {
             this.maxLatOfGivenLocation = maxLatitude;
             this.maxLongOfGivenLocation = maxLongitude;
             this.zoomNotApplied = true;
-            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
+            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this, true);
             var zoomArgs = {
                 cancel: false, name: 'zoom', type: zoomIn, maps: this,
                 tileTranslatePoint: {}, translatePoint: {},
@@ -1736,7 +1885,7 @@ var Maps = /** @class */ (function (_super) {
         this.legendSelectionCollection = [];
     };
     /**
-     * This method is used to set culture for maps component.
+     * This method is used to set culture for maps.
      *
      * @returns {void}
      */
@@ -1746,7 +1895,7 @@ var Maps = /** @class */ (function (_super) {
         this.localeObject = new L10n(this.getModuleName(), this.defaultLocalConstants, this.locale);
     };
     /**
-     * This method to set locale constants to the maps component.
+     * This method to set locale constants to the maps.
      *
      * @returns {void}
      */
@@ -1762,7 +1911,7 @@ var Maps = /** @class */ (function (_super) {
         };
     };
     /**
-     * This method disposes the maps component.
+     * This method destroys the maps. This method removes the events associated with the maps and disposes the objects created for rendering and updating the maps.
      *
      * @returns {void}
      */
@@ -1799,6 +1948,7 @@ var Maps = /** @class */ (function (_super) {
      * Gets component name
      *
      * @returns {string} - Returns the string value
+     * @private
      */
     Maps.prototype.getModuleName = function () {
         return 'maps';
@@ -2113,7 +2263,7 @@ var Maps = /** @class */ (function (_super) {
         return isVisible;
     };
     /**
-     * This method handles the printing functionality for the maps component.
+     * This method handles the printing functionality for the maps.
      *
      * @param {string[] | string | Element} id - Specifies the element to be printed.
      * @returns {void}
@@ -2124,13 +2274,13 @@ var Maps = /** @class */ (function (_super) {
         }
     };
     /**
-     * This method handles the export functionality for the maps component.
+     * This method handles the export functionality for the maps.
      *
      * @param {ExportType} type - Specifies the type of the exported file.
      * @param {string} fileName - Specifies the name of the file with which the rendered maps need to be exported.
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the pdf document in exporting.
-     * @param {boolean} allowDownload - Specifies whether to download as a file or get as base64 string for the file
-     * @returns {Promise<string>} - Returns the string value.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document while exporting.
+     * @param {boolean} allowDownload - Specifies whether to download as a file or get as base64 string for the file.
+     * @returns {Promise<string>} - Specifies the base64 string of the exported image which is returned when the `allowDownload` is set to false.
      */
     Maps.prototype.export = function (type, fileName, orientation, allowDownload) {
         var _this = this;
@@ -2154,8 +2304,8 @@ var Maps = /** @class */ (function (_super) {
     /**
      * This method is used to get the Bing maps URL.
      *
-     * @param {string} url - Specifies the URL of the maps.
-     * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
+     * @param {string} url - Specifies the URL of the Bing maps along with the API key.
+     * @returns {Promise<string>} - Returns the processed Bing URL as `Promise`.
      */
     Maps.prototype.getBingUrlTemplate = function (url) {
         var promise;
@@ -2246,20 +2396,20 @@ var Maps = /** @class */ (function (_super) {
         };
     };
     /**
-     * This method is used to get the geo location points.
+     * This method is used to get the geographical coordinates for location points in pixels when shape maps are rendered in the maps.
      *
-     * @param {number} layerIndex - Specifies the index number of the layer of the map.
-     * @param {number} x - Specifies the x value.
-     * @param {number} y - Specifies the y value.
-     * @returns {GeoPosition}- Returns the geo position
+     * @param {number} layerIndex - Specifies the index number of the layer of the maps.
+     * @param {number} x - Specifies the x value in pixel.
+     * @param {number} y - Specifies the y value in pixel.
+     * @returns {GeoPosition}- Returns the geographical coordinates.
      */
     Maps.prototype.getGeoLocation = function (layerIndex, x, y) {
         var latitude = 0;
         var longitude = 0;
         if (!this.isDestroyed) {
             var container = document.getElementById(this.element.id);
-            var pageX = x - container.offsetLeft;
-            var pageY = y - container.offsetTop;
+            var pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0);
+            var pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0);
             var currentLayer = this.layersCollection[layerIndex];
             var translate = getTranslate(this, currentLayer, false);
             var translatePoint = translate['location'];
@@ -2278,11 +2428,11 @@ var Maps = /** @class */ (function (_super) {
         return Math.min(Math.max(value, minVal), maxVal);
     };
     /**
-     * This method is used to get the geo location points when tile maps is rendered in the maps component.
+     * This method is used to get the geographical coordinates for location points in pixels when an online map provider is rendered in the maps.
      *
-     * @param {number} x - Specifies the x value
-     * @param {number} y - Specifies the y value
-     * @returns {GeoPosition} - Returns the position
+     * @param {number} x - Specifies the x value in pixel.
+     * @param {number} y - Specifies the y value in pixel.
+     * @returns {GeoPosition} - Returns the geographical coordinates.
      */
     Maps.prototype.getTileGeoLocation = function (x, y) {
         var latitude = 0;
@@ -2290,25 +2440,25 @@ var Maps = /** @class */ (function (_super) {
         if (!this.isDestroyed) {
             var container = document.getElementById(this.element.id);
             var ele = document.getElementById(this.element.id + '_tile_parent');
-            var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
+            var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0)), y + this.mapAreaRect.y - (ele.offsetTop - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0)));
             latitude = latLong['latitude'];
             longitude = latLong['longitude'];
         }
         return { latitude: latitude, longitude: longitude };
     };
     /**
-     * This method is used to convert the point to latitude and longitude in maps.
+     * This method is used to convert the point in pixels to latitude and longitude in maps.
      *
-     * @param {number} pageX - Specifies the x value for the page.
-     * @param {number} pageY - Specifies the y value for the page.
-     * @returns {Object} - Returns the object.
+     * @param {number} pageX - Specifies the x position value in pixels.
+     * @param {number} pageY - Specifies the y position value in pixels.
+     * @returns {Object} - Returns the latitude and longitude values.
      */
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
         var latitude = 0;
         var longitude = 0;
         if (!this.isDestroyed) {
             var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            pageY = pageY + padding;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
             var y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
@@ -2446,6 +2596,12 @@ var Maps = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "markerClick", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "markerDragStart", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "markerDragEnd", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "markerClusterClick", void 0);