@syncfusion/ej2-maps 20.4.49 → 21.1.35

package/dist/es6/ej2-maps.es2015.js

@@ -1,4 +1,4 @@
-import { Ajax, Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
+import { Ajax, Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -8,7 +8,7 @@ import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-
  * Helper functions for maps control
  */
 /**
- * Maps internal use of `Size` type
+ * Specifies the size information of an element.
  */
 class Size {
     constructor(width, height) {
@@ -35,6 +35,7 @@ function stringToNumber(value, containerSize) {
  *
  * @param {Maps} maps Specifies the maps instance
  * @returns {void}
+ * @private
  */
 function calculateSize(maps) {
     maps.element.style.height = !isNullOrUndefined(maps.height) ? maps.height : 'auto';
@@ -58,6 +59,7 @@ function calculateSize(maps) {
  *
  * @param {Maps} maps Specifies the map instance
  * @returns {void}
+ * @private
  */
 function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
@@ -79,6 +81,7 @@ function createSvg(maps) {
  * @param {number} pageY - Specifies the pageY.
  * @param {Element} element - Specifies the element.
  * @returns {MapLocation} - Returns the location.
+ * @private
  */
 function getMousePosition(pageX, pageY, element) {
     const elementRect = element.getBoundingClientRect();
@@ -95,6 +98,7 @@ function getMousePosition(pageX, pageY, element) {
  *
  * @param {number} deg Specifies the degree value
  * @returns {number} Returns the number
+ * @private
  */
 function degreesToRadians(deg) {
     return deg * (Math.PI / 180);
@@ -104,6 +108,7 @@ function degreesToRadians(deg) {
  *
  * @param {number} radian Specifies the radian value
  * @returns {number} Returns the number
+ * @private
  */
 function radiansToDegrees(radian) {
     return radian * (180 / Math.PI);
@@ -117,6 +122,7 @@ function radiansToDegrees(radian) {
  * @param {LayerSettings} layer - Specifies the layer settings.
  * @param {Maps} mapModel - Specifies the maps.
  * @returns {Point} - Returns the point values.
+ * @private
  */
 function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
     const mapSize = new Size(mapModel.mapAreaRect.width, mapModel.mapAreaRect.height);
@@ -200,6 +206,7 @@ function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
  * @param {MapLocation} tileTranslatePoint Specifies the tile translate point
  * @param {boolean} isMapCoordinates Specifies the boolean value
  * @returns {MapLocation} Returns the location value
+ * @private
  */
 function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint, isMapCoordinates) {
     const size = Math.pow(2, zoomLevel) * 256;
@@ -220,6 +227,7 @@ function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint, isMapC
  * @param {Maps} mapObject - Specifies the maps.
  * @param {number} val - Specifies the value.
  * @returns {number} - Returns the number.
+ * @private
  */
 function xToCoordinate(mapObject, val) {
     const longitudeMinMax = mapObject.baseMapBounds.longitude;
@@ -233,6 +241,7 @@ function xToCoordinate(mapObject, val) {
  * @param {Maps} mapObject - Specifies the maps.
  * @param {number} val - Specifies the value.
  * @returns {number} - Returns the number.
+ * @private
  */
 function yToCoordinate(mapObject, val) {
     const latitudeMinMax = mapObject.baseMapBounds.latitude;
@@ -244,6 +253,7 @@ function yToCoordinate(mapObject, val) {
  * @param {number} x - Specifies the x value.
  * @param {number} y - Specifies the y value.
  * @returns {Point} - Returns the point value.
+ * @private
  */
 function aitoff(x, y) {
     const cosy = Math.cos(y);
@@ -256,6 +266,7 @@ function aitoff(x, y) {
  * @param {number} a - Specifies the a value
  * @param {number} b - Specifies the b value
  * @returns {number} - Returns the number
+ * @private
  */
 function roundTo(a, b) {
     const c = Math.pow(10, b);
@@ -265,6 +276,7 @@ function roundTo(a, b) {
  *
  * @param {number} x - Specifies the x value
  * @returns {number} - Returns the number
+ * @private
  */
 function sinci(x) {
     return x / Math.sin(x);
@@ -273,6 +285,7 @@ function sinci(x) {
  *
  * @param {number} a - Specifies the a value
  * @returns {number} - Returns the number
+ * @private
  */
 function acos(a) {
     return Math.acos(a);
@@ -284,6 +297,7 @@ function acos(a) {
  * @param {number} min Specifies the minimum value
  * @param {number} max Specifies the maximum value
  * @returns {number} Returns the value
+ * @private
  */
 function calculateBound(value, min, max) {
     if (!isNullOrUndefined(min)) {
@@ -302,6 +316,7 @@ function calculateBound(value, min, max) {
  * @param {string} url Specifies the url
  * @param {boolean} isDownload Specifies whether download a file.
  * @returns {void}
+ * @private
  */
 function triggerDownload(fileName, type, url, isDownload) {
     createElement('a', {
@@ -316,7 +331,7 @@ function triggerDownload(fileName, type, url, isDownload) {
     }));
 }
 /**
- * Map internal class for point
+ * Specifies the information of the position of the point in maps.
  */
 class Point {
     constructor(x, y) {
@@ -357,7 +372,7 @@ function measureText(text, font) {
         measureObject = createElement('text', { id: 'mapsmeasuretext' });
         document.body.appendChild(measureObject);
     }
-    measureObject.innerHTML = text;
+    measureObject.innerText = text;
     measureObject.style.position = 'absolute';
     if (typeof (font.size) === 'number') {
         measureObject.style.fontSize = (font.size) + 'px';
@@ -494,6 +509,7 @@ class LineOption extends PathOption {
  * Internal use of line
  *
  * @property {number} Line - Specifies the line class
+ * @private
  */
 class Line {
     constructor(x1, y1, x2, y2) {
@@ -506,6 +522,7 @@ class Line {
 /**
  * Internal use of map location type
  *
+ * @private
  */
 class MapLocation {
     constructor(x, y) {
@@ -530,6 +547,7 @@ class Rect {
  * Internal use for pattern creation.
  *
  * @property {PatternOptions} PatternOptions - Specifies the pattern option class.
+ * @private
  */
 class PatternOptions {
     constructor(id, x, y, width, height, patternUnits = 'userSpaceOnUse', patternContentUnits = 'userSpaceOnUse', patternTransform = '', href = '') {
@@ -640,6 +658,7 @@ function convertElement(element, markerId, data, index, mapObj) {
  * @param {string} value - Specifies the value
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {string} - Returns the string value
+ * @private
  */
 function formatValue(value, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -661,6 +680,7 @@ function formatValue(value, maps) {
  * @param {any} data - Specifies the data
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {string} - Returns the string value
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertStringToValue(stringTemplate, format, data, maps) {
@@ -691,6 +711,7 @@ function convertStringToValue(stringTemplate, format, data, maps) {
  * @param {number} index - Specifies the index
  * @param {Maps} mapObj - Specifies the map object
  * @returns {HTMLElement} - Returns the html element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElementFromLabel(element, labelId, data, index, mapObj) {
@@ -720,6 +741,7 @@ function convertElementFromLabel(element, labelId, data, index, mapObj) {
  * @param {Element} markerCollection - Specifies the marker collection
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {Element} - Returns the element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCollection, maps) {
@@ -752,7 +774,7 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     }
     else if (shape === 'Image') {
         x = location.x - (size.width / 2);
-        y = location.y - size.height;
+        y = location.y - (size.height / 2);
         merge(pathOptions, { 'href': imageUrl, 'height': size.height, 'width': size.width, x: x, y: y });
         markerEle = maps.renderer.drawImage(pathOptions);
     }
@@ -766,6 +788,7 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
  * @param {any} data - Specifies the data
  * @param {string} value - Specifies the value
  * @returns {any} - Returns the data
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getValueFromObject(data, value) {
@@ -787,6 +810,7 @@ function getValueFromObject(data, value) {
  * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
  * @param {any} data - Specifies the data
  * @returns {IMarkerRenderingEventArgs} - Returns the arguments
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerColorChoose(eventArgs, data) {
@@ -803,6 +827,7 @@ function markerColorChoose(eventArgs, data) {
  * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
  * @param {any} data - Specifies the data
  * @returns {IMarkerRenderingEventArgs} - Returns the arguments
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerShapeChoose(eventArgs, data) {
@@ -838,6 +863,7 @@ function markerShapeChoose(eventArgs, data) {
  * @param {boolean} check - Specifies the boolean value
  * @param {boolean} zoomCheck - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerCollection, layerElement, check, zoomCheck) {
     let bounds1;
@@ -963,14 +989,13 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         const clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
                         const labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
                         m++;
-                        const imageShapeY = shapeCustom['shape'] === 'Image' ? shapeCustom['size']['height'] / 2 : 0;
-                        const ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: imageShapeY }, clusterID, shapeCustom, markerCollection, maps);
+                        const ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 }, clusterID, shapeCustom, markerCollection, maps);
                         ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
                         if (eventArg.shape === 'Balloon') {
-                            ele.children[0].innerHTML = indexCollection.toString();
+                            ele.children[0].innerText = indexCollection.toString();
                         }
                         else {
-                            ele.innerHTML = indexCollection.toString();
+                            ele.innerText = indexCollection.toString();
                         }
                         options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
                         textElement = renderTextElement(options, style, style.color, markerCollection);
@@ -1052,6 +1077,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {Element | HTMLElement} markerElement - Specifies the marker element
  * @returns {void}
+ * @private
  */
 function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     const layerIndex = sameMarkerData[0].layerIndex;
@@ -1080,6 +1106,7 @@ function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
  * @param {Element | HTMLElement} markerElement - Specifies the marker element
  * @param {boolean} isDom - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     const layerIndex = sameMarkerData[0].layerIndex;
@@ -1174,6 +1201,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {Element} markerCollection - Specifies the marker collection
  * @returns {Element} - Returns the element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, markerCollection) {
@@ -1213,6 +1241,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  * @param {Point} offset - Specifies the offset value
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {HTMLElement} - Returns the html element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplate, location, transPoint, scale, offset, maps) {
@@ -1281,11 +1310,12 @@ function maintainSelection(elementId, elementClass, element, className) {
 function maintainStyleClass(id, idClass, fill, opacity, borderColor, borderWidth, maps) {
     if (!getElement(id)) {
         const styleClass = createElement('style', {
-            id: id, innerHTML: '.' + idClass + '{fill:'
-                + fill + ';' + 'opacity:' + opacity + ';' +
-                'stroke-width:' + borderWidth + ';' +
-                'stroke:' + borderColor + ';' + '}'
+            id: id
         });
+        styleClass.innerText = '.' + idClass + '{fill:'
+            + fill + ';' + 'opacity:' + opacity + ';' +
+            'stroke-width:' + borderWidth + ';' +
+            'stroke:' + borderColor + ';' + '}';
         maps.shapeSelectionClass = styleClass;
         document.body.appendChild(styleClass);
     }
@@ -1556,7 +1586,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     const height = size.height;
     let pathElement;
     location.x -= width / 2;
-    location.y -= height;
+    location.y -= height / 2;
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
         'c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S17.8,16,15,16z';
     const balloon = maps.renderer.drawPath(options);
@@ -1626,6 +1656,7 @@ function getFieldData(dataSource, fields) {
  * @param {string | string[]} propertyPath - Specifies the property path
  * @param {LayerSettingsModel} layer - Specifies the layer settings
  * @returns {number} - Returns the number
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, layer) {
@@ -1678,6 +1709,7 @@ function checkPropertyPath(shapeData, shapePropertyPath, shape) {
  * @param {number} start - Specifies the start value
  * @param {number} end - Specifies the end value
  * @returns {MapLocation[]} - Returns the location
+ * @private
  */
 function filter(points, start, end) {
     const pointObject = [];
@@ -1697,6 +1729,7 @@ function filter(points, start, end) {
  * @param {number} minValue - Specifies the minValue
  * @param {number} maxValue -Specifies the maxValue
  * @returns {number} - Returns the number
+ * @private
  */
 function getRatioOfBubble(min, max, value, minValue, maxValue) {
     const percent = (100 / (maxValue - minValue)) * (value - minValue);
@@ -1713,6 +1746,7 @@ function getRatioOfBubble(min, max, value, minValue, maxValue) {
  * @param {string} type - Specifies the type
  * @param {string} geometryType - Specified the type of the geometry
  * @returns {any} - Specifies the object
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function findMidPointOfPolygon(points, type, geometryType) {
@@ -1853,6 +1887,7 @@ function textTrim(maxWidth, text, font) {
  * @param {Size} textSize - Specifies the text size
  * @param {string} type - Specifies the type
  * @returns {Point} - Returns the point values
+ * @private
  */
 function findPosition(location, alignment, textSize, type) {
     let x;
@@ -1877,6 +1912,7 @@ function findPosition(location, alignment, textSize, type) {
  *
  * @param {string} id - Specifies the id
  * @returns {void}
+ * @private
  */
 function removeElement(id) {
     const element = document.getElementById(id);
@@ -1888,6 +1924,7 @@ function removeElement(id) {
  * @param {Maps} mapObject - Specifies the map object
  * @param {LayerSettings} layer - Specifies the layer settings
  * @returns {Point} - Returns the x and y points
+ * @private
  */
 function calculateCenterFromPixel(mapObject, layer) {
     const point1 = convertGeoToPoint(mapObject.minLatOfGivenLocation, mapObject.minLongOfGivenLocation, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
@@ -2216,6 +2253,7 @@ function getZoomTranslate(mapObject, layer, animate) {
  *
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {void}
+ * @private
  */
 function fixInitialScaleForTile(map) {
     map.tileZoomScale = map.tileZoomLevel = Math.floor(map.availableSize.height / 512) + 1;
@@ -2232,6 +2270,7 @@ function fixInitialScaleForTile(map) {
  *
  * @param {string} id - Specifies the id
  * @returns {Element} - Returns the element
+ * @private
  */
 function getElementByID(id) {
     return document.getElementById(id);
@@ -2258,6 +2297,7 @@ function getClientElement(id) {
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {number} value - Specifies the value
  * @returns {string} - Returns the string
+ * @private
  */
 function Internalize(maps, value) {
     maps.formatFunction =
@@ -2306,6 +2346,7 @@ function getElement(id) {
  * @param {string} targetId - Specifies the target id
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {any} - Returns the object
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getShapeData(targetId, map) {
@@ -2371,6 +2412,7 @@ function triggerShapeEvent(targetId, selection, maps, eventName) {
  *
  * @param {string} className - Specifies the class name
  * @returns {HTMLCollectionOf<Element>} - Returns the collection
+ * @private
  */
 function getElementsByClassName(className) {
     return document.getElementsByClassName(className);
@@ -2387,6 +2429,7 @@ function getElementsByClassName(className) {
  * @param {string} args - Specifies the args
  * @param {string} elementSelector - Specifies the element selector
  * @returns {Element} - Returns the element
+ * @private
  */
 function querySelector(args, elementSelector) {
     let targetEle = null;
@@ -2403,6 +2446,7 @@ function querySelector(args, elementSelector) {
  * @param {boolean} enable - Specifies the boolean value
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {Element} - Returns the element
+ * @private
  */
 function getTargetElement(layerIndex, name, enable, map) {
     let targetId;
@@ -2424,16 +2468,19 @@ function getTargetElement(layerIndex, name, enable, map) {
  * @param {string} className - Specifies the class name
  * @param {IShapeSelectedEventArgs | any} eventArgs - Specifies the event args
  * @returns {Element} - Returns the element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createStyle(id, className, eventArgs) {
-    return createElement('style', {
-        id: id, innerHTML: '.' + className + '{fill:'
-            + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
-            'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
-            'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
-            'stroke:' + eventArgs['border']['color'] + ';' + '}'
+    let styleEle = createElement('style', {
+        id: id
     });
+    styleEle.innerText = '.' + className + '{fill:'
+        + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
+        'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
+        'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
+        'stroke:' + eventArgs['border']['color'] + ';' + '}';
+    return styleEle;
 }
 /**
  * Function to customize the style for highlight and selection
@@ -2442,12 +2489,13 @@ function createStyle(id, className, eventArgs) {
  * @param {string} className - Specifies the class name
  * @param {IShapeSelectedEventArgs | any} eventArgs - Specifies the event args
  * @returns {void}
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function customizeStyle(id, className, eventArgs) {
     const styleEle = getElement(id);
     if (!isNullOrUndefined(styleEle)) {
-        styleEle.innerHTML = '.' + className + '{fill:'
+        styleEle.innerText = '.' + className + '{fill:'
             + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
             'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
             'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
@@ -2463,6 +2511,7 @@ function customizeStyle(id, className, eventArgs) {
  * @param {any} shapeData - Specifies the shape data
  * @param {any} data - Specifies the data
  * @returns {void}
+ * @private
  */
 function triggerItemSelectionEvent(selectionSettings, map, targetElement, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2500,6 +2549,7 @@ shapeData, data) {
  *
  * @param {Element} element - Specifies the element
  * @returns {void}
+ * @private
  */
 function removeClass(element) {
     element.removeAttribute('class');
@@ -2553,6 +2603,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
 /**
  * @param {string} id - Specifies the id
  * @returns {void}
+ * @private
  */
 function timeout(id) {
     removeElement(id);
@@ -2568,6 +2619,7 @@ function timeout(id) {
  * @param {Element} element - Specifies the element
  * @param {boolean} isTouch - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTouch) {
     const location = getMousePosition(x, y, element);
@@ -2633,9 +2685,10 @@ function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTou
  * @param {number} areaWidth - Specifies the area width
  * @param {Element} element - Specifies the element
  * @returns {void}
+ * @private
  */
 function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
-    tooltip.innerHTML = text;
+    tooltip.innerText = text;
     tooltip.style.top = tooltip.id.indexOf('_Legend') !== -1 ?
         (parseInt(size1[0], 10) + y).toString() + 'px' : (parseInt(size1[0], 10) * 2).toString() + 'px';
     tooltip.style.left = (x).toString() + 'px';
@@ -2677,30 +2730,59 @@ function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
  * @param {string} text - Specifies the text
  * @param {string} top - Specifies the top
  * @param {string} left - Specifies the left
- * @param {string} fontSize - Specifies the fontSize
+ * @param {ZoomToolbarTooltipSettingsModel} settings - Specifies the tooltip settings.
  * @returns {void}
  * @private
  */
-function createTooltip(id, text, top, left, fontSize) {
+function createTooltip(id, text, top, left, settings) {
     let tooltip = getElement(id);
+    const borderColor = getHexColor(settings.borderColor);
+    const fontColor = getHexColor(settings.fontColor);
     const style = 'top:' + top.toString() + 'px;' +
         'left:' + left.toString() + 'px;' +
-        'color: #000000; ' +
-        'background:' + '#FFFFFF' + ';' +
+        'color:' + (fontColor ? 'rgba(' + fontColor.r + ',' + fontColor.g + ',' + fontColor.b + ',' + settings.fontOpacity + ')'
+        : settings.fontColor) + ';' +
+        'background:' + settings.fill + ';' +
         'z-index: 2;' +
-        'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
-    if (!tooltip) {
+        'position:absolute;border:' + settings.borderWidth + 'px solid ' +
+        (borderColor ? 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + settings.borderOpacity + ')'
+            : settings.borderColor) + ';font-family:' + settings.fontFamily +
+        ';font-style:' + settings.fontStyle + ';font-weight:' + settings.fontWeight +
+        ';font-size:' + settings.fontSize + ';border-radius:' + settings.borderWidth + 'px;';
+    if (!tooltip && settings.visible) {
         tooltip = createElement('div', {
-            id: id, innerHTML: '&nbsp;' + text + '&nbsp;'
+            id: id
         });
+        tooltip.innerHTML = SanitizeHtmlHelper.sanitize('&nbsp;' + text + '&nbsp;');
         tooltip.style.cssText = style;
         document.body.appendChild(tooltip);
     }
-    else {
-        tooltip.innerHTML = '&nbsp;' + text + '&nbsp;';
+    else if (settings.visible) {
+        tooltip.innerHTML = SanitizeHtmlHelper.sanitize('&nbsp;' + text + '&nbsp;');
         tooltip.style.cssText = style;
     }
 }
+/**
+ * @private
+ */
+function getHexColor(color) {
+    if (color.indexOf('#') !== -1 && color.toLowerCase().indexOf('rgb') === -1) {
+        let colorArray = (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).exec(color);
+        return colorArray ? { r: parseInt(colorArray[1], 16), g: parseInt(colorArray[2], 16), b: parseInt(colorArray[3], 16) } : null;
+    }
+    else if (color.toLowerCase().indexOf('rgb') !== -1) {
+        const colorArray = color.match(/\d+/g).map((a) => { return parseInt(a, 10); });
+        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
+    }
+    else {
+        const divElment = document.createElement('div');
+        divElment.style.color = color;
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        const colorArray = window.getComputedStyle(document.body.appendChild(divElment)).color.match(/\d+/g).map((a) => { return parseInt(a, 10); });
+        document.body.removeChild(divElment);
+        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
+    }
+}
 /**
  * @param {Point} location - Specifies the location
  * @param {string} shape - Specifies the shape
@@ -3073,6 +3155,7 @@ function zoomAnimate(element, delay, duration, point, scale, size, maps) {
  * @param {Function} process - Specifies the process
  * @param {Function} end - Specifies the end
  * @returns {void}
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function animate(element, delay, duration, process, end) {
@@ -3101,7 +3184,7 @@ function animate(element, delay, duration, process, end) {
     clearAnimation = window.requestAnimationFrame(startAnimation);
 }
 /**
- * To get shape data file using Ajax.
+ * Defines the options to get shape data file using Ajax request.
  */
 class MapAjax {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3151,6 +3234,7 @@ function smoothTranslate(element, delay, duration, point) {
  * @param {number} scaleFactor - Specifies the scale factor
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {void}
+ * @private
  */
 function compareZoomFactor(scaleFactor, maps) {
     const previous = isNullOrUndefined(maps.shouldZoomPreviousFactor) ?
@@ -3181,8 +3265,9 @@ function compareZoomFactor(scaleFactor, maps) {
  * @param {number} mapHeight - Specifies the height of the maps
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {number} - Returns the scale factor
+ * @private
  */
-function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, maps) {
+function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, maps, isZoomToCoordinates) {
     let scaleFactor;
     const maxZoomFact = maps.zoomSettings.maxZoom;
     let applyMethodeZoom;
@@ -3195,9 +3280,7 @@ function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeigh
     if (maps.zoomNotApplied && !maps.isTileMap) {
         const latiRatio = Math.abs((maps.baseMapBounds.latitude.max - maps.baseMapBounds.latitude.min) / (maxLat - minLat));
         const longiRatio = Math.abs((maps.baseMapBounds.longitude.max - maps.baseMapBounds.longitude.min) / (maxLong - minLong));
-        applyMethodeZoom = Math.min(latiRatio, longiRatio);
-        const minLocation = convertGeoToPoint(minLat, minLong, 1, maps.layersCollection[0], maps);
-        const maxLocation = convertGeoToPoint(maxLat, maxLong, 1, maps.layersCollection[0], maps);
+        applyMethodeZoom = isZoomToCoordinates ? (latiRatio + longiRatio) / 2 : Math.min(latiRatio, longiRatio);
     }
     const latRatio = (maxLatValue - minLatValue) / Math.PI;
     const lngDiff = maxLong - minLong;
@@ -3206,7 +3289,8 @@ function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeigh
     const WORLD_PX_WIDTH = 256;
     const latZoom = (Math.log(mapHeight / WORLD_PX_HEIGHT / latRatio) / Math.LN2);
     const lngZoom = (Math.log(mapWidth / WORLD_PX_WIDTH / lngRatio) / Math.LN2);
-    const result = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom : Math.min(latZoom, lngZoom);
+    const result = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom :
+        isZoomToCoordinates && !maps.isTileMap ? (latZoom + lngZoom) / 2 : Math.min(latZoom, lngZoom);
     scaleFactor = Math.min(result, maxZoomFact);
     scaleFactor = maps.isTileMap || !maps.zoomNotApplied ? Math.floor(scaleFactor) : scaleFactor;
     if (!maps.isTileMap) {
@@ -3219,6 +3303,7 @@ function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeigh
  *
  * @param {any} e - Specifies the any type value
  * @returns {any} - Returns the data value
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function processResult(e) {
@@ -3544,6 +3629,7 @@ var DarkTheme;
  *
  * @param {MapsTheme} theme - Specifies the theme.
  * @returns {IThemeStyle} - Returns the theme style.
+ * @private
  */
 function getThemeStyle(theme) {
     let style;
@@ -3798,7 +3884,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
  * Maps base document
  */
 /**
- * Sets and gets the options for customizing the annotation element in maps.
+ * Gets or sets the options for customizing the annotation element in maps.
  */
 class Annotation extends ChildProperty {
 }
@@ -3820,6 +3906,9 @@ __decorate$1([
 __decorate$1([
     Property('-1')
 ], Annotation.prototype, "zIndex", void 0);
+/**
+ * Gets or sets the options to customize the arrow in the navigation line.
+ */
 class Arrow extends ChildProperty {
 }
 __decorate$1([
@@ -3838,7 +3927,7 @@ __decorate$1([
     Property(0)
 ], Arrow.prototype, "offSet", void 0);
 /**
- * Sets and gets the options to customize the style of the text in data label, legend and other texts.
+ * Gets or sets the options to customize the style of the text in data label, legend and other texts in maps.
  */
 class Font extends ChildProperty {
 }
@@ -3861,7 +3950,115 @@ __decorate$1([
     Property(1)
 ], Font.prototype, "opacity", void 0);
 /**
- * Sets and gets the options to customize the border for the maps.
+ * Specifies the options to customize the buttons in the zoom toolbar.
+ */
+class ZoomToolbarButtonSettings extends ChildProperty {
+}
+__decorate$1([
+    Property('transparent')
+], ZoomToolbarButtonSettings.prototype, "fill", void 0);
+__decorate$1([
+    Property(null)
+], ZoomToolbarButtonSettings.prototype, "color", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarButtonSettings.prototype, "borderOpacity", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarButtonSettings.prototype, "borderWidth", void 0);
+__decorate$1([
+    Property(null)
+], ZoomToolbarButtonSettings.prototype, "borderColor", void 0);
+__decorate$1([
+    Property(30)
+], ZoomToolbarButtonSettings.prototype, "radius", void 0);
+__decorate$1([
+    Property(null)
+], ZoomToolbarButtonSettings.prototype, "selectionColor", void 0);
+__decorate$1([
+    Property(null)
+], ZoomToolbarButtonSettings.prototype, "highlightColor", void 0);
+__decorate$1([
+    Property(5)
+], ZoomToolbarButtonSettings.prototype, "padding", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarButtonSettings.prototype, "opacity", void 0);
+__decorate$1([
+    Property(['ZoomIn', 'ZoomOut', 'Reset'])
+], ZoomToolbarButtonSettings.prototype, "toolbarItems", void 0);
+/**
+ * Specifies the options to customize the tooltip of the zoom toolbar.
+ */
+class ZoomToolbarTooltipSettings extends ChildProperty {
+}
+__decorate$1([
+    Property(true)
+], ZoomToolbarTooltipSettings.prototype, "visible", void 0);
+__decorate$1([
+    Property('white')
+], ZoomToolbarTooltipSettings.prototype, "fill", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarTooltipSettings.prototype, "borderOpacity", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarTooltipSettings.prototype, "borderWidth", void 0);
+__decorate$1([
+    Property('#707070')
+], ZoomToolbarTooltipSettings.prototype, "borderColor", void 0);
+__decorate$1([
+    Property('black')
+], ZoomToolbarTooltipSettings.prototype, "fontColor", void 0);
+__decorate$1([
+    Property('')
+], ZoomToolbarTooltipSettings.prototype, "fontFamily", void 0);
+__decorate$1([
+    Property('')
+], ZoomToolbarTooltipSettings.prototype, "fontStyle", void 0);
+__decorate$1([
+    Property('')
+], ZoomToolbarTooltipSettings.prototype, "fontWeight", void 0);
+__decorate$1([
+    Property('')
+], ZoomToolbarTooltipSettings.prototype, "fontSize", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarTooltipSettings.prototype, "fontOpacity", void 0);
+/**
+ * Sets and gets the options to customize the border of the zoom toolbar.
+ */
+class ZoomToolbarSettings extends ChildProperty {
+}
+__decorate$1([
+    Property('transparent')
+], ZoomToolbarSettings.prototype, "backgroundColor", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarSettings.prototype, "borderOpacity", void 0);
+__decorate$1([
+    Property(1)
+], ZoomToolbarSettings.prototype, "borderWidth", void 0);
+__decorate$1([
+    Property('transparent')
+], ZoomToolbarSettings.prototype, "borderColor", void 0);
+__decorate$1([
+    Property('Far')
+], ZoomToolbarSettings.prototype, "horizontalAlignment", void 0);
+__decorate$1([
+    Property('Near')
+], ZoomToolbarSettings.prototype, "verticalAlignment", void 0);
+__decorate$1([
+    Property('Horizontal')
+], ZoomToolbarSettings.prototype, "orientation", void 0);
+__decorate$1([
+    Complex({}, ZoomToolbarButtonSettings)
+], ZoomToolbarSettings.prototype, "buttonSettings", void 0);
+__decorate$1([
+    Complex({}, ZoomToolbarTooltipSettings)
+], ZoomToolbarSettings.prototype, "tooltipSettings", void 0);
+/**
+ * Gets or sets the options to customize the border of the maps.
  */
 class Border extends ChildProperty {
 }
@@ -3875,7 +4072,7 @@ __decorate$1([
     Property(null)
 ], Border.prototype, "opacity", void 0);
 /**
- * Sets and gets the center position in maps.
+ * Gets or sets the values to change the center position of the maps.
  */
 class CenterPosition extends ChildProperty {
 }
@@ -3886,7 +4083,7 @@ __decorate$1([
     Property(null)
 ], CenterPosition.prototype, "longitude", void 0);
 /**
- * Sets and gets the options to customize the tooltip for layers, markers, and bubble in maps.
+ * Gets or sets the options to customize the tooltip of layers, markers, and bubble in maps.
  */
 class TooltipSettings extends ChildProperty {
 }
@@ -3912,7 +4109,7 @@ __decorate$1([
     Property(null)
 ], TooltipSettings.prototype, "valuePath", void 0);
 /**
- * Sets and gets the margin for the maps component.
+ * Gets or sets the options to customize the margin of the maps.
  */
 class Margin extends ChildProperty {
 }
@@ -3928,8 +4125,8 @@ __decorate$1([
 __decorate$1([
     Property(10)
 ], Margin.prototype, "bottom", void 0);
-/*
- * Sets and gets the options to customize the line that connects the markers in marker cluster in maps.
+/**
+ * Gets or sets the options to customize the lines that connect the markers in marker cluster of the maps.
  */
 class ConnectorLineSettings extends ChildProperty {
 }
@@ -3943,7 +4140,7 @@ __decorate$1([
     Property(1)
 ], ConnectorLineSettings.prototype, "opacity", void 0);
 /**
- * Sets and gets the options to customize the cluster of markers in Maps.
+ * Gets or sets the options to customize the cluster of markers in maps.
  */
 class MarkerClusterSettings extends ChildProperty {
 }
@@ -3987,12 +4184,12 @@ __decorate$1([
     Complex({}, ConnectorLineSettings)
 ], MarkerClusterSettings.prototype, "connectorLineSettings", void 0);
 /**
- * Sets and gets the data in the marker cluster.
+ * Gets or sets the data in the marker cluster.
  */
 class MarkerClusterData extends ChildProperty {
 }
 /**
- * Sets and gets the options to customize the color-mapping in maps.
+ * Gets or sets the options to customize the color-mapping in maps.
  */
 class ColorMappingSettings extends ChildProperty {
 }
@@ -4021,7 +4218,8 @@ __decorate$1([
     Property(true)
 ], ColorMappingSettings.prototype, "showLegend", void 0);
 /**
- * To configure the initial marker shape selection settings
+ * Gets or sets the options to select the marker shape when the maps is loaded initially.
+ * The initial selection of the markers will work only when the selection settings of marker is enabled.
  */
 class InitialMarkerSelectionSettings extends ChildProperty {
 }
@@ -4032,7 +4230,8 @@ __decorate$1([
     Property(null)
 ], InitialMarkerSelectionSettings.prototype, "longitude", void 0);
 /**
- * Sets and gets the shapes that is selected initially on rendering the maps.
+ * Gets or sets the options to select the shapes when the maps is loaded initially.
+ * The initial selection of the shapes will work only when the selection settings of layer is enabled.
  */
 class InitialShapeSelectionSettings extends ChildProperty {
 }
@@ -4043,7 +4242,7 @@ __decorate$1([
     Property(null)
 ], InitialShapeSelectionSettings.prototype, "shapeValue", void 0);
 /**
- * Sets and gets the options to customize the maps on selecting the shapes.
+ * Gets or sets the options to customize the maps on selecting the shapes.
  */
 class SelectionSettings extends ChildProperty {
 }
@@ -4063,7 +4262,7 @@ __decorate$1([
     Complex({ color: 'transparent', width: 0 }, Border)
 ], SelectionSettings.prototype, "border", void 0);
 /**
- * Sets and gets the options to customize the shapes on which the mouse has hovered in maps.
+ * Gets or sets the options to customize the shapes on which the mouse has hovered in maps.
  */
 class HighlightSettings extends ChildProperty {
 }
@@ -4080,7 +4279,7 @@ __decorate$1([
     Complex({ color: 'transparent', width: 0 }, Border)
 ], HighlightSettings.prototype, "border", void 0);
 /**
- * Sets and gets the options to customize the navigation line in maps.
+ * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
 class NavigationLineSettings extends ChildProperty {
 }
@@ -4115,7 +4314,7 @@ __decorate$1([
     Complex({}, HighlightSettings)
 ], NavigationLineSettings.prototype, "highlightSettings", void 0);
 /**
- * Sets and gets the options to customize the bubble elements in maps.
+ * Gets or sets the options to customize the bubble elements in the maps.
  */
 class BubbleSettings extends ChildProperty {
 }
@@ -4171,7 +4370,7 @@ __decorate$1([
     Complex({}, HighlightSettings)
 ], BubbleSettings.prototype, "highlightSettings", void 0);
 /**
- * Sets and gets the title for the maps.
+ * Gets or sets the options to customize the title of the maps.
  */
 class CommonTitleSettings extends ChildProperty {
 }
@@ -4182,7 +4381,7 @@ __decorate$1([
     Property('')
 ], CommonTitleSettings.prototype, "description", void 0);
 /**
- * Sets and gets the subtitle for maps.
+ * Gets or sets the options to customize the subtitle of the maps.
  */
 class SubTitleSettings extends CommonTitleSettings {
 }
@@ -4193,7 +4392,7 @@ __decorate$1([
     Property('Center')
 ], SubTitleSettings.prototype, "alignment", void 0);
 /**
- * Sets and gets the title for the maps.
+ * Gets or sets the options to customize the title of the maps.
  */
 class TitleSettings extends CommonTitleSettings {
 }
@@ -4207,7 +4406,7 @@ __decorate$1([
     Complex({}, SubTitleSettings)
 ], TitleSettings.prototype, "subtitleSettings", void 0);
 /**
- * Sets and gets the options to configure maps zooming operations.
+ * Gets or sets the options to configure maps zooming operations.
  */
 class ZoomSettings extends ChildProperty {
 }
@@ -4268,8 +4467,11 @@ __decorate$1([
 __decorate$1([
     Property(true)
 ], ZoomSettings.prototype, "resetToInitial", void 0);
+__decorate$1([
+    Complex({}, ZoomToolbarSettings)
+], ZoomSettings.prototype, "toolbarSettings", void 0);
 /**
- * Sets and gets the settings to customize the color-mapping visibility based on the legend visibility.
+ * Gets or sets the settings to customize the color-mapping visibility based on the legend visibility.
  */
 class ToggleLegendSettings extends ChildProperty {
 }
@@ -4289,7 +4491,7 @@ __decorate$1([
     Complex({ color: '', width: 0 }, Border)
 ], ToggleLegendSettings.prototype, "border", void 0);
 /**
- * Sets and gets the options to customize the legend of the maps.
+ * Gets or sets the options to customize the legend of the maps.
  */
 class LegendSettings extends ChildProperty {
 }
@@ -4384,7 +4586,7 @@ __decorate$1([
     Complex({}, ToggleLegendSettings)
 ], LegendSettings.prototype, "toggleLegendSettings", void 0);
 /**
- * Sets and gets the options to customize the data-labels in maps.
+ * Gets or sets the options to customize the data labels in maps.
  */
 class DataLabelSettings extends ChildProperty {
 }
@@ -4422,7 +4624,7 @@ __decorate$1([
     Property('')
 ], DataLabelSettings.prototype, "template", void 0);
 /**
- * Sets and gets the options to customize the shapes in the maps.
+ * Gets or sets the options to customize the shapes in the maps.
  */
 class ShapeSettings extends ChildProperty {
 }
@@ -4463,7 +4665,7 @@ __decorate$1([
     Property(false)
 ], ShapeSettings.prototype, "autofill", void 0);
 /**
- * Sets and gets the options to customize the marker in the maps.
+ * Gets or sets the options to customize the markers in the maps.
  */
 class MarkerBase extends ChildProperty {
 }
@@ -4476,6 +4678,9 @@ __decorate$1([
 __decorate$1([
     Property(false)
 ], MarkerBase.prototype, "visible", void 0);
+__decorate$1([
+    Property(false)
+], MarkerBase.prototype, "enableDrag", void 0);
 __decorate$1([
     Property('#FF471A')
 ], MarkerBase.prototype, "fill", void 0);
@@ -4542,6 +4747,9 @@ __decorate$1([
 __decorate$1([
     Collection([], InitialMarkerSelectionSettings)
 ], MarkerBase.prototype, "initialMarkerSelection", void 0);
+/**
+ * Gets or sets the options to customize the markers in the maps.
+ */
 class MarkerSettings extends MarkerBase {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(parent, propName, defaultValue, isArray) {
@@ -4549,7 +4757,7 @@ class MarkerSettings extends MarkerBase {
     }
 }
 /**
- * Sets and gets the options to customize the layers of the maps.
+ * Gets or sets the options to customize the layers of the maps.
  */
 class LayerSettings extends ChildProperty {
     constructor() {
@@ -4650,7 +4858,7 @@ class Tile {
     }
 }
 /**
- * Sets and gets the maps area settings
+ * Gets or sets the options to customize the area around the shapes in the map layer.
  */
 class MapsAreaSettings extends ChildProperty {
 }
@@ -4803,6 +5011,7 @@ class Marker {
      *
      * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
      * @returns {void}
+     * @private
      */
     calculateZoomCenterPositionAndFactor(layersCollection) {
         if (!isNullOrUndefined(this.maps)) {
@@ -4872,7 +5081,7 @@ class Marker {
                     }
                     let markerFactor;
                     if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                        zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps);
+                        zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps, false);
                         if (this.maps.isTileMap) {
                             markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
                                 zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
@@ -4928,6 +5137,7 @@ class Marker {
      * To check and trigger marker click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerClick(e) {
         const target = e.target.id;
@@ -4938,6 +5148,9 @@ class Marker {
         if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
+        }
         const eventArgs = {
             cancel: false, name: markerClick, data: options.data, maps: this.maps,
             marker: options.marker, target: target, x: e.clientX, y: e.clientY,
@@ -4946,11 +5159,39 @@ class Marker {
             value: options.data['name']
         };
         this.maps.trigger(markerClick, eventArgs);
+        if (options.marker.enableDrag) {
+            let isCluster = false;
+            const layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
+            const markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
+            const dataIndex = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
+            const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+            if (this.sameMarkerData.length > 0) {
+                isCluster = (this.sameMarkerData[0].data.filter((el) => { return (el['index'] == dataIndex); })).length > 0 &&
+                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
+            }
+            if (!isCluster) {
+                const dragEventArgs = {
+                    name: markerDragStart, x: e.clientX, y: e.clientY,
+                    latitude: options.data['latitude'] || options.data['Latitude'],
+                    longitude: options.data['longitude'] || options.data['Longitude'],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
+                };
+                this.maps.trigger(markerDragStart, dragEventArgs);
+                this.maps.markerDragArgument = {
+                    targetId: target, x: e.clientX, y: e.clientY,
+                    latitude: options.data['latitude'] || options.data['Latitude'],
+                    longitude: options.data['longitude'] || options.data['Longitude'],
+                    shape: isNullOrUndefined(marker$$1.shapeValuePath) ? marker$$1.shape : marker$$1.dataSource[dataIndex][marker$$1.shapeValuePath],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
+                };
+            }
+        }
     }
     /**
      * To check and trigger Cluster click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerClusterClick(e) {
         const target = e.target.id;
@@ -5021,7 +5262,7 @@ class Marker {
                 if ((target.indexOf('_cluster_') > -1)) {
                     let isClusterSame = false;
                     const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
-                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
+                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerText.split(',').map(Number) : clusterElement.innerText.split(',').map(Number);
                     collection = [];
                     for (const i of indexes) {
                         collection.push({ data: marker$$1.dataSource[i], index: i });
@@ -5044,6 +5285,7 @@ class Marker {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerMove(e) {
         const targetId = e.target.id;
@@ -5054,6 +5296,10 @@ class Marker {
         if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
+                'pointer' : 'grabbing';
+        }
         const eventArgs = {
             cancel: false, name: markerMouseMove, data: options.data,
             maps: this.maps, target: targetId, x: e.clientX, y: e.clientY
@@ -5065,6 +5311,7 @@ class Marker {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerClusterMouseMove(e) {
         const targetId = e.target.id;
@@ -5214,6 +5461,18 @@ const markerClusterRendering = 'markerClusterRendering';
  * @private
  */
 const markerClick = 'markerClick';
+/**
+ * Specifies the maps marker drag start event name.
+ *
+ * @private
+ */
+const markerDragStart = 'markerDragStart';
+/**
+ * Specifies the maps marker drag end event name.
+ *
+ * @private
+ */
+const markerDragEnd = 'markerDragEnd';
 /**
  * Specifies the maps cluster click event name.
  *
@@ -5379,6 +5638,7 @@ class ColorMapping {
      * @param {number} colorValue - Specifies the color value
      * @param {string} equalValue - Specifies the equal value.
      * @returns {any} - Returns the color mapping values.
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getColorByValue(colorMapping, colorValue, equalValue) {
@@ -6222,6 +6482,7 @@ class LayerPanel {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const bubbleDataSource = bubble.dataSource;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.mapObject.bubbleModule.bubbleCollection = [];
                 bubbleDataSource.map((bubbleData, i) => {
                     this.renderBubble(this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble);
                 });
@@ -7067,6 +7328,8 @@ class Annotations {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To create annotation elements
+     *
+     * @private
      */
     createAnnotationTemplate(parentElement, annotation, annotationIndex) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7167,7 +7430,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  * Maps Component file
  */
 /**
- * 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>
@@ -7262,6 +7526,8 @@ let Maps = class Maps extends Component {
         /** @private */
         this.initialTileTranslate = new Point(0, 0);
         /** @private */
+        this.markerDragId = '';
+        /** @private */
         this.initialCheck = true;
         /** @private */
         this.applyZoomReset = false;
@@ -7270,15 +7536,20 @@ let Maps = class Maps extends Component {
         /** @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);
     }
     /**
      *
      * 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 isShapeSelected() {
         return this.mapSelect;
@@ -7321,6 +7592,7 @@ let Maps = class Maps extends Component {
      *
      * @param  {string} key - Specifies the key
      * @returns {string} - Returns the string value
+     * @private
      */
     getLocalizedLabel(key) {
         return this.localeObject.getConstant(key);
@@ -7455,6 +7727,7 @@ let Maps = class Maps extends Component {
      * @param {LayerSettings} layer - Specifies the layer for the maps.
      * @param {string} dataType - Specifies the data type for maps.
      * @returns {void}
+     * @private
      */
     processResponseJsonData(processType, data, layer, dataType) {
         this.serverProcess['response']++;
@@ -7495,7 +7768,6 @@ let Maps = class Maps extends Component {
         }
         if (!isNullOrUndefined(this.dataLabelModule)) {
             this.dataLabelModule.dataLabelCollections = [];
-            this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
         if (!isNullOrUndefined(this.svgObject)) {
@@ -7598,6 +7870,9 @@ let Maps = class Maps extends Component {
             }
         }
         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 });
         }
@@ -7992,7 +8267,7 @@ let Maps = class Maps extends Component {
     wireEVents() {
         //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);
@@ -8012,7 +8287,7 @@ let Maps = class Maps extends Component {
     unWireEVents() {
         //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);
@@ -8028,6 +8303,7 @@ let Maps = class Maps extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     mouseLeaveOnMap(e) {
         if (document.getElementsByClassName('highlightMapStyle').length > 0 && this.legendModule) {
@@ -8073,6 +8349,7 @@ let Maps = class Maps extends Component {
     }
     keyDownHandler(event) {
         const zoom = this.zoomModule;
+        let id = event.target['id'];
         if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
             || event.code === 'ArrowRight') && zoom) {
             const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
@@ -8080,16 +8357,18 @@ let Maps = class Maps extends Component {
                 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;
@@ -8097,7 +8376,8 @@ let Maps = class Maps extends Component {
                 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;
@@ -8105,7 +8385,7 @@ let Maps = class Maps extends Component {
             zoom.mouseDownLatLong['x'] = zoom.mouseMoveLatLong['x'];
         }
         else if (event.code === 'Enter') {
-            const 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;
@@ -8135,6 +8415,9 @@ let Maps = class Maps extends Component {
                 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.
@@ -8155,6 +8438,7 @@ let Maps = class Maps extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     mapsOnClick(e) {
         const targetEle = e.target;
@@ -8185,6 +8469,12 @@ let Maps = class Maps extends Component {
                 });
             }
         }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, targetId);
+            if (this.isDevice) {
+                this.zoomModule.removeToolbarClass('', '', '', '', '');
+            }
+        }
     }
     clickHandler(e, eventArgs, targetEle) {
         if (targetEle.id.indexOf('shapeIndex') > -1) {
@@ -8216,6 +8506,27 @@ let Maps = class Maps extends Component {
             this.selectionModule.removedSelectionList(targetEle);
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getMarkerClickLocation(pageX, pageY, x, y, marker$$1, isDragEnd) {
+        document.getElementById(this.element.id + "_svg").style.cursor = 'grabbing';
+        const targetElement = getElement(marker$$1.targetId);
+        let latLongValue = this.getClickLocation(marker$$1.targetId, pageX, pageY, targetElement, x, y);
+        const 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$$1.layerIndex], this);
+        const transPoint = this.translatePoint;
+        const translateX = (this.isTileMap ? location.x : (location.x + transPoint.x) * this.scale);
+        const 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) {
+            const markerSettings = this.layers[marker$$1.layerIndex].markerSettings[marker$$1.markerIndex];
+            latLongValue = this.getClickLocation(marker$$1.targetId, (pageX - markerSettings.offset.x), (pageY - markerSettings.offset.y), targetElement, (x - markerSettings.offset.x), (y - markerSettings.offset.y));
+        }
+        return latLongValue;
+    }
     getClickLocation(targetId, pageX, pageY, targetElement, x, y) {
         let layerIndex = 0;
         let latLongValue;
@@ -8278,6 +8589,7 @@ let Maps = class Maps extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {boolean} - Returns the boolean value
+     * @private
      */
     mouseEndOnMap(e) {
         const targetEle = e.target;
@@ -8288,13 +8600,16 @@ let Maps = class Maps extends Component {
         let pageY;
         let target;
         let touchArg;
+        let layerX = 0;
+        let layerY = 0;
         const rect = this.element.getBoundingClientRect();
         const 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 };
         }
@@ -8302,6 +8617,8 @@ let Maps = class Maps extends Component {
             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) {
@@ -8324,6 +8641,45 @@ let Maps = class Maps extends Component {
         if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
+        if (!isNullOrUndefined(this.markerDragArgument)) {
+            const marker$$1 = this.markerDragArgument;
+            this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
+            this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
+            const latLongValue = this.getMarkerClickLocation(pageX, pageY, layerX, layerY, this.markerDragArgument, true);
+            const markerObject = this.layers[marker$$1.layerIndex].markerSettings[marker$$1.markerIndex];
+            document.getElementById(this.element.id + "_svg").style.cursor = markerObject.enableDrag ? 'pointer' : 'grabbing';
+            const dragEventArgs = {
+                name: 'markerDragEnd', x: pageX, y: pageY,
+                latitude: latLongValue.latitude, longitude: latLongValue.longitude,
+                layerIndex: marker$$1.layerIndex, markerIndex: marker$$1.markerIndex,
+                dataIndex: marker$$1.dataIndex
+            };
+            if (isNullOrUndefined(markerObject.latitudeValuePath) && isNullOrUndefined(markerObject.longitudeValuePath)) {
+                const data = markerObject.dataSource[marker$$1.dataIndex];
+                if (!isNullOrUndefined(data['Longitude']) && !isNullOrUndefined(data['Latitude'])) {
+                    markerObject.dataSource[marker$$1.dataIndex].Latitude = dragEventArgs.latitude;
+                    markerObject.dataSource[marker$$1.dataIndex].Longitude = dragEventArgs.longitude;
+                }
+                else {
+                    markerObject.dataSource[marker$$1.dataIndex].latitude = dragEventArgs.latitude;
+                    markerObject.dataSource[marker$$1.dataIndex].longitude = dragEventArgs.longitude;
+                }
+            }
+            else {
+                markerObject.dataSource[marker$$1.dataIndex][markerObject.latitudeValuePath] = dragEventArgs.latitude;
+                markerObject.dataSource[marker$$1.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;
     }
     /**
@@ -8331,14 +8687,19 @@ let Maps = class Maps extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps
      * @returns {void}
+     * @private
      */
     mouseDownOnMap(e) {
         this.mouseDownEvent = { x: e.x, y: e.y };
         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);
+        }
         const rect = this.element.getBoundingClientRect();
         const element = e.target;
+        this.markerDragId = element.id;
         const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
         if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
             this.currentTiles = animatedTiles.cloneNode(true);
@@ -8371,11 +8732,37 @@ let Maps = class Maps extends Component {
             this.markerModule.sameMarkerData = [];
         }
     }
+    /**
+     * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
+     * @private
+     */
+    mapsOnRightClick(e) {
+        const targetEle = e.target;
+        const targetId = targetEle.id;
+        let latitude = null;
+        let longitude = null;
+        this.mouseClickEvent = this.mouseDownEvent = { x: e.x, y: e.y };
+        if (targetEle.id.indexOf('_ToolBar') === -1) {
+            const latLongValue = this.getClickLocation(targetId, e.pageX, e.pageY, targetEle, e['layerX'], e['layerY']);
+            if (!isNullOrUndefined(latLongValue)) {
+                latitude = latLongValue.latitude;
+                longitude = latLongValue.longitude;
+            }
+            const 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
      */
     mapsOnDoubleClick(e) {
         this.notify('dblclick', e);
@@ -8411,6 +8798,7 @@ let Maps = class Maps extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     mouseMoveOnMap(e) {
         let target;
@@ -8426,6 +8814,9 @@ let Maps = class Maps extends Component {
         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);
     }
@@ -8434,15 +8825,40 @@ let Maps = class Maps extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     onMouseMove(e) {
         const element = e.target;
-        if (!this.isTouch) {
+        this.mouseMoveId = element['id'];
+        let pageX;
+        let pageY;
+        let touches = null;
+        let layerX = 0;
+        let 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)) {
+            const marker$$1 = this.markerDragArgument;
+            this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
+            this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
+            this.getMarkerClickLocation(pageX, pageY, layerX, layerY, marker$$1, false);
+        }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.scale, e.target.id);
+        }
         return false;
     }
     legendTooltip(event, x, y, isTouch) {
@@ -8524,10 +8940,8 @@ let Maps = class Maps extends Component {
     /**
      * 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}
      */
     zoomByPosition(centerPosition, zoomFactor) {
@@ -8564,8 +8978,8 @@ let Maps = class Maps extends Component {
     /**
      * 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}
      */
     panByDirection(direction, mouseLocation) {
@@ -8594,7 +9008,7 @@ let Maps = class Maps extends Component {
     /**
      * 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}
      */
     addLayer(layer) {
@@ -8606,7 +9020,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * 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}
@@ -8620,7 +9034,7 @@ let Maps = class Maps extends Component {
     }
     /**
      * 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.
@@ -8641,12 +9055,12 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * 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}
      */
     shapeSelection(layerIndex, propertyName, name, enable) {
@@ -8750,12 +9164,12 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * 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}
      */
     zoomToCoordinates(minLatitude, minLongitude, maxLatitude, maxLongitude) {
@@ -8797,7 +9211,7 @@ let Maps = class Maps extends Component {
             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);
             const zoomArgs = {
                 cancel: false, name: 'zoom', type: zoomIn, maps: this,
                 tileTranslatePoint: {}, translatePoint: {},
@@ -8831,7 +9245,7 @@ let Maps = class Maps extends Component {
         this.legendSelectionCollection = [];
     }
     /**
-     * This method is used to set culture for maps component.
+     * This method is used to set culture for maps.
      *
      * @returns {void}
      */
@@ -8841,7 +9255,7 @@ let Maps = class Maps extends Component {
         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}
      */
@@ -8857,7 +9271,7 @@ let Maps = class Maps extends Component {
         };
     }
     /**
-     * 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}
      */
@@ -8894,6 +9308,7 @@ let Maps = class Maps extends Component {
      * Gets component name
      *
      * @returns {string} - Returns the string value
+     * @private
      */
     getModuleName() {
         return 'maps';
@@ -9204,7 +9619,7 @@ let Maps = class Maps extends Component {
         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}
@@ -9215,13 +9630,13 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * 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.
      */
     export(type, fileName, orientation, allowDownload) {
         if (!this.isDestroyed) {
@@ -9244,8 +9659,8 @@ let Maps = class Maps extends Component {
     /**
      * 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`.
      */
     getBingUrlTemplate(url) {
         let promise;
@@ -9327,20 +9742,20 @@ let Maps = class Maps extends Component {
         };
     }
     /**
-     * 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.
      */
     getGeoLocation(layerIndex, x, y) {
         let latitude = 0;
         let longitude = 0;
         if (!this.isDestroyed) {
             const container = document.getElementById(this.element.id);
-            const pageX = x - container.offsetLeft;
-            const pageY = y - container.offsetTop;
+            const pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0);
+            const pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0);
             const currentLayer = this.layersCollection[layerIndex];
             const translate = getTranslate(this, currentLayer, false);
             const translatePoint = translate['location'];
@@ -9359,11 +9774,11 @@ let Maps = class Maps extends Component {
         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.
      */
     getTileGeoLocation(x, y) {
         let latitude = 0;
@@ -9371,25 +9786,25 @@ let Maps = class Maps extends Component {
         if (!this.isDestroyed) {
             const container = document.getElementById(this.element.id);
             const ele = document.getElementById(this.element.id + '_tile_parent');
-            const latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
+            const 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.
      */
     pointToLatLong(pageX, pageY) {
         let latitude = 0;
         let longitude = 0;
         if (!this.isDestroyed) {
             const padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            pageY = pageY + padding;
             const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             const x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
             const y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
@@ -9528,6 +9943,12 @@ __decorate([
 __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);
@@ -9572,6 +9993,7 @@ class Bubble {
     constructor(maps) {
         /**
          * Bubble Id for current layer
+         * @private
          */
         this.id = '';
         this.maps = maps;
@@ -9722,7 +10144,7 @@ class Bubble {
                 const bubbleDataSource = bubbleSettings.dataSource;
                 const scale = translate['scale'];
                 const transPoint = translate['location'];
-                const position = new MapLocation((this.maps.isTileMap ? (eventArgs.cx) : ((eventArgs.cx + transPoint.x) * scale)), (this.maps.isTileMap ? (eventArgs.cy) : ((eventArgs.cy + transPoint.y) * scale)));
+                const position = new MapLocation((this.maps.isTileMap ? ((eventArgs.cx + this.maps.translatePoint.x) * this.maps.tileZoomLevel) : ((eventArgs.cx + transPoint.x) * scale)), (this.maps.isTileMap ? ((eventArgs.cy + this.maps.translatePoint.y) * this.maps.tileZoomLevel) : ((eventArgs.cy + transPoint.y) * scale)));
                 bubbleElement.setAttribute('transform', 'translate( ' + (position.x) + ' ' + (position.y) + ' )');
                 const bubble = (bubbleDataSource.length - 1) === dataIndex ? 'bubble' : null;
                 if (bubbleSettings.bubbleType === 'Square') {
@@ -9883,6 +10305,7 @@ class DataLabel {
      * @param {number} index - Specifies the index number.
      * @param {any[]} intersect - Specifies the intersect.
      * @returns {void}
+     * @private
      */
     renderLabel(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -9990,6 +10413,9 @@ class DataLabel {
         if (isNullOrUndefined(text) && (layer.dataLabelSettings.template !== '' && layer.dataSource['length'] === 0)) {
             text = shapeData['properties'][layer.shapePropertyPath];
         }
+        if (isNullOrUndefined(text) && layer.dataSource['length'] > 0) {
+            text = '';
+        }
         const dataLabelText = text;
         const projectionType = this.maps.projectionType;
         if (isPoint) {
@@ -10042,9 +10468,9 @@ class DataLabel {
                 }
                 let position = [];
                 let width = zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied
-                    && this.maps.zoomShapeCollection.length > index ? this.maps.zoomShapeCollection[index]['width'] :
+                    && this.maps.zoomShapeCollection.length > index ? (this.maps.dataLabelShape[index]) * scale :
                     (location['rightMax']['x'] - location['leftMax']['x']) * scale;
-                if (!isNullOrUndefined(this.maps.dataLabelShape)) {
+                if (!isNullOrUndefined(this.maps.dataLabelShape) && !this.maps.isReset) {
                     shapeWidth = firstLevelMapLocation['rightMax']['x'] - firstLevelMapLocation['leftMax']['x'];
                     this.maps.dataLabelShape.push(shapeWidth);
                 }
@@ -10070,8 +10496,9 @@ class DataLabel {
                     locationX = location1['x'];
                     location['x'] = location1['x'];
                     width = zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied
-                        && this.maps.zoomShapeCollection.length > index ? this.maps.zoomShapeCollection[index]['width'] :
-                        (location1['rightMax']['x'] - location1['leftMax']['x']) * scale;
+                        && this.maps.zoomShapeCollection.length > index ? (this.maps.dataLabelShape[index]) * scale :
+                        ((location1['rightMax']['x'] - location1['leftMax']['x']) * scale) > 0 ?
+                            ((location1['rightMax']['x'] - location1['leftMax']['x']) * scale) : width;
                 }
                 const xpositionEnds = ((location['x'] + transPoint['x']) * scale) + textSize['width'] / 2;
                 const xpositionStart = ((location['x'] + transPoint['x']) * scale) - textSize['width'] / 2;
@@ -10264,6 +10691,7 @@ class NavigationLine {
      * @param {number} factor - Specifies the current zoom factor of the Maps.
      * @param {number} layerIndex -Specifies the index of current layer.
      * @returns {Element} - Returns the navigation line element.
+     * @private
      */
     renderNavigation(layer, factor, layerIndex) {
         let group;
@@ -10472,6 +10900,7 @@ class Legend {
      * To calculate legend bounds and draw the legend shape and text.
      *
      * @returns {void}
+     * @private
      */
     renderLegend() {
         this.legendRenderingCollections = [];
@@ -10811,6 +11240,7 @@ class Legend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend shape and text.
+     * @private
      */
     drawLegend() {
         const map = this.maps;
@@ -12629,6 +13059,7 @@ class Highlight {
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for highlight module
+     * @private
      */
     addHighlight(layerIndex, name, enable) {
         const targetEle = getTargetElement(layerIndex, name, enable, this.maps);
@@ -12952,6 +13383,7 @@ class Selection {
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for selection
+     * @private
      */
     addSelection(layerIndex, name, enable) {
         const targetElement = getTargetElement(layerIndex, name, enable, this.maps);
@@ -13156,6 +13588,9 @@ class MapsTooltip {
         this.tooltipId = this.maps.element.id + '_mapsTooltip';
         this.addEventListener();
     }
+    /**
+     * @private
+     */
     renderTooltip(e) {
         let pageX;
         let pageY;
@@ -13176,6 +13611,10 @@ class MapsTooltip {
             pageY = e.pageY;
             target = e.target;
         }
+        if (this.maps.isDevice) {
+            clearTimeout(this.clearTimeout);
+            this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+        }
         let option;
         let currentData = '';
         const targetId = target.id;
@@ -13191,7 +13630,7 @@ class MapsTooltip {
         this.tooltipTargetID = targetId;
         const istooltipRender = (targetId.indexOf('_shapeIndex_') > -1)
             || (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1);
-        if (istooltipRender) {
+        if (istooltipRender && this.maps.markerDragArgument === null) {
             if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
                 const shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
@@ -13343,8 +13782,8 @@ class MapsTooltip {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
-                                [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [SanitizeHtmlHelper.sanitize(tooltipArgs.content.toString())] :
+                                [SanitizeHtmlHelper.sanitize(currentData.toString())],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -13360,8 +13799,8 @@ class MapsTooltip {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
-                                [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [SanitizeHtmlHelper.sanitize(tooltipArgs.content.toString())] :
+                                [SanitizeHtmlHelper.sanitize(currentData.toString())],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -13449,6 +13888,9 @@ class MapsTooltip {
         }
         return format;
     }
+    /**
+     * @private
+     */
     mouseUpHandler(e) {
         this.renderTooltip(e);
         if (this.maps.tooltipDisplayMode === 'MouseMove') {
@@ -13456,6 +13898,9 @@ class MapsTooltip {
             this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
         }
     }
+    /**
+     * @private
+     */
     removeTooltip() {
         let isTooltipRemoved = false;
         if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
@@ -13474,6 +13919,7 @@ class MapsTooltip {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To bind events for tooltip module
+     * @private
      */
     addEventListener() {
         if (this.maps.isDestroyed) {
@@ -13491,6 +13937,9 @@ class MapsTooltip {
         this.maps.on(Browser.touchCancelEvent, this.removeTooltip, this);
         this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     }
+    /**
+     * @private
+     */
     removeEventListener() {
         if (this.maps) {
             if (this.maps.isDestroyed) {
@@ -13538,32 +13987,44 @@ class MapsTooltip {
  */
 class Zoom {
     constructor(maps) {
+        /** @private */
         this.isPanning = false;
+        /** @private */
         this.mouseEnter = false;
+        /** @private */
         this.isTouch = false;
+        /** @private */
         this.rectZoomingStart = false;
+        /** @private */
         this.browserName = Browser.info.name;
         // eslint-disable-next-line @typescript-eslint/ban-types
+        /** @private */
         this.isPointer = Browser.isPointer;
         this.handled = false;
+        this.isPan = false;
+        this.isZoomFinal = false;
+        this.isZoomSelection = false;
         this.pinchFactor = 1;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        /** @private */
         this.intersect = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        /** @private */
         this.mouseDownLatLong = { x: 0, y: 0 };
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        /** @private */
         this.mouseMoveLatLong = { x: 0, y: 0 };
-        /**
-         * @private
-         */
+        /** @private */
         this.isSingleClick = false;
         this.maps = maps;
         this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';
         this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';
-        this.selectionColor = this.maps.zoomSettings.selectionColor;
-        this.fillColor = this.maps.zoomSettings.color;
+        this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor == null ?
+            this.maps.zoomSettings.selectionColor : this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
+        this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color == null ? this.maps.zoomSettings.color :
+            this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
         this.addEventListener();
     }
     /**
@@ -13573,6 +14034,7 @@ class Zoom {
      * @param {number} newZoomFactor - Specifies the zoom factor.
      * @param {string} type - Specifies the type.
      * @returns {void}
+     * @private
      */
     performZooming(position, newZoomFactor, type) {
         const map = this.maps;
@@ -13586,6 +14048,7 @@ class Zoom {
         const maxZoom = map.zoomSettings.maxZoom;
         const minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
+        newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
         const prevTilePoint = map.tileTranslatePoint;
         if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
             || map.isReset)) {
@@ -13674,6 +14137,9 @@ class Zoom {
             }
         }
         this.maps.zoomNotApplied = false;
+        if (this.maps.isDevice) {
+            this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
@@ -13718,6 +14184,9 @@ class Zoom {
         map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
             position.y - ((y * totalSize) / 100);
     }
+    /**
+     * @private
+     */
     performRectZooming() {
         this.isDragZoom = true;
         const map = this.maps;
@@ -13736,11 +14205,14 @@ class Zoom {
             if (!map.isTileMap) {
                 const scale = map.previousScale = map.scale;
                 zoomCalculationFactor = scale + Math.round((((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2));
+                zoomCalculationFactor = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
                 const translatePoint = map.previousPoint = map.translatePoint;
-                const translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
-                const translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
-                map.translatePoint = new Point(translatePointX, translatePointY);
-                map.scale = zoomCalculationFactor;
+                if (zoomCalculationFactor <= maxZoom) {
+                    const translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
+                    const translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
+                    map.translatePoint = new Point(translatePointX, translatePointY);
+                }
+                map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
                 isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                 if (isZoomCancelled) {
                     map.translatePoint = map.previousPoint;
@@ -13774,6 +14246,8 @@ class Zoom {
                 this.zoomingRect = null;
             }
         }
+        this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
+        this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
     }
     setInteraction(newInteraction) {
         this.lastScale = 1;
@@ -13787,6 +14261,9 @@ class Zoom {
             this.setInteraction(null);
         }
     }
+    /**
+     * @private
+     */
     performPinchZooming(e) {
         const map = this.maps;
         const prevLevel = map.tileZoomLevel;
@@ -13859,7 +14336,13 @@ class Zoom {
         if (!isZoomCancelled) {
             this.applyTransform(map);
         }
+        if (Browser.isDevice) {
+            this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
+        }
     }
+    /**
+     * @private
+     */
     drawZoomRectangle() {
         const map = this.maps;
         const down = this.mouseDownPoints;
@@ -13877,7 +14360,8 @@ class Zoom {
             const rectSVGObject = map.renderer.createSvg({
                 id: map.element.id + '_Selection_Rect_Zooming',
                 width: map.availableSize.width,
-                height: map.availableSize.height
+                height: map.availableSize.height,
+                style: 'position: absolute;'
             });
             const rectOption = new RectOption(map.element.id + '_ZoomRect', '#d3d3d3', border, 0.5, this.zoomingRect, 0, 0, '', '3');
             rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
@@ -13904,6 +14388,9 @@ class Zoom {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     }
+    /**
+     * @private
+     */
     applyTransform(maps, animate$$1) {
         let layerIndex;
         this.templateCount = 0;
@@ -14057,7 +14544,7 @@ class Zoom {
                                         if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
                                             const labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
                                             const labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
-                                            const zoomtext = currentEle.childNodes[k]['innerHTML'];
+                                            const zoomtext = currentEle.childNodes[k]['textContent'];
                                             const style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             const zoomtextSize = measureText(zoomtext, style);
                                             const padding = 5;
@@ -14198,7 +14685,7 @@ class Zoom {
             const datalabelTemplateElemement = getElementByID(maps.element.id + '_LayerIndex_'
                 + i + '_Label_Template_Group');
             if ((!isNullOrUndefined(markerTemplateElement)) && markerTemplateElement.childElementCount > 0) {
-                markerTemplateElement.style.visibility = "visible";
+                markerTemplateElement.style.visibility = 'visible';
                 for (let k = 0; k < markerTemplateElement.childElementCount; k++) {
                     this.markerTranslate(markerTemplateElement.childNodes[k], factor, x, y, scale, 'Template');
                 }
@@ -14271,23 +14758,23 @@ class Zoom {
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
                             text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
-                            element.innerHTML = text;
+                            element.textContent = text;
                         }
                         else {
                             text = (this.maps.dataLabelShape[l] >= zoomtextSize['width']) ? zoomtext : '';
-                            element.innerHTML = text;
+                            element.textContent = text;
                         }
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
                             zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             text = zoomtrimLabel;
-                            element.innerHTML = text;
+                            element.textContent = text;
                         }
                         else {
                             zoomtrimLabel = textTrim(this.maps.dataLabelShape[l], zoomtext, style);
                             text = zoomtrimLabel;
-                            element.innerHTML = text;
+                            element.textContent = text;
                         }
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Hide') {
@@ -14298,11 +14785,11 @@ class Zoom {
                                     || textLocations['heightTop'] > this.intersect[m]['heightBottom']
                                     || textLocations['heightBottom'] < this.intersect[m]['heightTop']) {
                                     text = !isNullOrUndefined(text) ? text : zoomtext;
-                                    element.innerHTML = text;
+                                    element.textContent = text;
                                 }
                                 else {
                                     text = '';
-                                    element.innerHTML = text;
+                                    element.textContent = text;
                                     break;
                                 }
                             }
@@ -14320,7 +14807,7 @@ class Zoom {
                                     if (scale > 1) {
                                         trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
                                     }
-                                    element.innerHTML = trimmedLable;
+                                    element.textContent = trimmedLable;
                                 }
                                 else {
                                     if (textLocations['leftWidth'] > this.intersect[j]['leftWidth']) {
@@ -14328,7 +14815,7 @@ class Zoom {
                                         const difference = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
                                         trimmedLable = textTrim(difference, text, style);
-                                        element.innerHTML = trimmedLable;
+                                        element.textContent = trimmedLable;
                                         break;
                                     }
                                     if (textLocations['leftWidth'] < this.intersect[j]['leftWidth']) {
@@ -14336,7 +14823,7 @@ class Zoom {
                                         const difference = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
                                         trimmedLable = textTrim(difference, text, style);
-                                        element.innerHTML = trimmedLable;
+                                        element.textContent = trimmedLable;
                                         break;
                                     }
                                 }
@@ -14345,7 +14832,7 @@ class Zoom {
                         this.intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
                             trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
-                            element.innerHTML = trimmedLable;
+                            element.textContent = trimmedLable;
                         }
                     }
                     if (animate$$1 || duration > 0) {
@@ -14537,6 +15024,9 @@ class Zoom {
             (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
         this.applyTransform(this.maps, false);
     }
+    /**
+     * @private
+     */
     toolBarZooming(zoomFactor, type) {
         const map = this.maps;
         map.initialCheck = false;
@@ -14554,9 +15044,9 @@ class Zoom {
         const prevTilePoint = map.tileTranslatePoint;
         map.previousProjection = map.projectionType;
         zoomFactor = (type === 'ZoomOut') ? (Math.round(zoomFactor) === 1 ? 1 : zoomFactor) : zoomFactor;
-        zoomFactor = (type === 'Reset') ? 1 : (Math.round(zoomFactor) === 0) ? 1 : zoomFactor;
+        zoomFactor = (type === 'Reset') ? minZoom : (Math.round(zoomFactor) === 0) ? 1 : zoomFactor;
         zoomFactor = (minZoom > zoomFactor && type === 'ZoomIn') ? minZoom + 1 : zoomFactor;
-        if ((!map.isTileMap) && (type === 'ZoomIn' ? zoomFactor >= minZoom && zoomFactor <= maxZoom : zoomFactor >= minZoom
+        if ((!map.isTileMap) && (type === 'ZoomIn' ? zoomFactor >= minZoom && Math.round(zoomFactor) <= maxZoom : zoomFactor >= minZoom
             || map.isReset)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const min = map.baseMapRectBounds['min'];
@@ -14641,6 +15131,9 @@ class Zoom {
             this.maps.zoomNotApplied = false;
         }
     }
+    /**
+     * @private
+     */
     createZoomingToolbars() {
         const map = this.maps;
         let zoomInElements;
@@ -14649,36 +15142,59 @@ class Zoom {
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
         });
-        const kitHeight = 16;
-        const kitWidth = 16;
         let xSpacing = 15;
         let ySpacing = 15;
-        const padding = 20;
-        const orientation = map.zoomSettings.toolBarOrientation;
-        const toolbarsCollection = map.zoomSettings.toolbars;
+        const toolbar = map.zoomSettings.toolbarSettings;
+        const button = map.zoomSettings.toolbarSettings.buttonSettings;
+        this.maps.toolbarProperties = {
+            toolBarOrientation: toolbar.orientation === 'Horizontal' ? map.zoomSettings.toolBarOrientation : toolbar.orientation,
+            highlightColor: button.highlightColor == null ? map.zoomSettings.highlightColor : button.highlightColor,
+            selectionColor: button.selectionColor == null ? map.zoomSettings.selectionColor : button.selectionColor,
+            horizontalAlignment: toolbar.horizontalAlignment === 'Far' ? map.zoomSettings.horizontalAlignment : toolbar.horizontalAlignment,
+            verticalAlignment: toolbar.verticalAlignment === 'Near' ? map.zoomSettings.verticalAlignment : toolbar.verticalAlignment,
+            color: button.color == null ? map.zoomSettings.color : button.color,
+            shapeOpacity: button.opacity !== 1 ? button.opacity : 1,
+            borderOpacity: button.borderOpacity !== 1 ? button.borderOpacity : 1
+        };
+        const cx = button.radius / 4;
+        const cy = button.radius / 4;
+        const radius = button.radius / 2;
+        const padding = button.padding;
+        const orientation = this.maps.toolbarProperties.toolBarOrientation;
+        const toolbarCollection = map.zoomSettings.toolbarSettings.buttonSettings.toolbarItems.map((value) => { return value; });
+        const toolbarsCollection = toolbarCollection.length === 3 ? map.zoomSettings.toolbars : toolbarCollection;
+        xSpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
+        ySpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
         let shadowElement = '<filter id="chart_shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="5"/>';
         shadowElement += '<feOffset dx="-3" dy="4" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1"/>';
         shadowElement += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
-        const toolBarLength = map.zoomSettings.toolbars.length;
-        const toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
-        const toolHeight = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (kitHeight * 2) : (toolBarLength * kitHeight) + (toolBarLength * padding);
+        const toolBarLength = toolbarCollection.length;
+        const toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (button.radius + button.borderWidth + (2 * padding));
+        const toolHeight = (orientation === 'Horizontal') ? (button.radius + button.borderWidth + (2 * padding)) : ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
         const defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
-        const outerElement = map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', 'transparent', { color: 'transparent', width: 1 }, 0.1, new Rect(0, 0, toolWidth, toolHeight), 0, 0));
-        outerElement.setAttribute('filter', 'url(#chart_shadow)');
+        const outerElement = map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', toolbar.backgroundColor, { color: toolbar.borderColor, width: toolbar.borderWidth, opacity: toolbar.borderOpacity }, toolbar.borderOpacity, new Rect((toolbar.borderWidth / 2), (toolbar.borderWidth / 2), (toolWidth - toolbar.borderWidth), (toolHeight - toolbar.borderWidth)), 0, 0));
         this.toolBarGroup.appendChild(outerElement);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const scaleX = (button.radius - (button.borderWidth / 2)) / 30;
         for (let i = 0; i < toolbarsCollection.length; i++) {
+            if (i !== 0) {
+                xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (button.radius + padding) + button.borderWidth) : xSpacing;
+                ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (button.radius + padding) + button.borderWidth);
+            }
             const toolbar = toolbarsCollection[i];
+            const pathStroke = !isNullOrUndefined(this.maps.toolbarProperties.color) ? this.maps.toolbarProperties.color : this.maps.themeStyle.zoomFillColor;
+            const borderColor = button.borderColor || this.maps.themeStyle.zoomFillColor;
             this.currentToolbarEle = map.renderer.createGroup({
                 id: map.element.id + '_Zooming_ToolBar_' + toolbar + '_Group',
                 transform: 'translate( ' + xSpacing + ' ' + ySpacing + ' ) '
             });
             this.currentToolbarEle.setAttribute('class', 'e-maps-toolbar');
-            const fill = 'transparent';
+            this.currentToolbarEle.appendChild(map.renderer.drawCircle(new CircleOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Rect', button.fill, { color: borderColor, width: button.borderWidth, opacity: button.borderOpacity }, button.opacity, cx, cy, radius, '')));
+            let opacity = 1;
             let direction = '';
-            this.selectionColor = this.maps.zoomSettings.selectionColor || this.maps.themeStyle.zoomSelectionColor;
+            const fill = button.fill;
+            this.selectionColor = this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor;
             switch (toolbar.toLowerCase()) {
                 case 'zoom': {
                     let fillColor;
@@ -14686,36 +15202,51 @@ class Zoom {
                     direction = 'M0.001,14.629L1.372,16l4.571-4.571v-0.685l0.228-0.274c1.051,0.868,2.423,1.417,3.885,1.417c3.291,0,';
                     direction += '5.943-2.651,5.943-5.943S13.395,0,10.103,0S4.16,2.651,4.16,5.943c0,1.508,0.503,2.834,1.417,3.885l-0.274,0.228H4.571';
                     direction = direction + 'L0.001,14.629L0.001,14.629z M5.943,5.943c0-2.285,1.828-4.114,4.114-4.114s4.114,1.828,4.114,';
+                    this.currentToolbarEle.setAttribute('class', (this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : ''));
                     if (this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
                         fillColor = fill;
-                        strokeColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
                     }
                     else if (this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
                         fillColor = fill;
-                        strokeColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
                     }
                     else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
                         fillColor = fill;
-                        strokeColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
+                    }
+                    else if (!this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
+                        fillColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
+                    }
+                    else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
+                        fillColor = fill;
+                        strokeColor = pathStroke;
                     }
                     else {
                         fillColor = this.selectionColor;
                         strokeColor = this.selectionColor;
                     }
-                    this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fillColor, 1, strokeColor, 1, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));
+                    const zoomPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fillColor, 1, strokeColor, opacity, opacity, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z'));
+                    zoomPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                    this.currentToolbarEle.appendChild(zoomPath);
                     this.zoomElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 }
                 case 'zoomin':
                     direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
-                    this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Path', fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
+                    const zoomInPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Path', fill, 3, pathStroke, 1, 1, null, direction));
+                    zoomInPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                    this.currentToolbarEle.appendChild(zoomInPath);
                     zoomInElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'zoomout':
                     direction = 'M 0, 8 L 16, 8';
-                    this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
+                    const zoomOutPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, 3, pathStroke, 1, 1, null, direction));
+                    zoomOutPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                    this.currentToolbarEle.appendChild(zoomOutPath);
                     zoomOutElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
@@ -14723,17 +15254,20 @@ class Zoom {
                     let color;
                     direction = 'M5,3h2.3L7.275,5.875h1.4L8.65,3H11L8,0L5,3z M3,11V8.7l2.875,0.025v-1.4L3,7.35V5L0,8L3,';
                     direction += '11z M11,13H8.7l0.025-2.875h-1.4L7.35,13H5l3,3L11,13z M13,5v2.3l-2.875-0.025v1.4L13,8.65V11l3-3L13,5z';
+                    this.currentToolbarEle.setAttribute('class', (this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : ''));
                     if (this.maps.zoomSettings.enablePanning && this.maps.zoomModule.isDragZoom) {
-                        color = '#737373';
+                        color = this.selectionColor || this.maps.themeStyle.zoomFillColor;
                     }
                     else if (!this.maps.zoomSettings.enablePanning) {
-                        color = '#737373';
+                        color = this.selectionColor || this.maps.themeStyle.zoomFillColor;
                         this.currentToolbarEle.setAttribute('class', '');
                     }
                     else {
-                        color = this.selectionColor;
+                        color = fill || this.maps.themeStyle.zoomFillColor;
                     }
-                    this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, color, 1, color, 1, 1, null, direction)));
+                    const panPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, color, 1, pathStroke, opacity, opacity, null, direction));
+                    panPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                    this.currentToolbarEle.appendChild(panPath);
                     this.panColor = color;
                     this.panElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
@@ -14743,16 +15277,18 @@ class Zoom {
                     direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';
                     direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';
                     direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';
-                    this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, this.fillColor, null, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z')));
+                    const resetPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, null, pathStroke, 1, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z'));
+                    resetPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                    this.currentToolbarEle.appendChild(resetPath);
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
             }
-            this.currentToolbarEle.appendChild(map.renderer.drawCircle(new CircleOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Rect', fill, { color: this.maps.themeStyle.zoomFillColor, width: 1 }, 1, 8, 8, 16, '')));
-            xSpacing = (orientation === 'Horizontal') ? (xSpacing + (kitWidth + padding)) : xSpacing;
-            ySpacing = (orientation === 'Horizontal') ? ySpacing : (ySpacing + (kitHeight + padding));
             this.toolBarGroup.appendChild(this.currentToolbarEle);
         }
     }
+    /**
+     * @private
+     */
     performToolBarAction(e) {
         const target = e.target;
         e.stopImmediatePropagation();
@@ -14778,29 +15314,30 @@ class Zoom {
     performZoomingByToolBar(type) {
         const map = this.maps;
         map.isReset = false;
+        let scale = 0;
+        const stateColor = this.fillColor || this.maps.themeStyle.zoomFillColor;
         switch (type.toLowerCase()) {
             case 'zoom':
-                this.panColor = this.fillColor;
-                this.zoomColor = this.selectionColor;
-                this.applySelection(this.zoomElements, this.selectionColor);
-                this.applySelection(this.panElements, this.fillColor);
+                this.panColor = stateColor;
+                this.zoomColor = this.maps.zoomSettings.enableSelectionZooming ? this.selectionColor : stateColor;
+                this.applySelection(this.zoomElements, this.zoomColor);
+                this.applySelection(this.panElements, this.panColor);
+                this.isPan = false;
+                this.isZoomSelection = this.maps.zoomSettings.enableSelectionZooming;
                 break;
             case 'pan':
-                if (!this.maps.zoomSettings.enablePanning) {
-                    this.panColor = '#737373';
-                }
-                else {
-                    this.panColor = this.selectionColor;
-                }
-                this.zoomColor = this.fillColor;
+                this.panColor = this.maps.zoomSettings.enablePanning ? this.selectionColor : stateColor;
+                this.zoomColor = stateColor;
                 if (!this.maps.zoomSettings.enablePanning) {
                     this.applySelection(this.zoomElements, this.selectionColor);
                     this.applySelection(this.panElements, this.panColor);
                 }
                 else {
-                    this.applySelection(this.zoomElements, this.fillColor);
+                    this.applySelection(this.zoomElements, (this.fillColor || stateColor));
                     this.applySelection(this.panElements, this.panColor);
                 }
+                this.isPan = this.maps.zoomSettings.enablePanning;
+                this.isZoomSelection = false;
                 break;
             case 'zoomin':
                 map.staticMapZoom = map.tileZoomLevel;
@@ -14808,32 +15345,66 @@ class Zoom {
                     map.staticMapZoom += 1;
                 }
                 this.toolBarZooming((map.isTileMap ? map.tileZoomLevel : map.scale) + 1, 'ZoomIn');
+                scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+                if (!this.isZoomSelection) {
+                    if (scale === map.zoomSettings.maxZoom || scale > 1 || (scale === 1 && this.maps.isTileMap)) {
+                        this.applySelection(this.zoomElements, stateColor);
+                        this.applySelection(this.panElements, map.zoomSettings.enablePanning ? this.selectionColor : stateColor);
+                    }
+                    else if (scale === 1 && !this.maps.isTileMap) {
+                        this.applySelection(this.zoomElements, stateColor);
+                        this.applySelection(this.panElements, stateColor);
+                    }
+                }
                 break;
             case 'zoomout':
                 map.staticMapZoom = map.tileZoomLevel;
                 map.markerCenterLatitude = null;
                 map.markerCenterLongitude = null;
                 this.toolBarZooming((map.isTileMap ? map.tileZoomLevel : map.scale) - 1, 'ZoomOut');
+                scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+                if (!this.isPan && this.isZoomSelection) {
+                    this.panColor = stateColor;
+                    this.zoomColor = this.selectionColor;
+                    this.applySelection(this.zoomElements, this.selectionColor);
+                    this.applySelection(this.panElements, this.panColor);
+                }
+                else {
+                    if (scale <= 1 && !map.isTileMap) {
+                        this.applySelection(this.panElements, stateColor);
+                    }
+                    else {
+                        this.applySelection(this.panElements, map.zoomSettings.enablePanning ? this.selectionColor : stateColor);
+                    }
+                }
                 break;
             case 'reset':
                 map.staticMapZoom = map.zoomSettings.enable ? map.zoomSettings.zoomFactor : 0;
                 map.markerCenterLatitude = null;
                 map.markerCenterLongitude = null;
-                this.toolBarZooming(1, 'Reset');
-                if (!this.maps.zoomSettings.enablePanning) {
-                    this.applySelection(this.zoomElements, this.selectionColor);
-                    this.applySelection(this.panElements, '#737373');
+                this.isZoomSelection = false;
+                this.isPan = this.isPanning = map.zoomSettings.enablePanning;
+                this.toolBarZooming(map.zoomSettings.minZoom, 'Reset');
+                if ((this.isPan && !this.isZoomSelection) || (!this.isPan && this.isZoomSelection)) {
+                    if (!this.maps.zoomSettings.enablePanning) {
+                        this.applySelection(this.zoomElements, this.selectionColor);
+                        this.applySelection(this.panElements, stateColor);
+                    }
+                    else {
+                        this.applySelection(this.zoomElements, stateColor);
+                        this.applySelection(this.panElements, this.selectionColor);
+                    }
                 }
-                else {
-                    this.applySelection(this.zoomElements, this.fillColor);
-                    this.applySelection(this.panElements, this.selectionColor);
+                else if (!this.isPan && !this.isZoomSelection) {
+                    this.applySelection(this.zoomElements, stateColor);
+                    this.applySelection(this.panElements, stateColor);
                 }
         }
         this.panningStyle(type.toLowerCase());
     }
     panningStyle(toolbar) {
         const svg = getElementByID(this.maps.element.id + '_svg');
-        if (toolbar === 'pan' || this.isPanning) {
+        if (toolbar === 'pan' || (this.isPanning && toolbar !== 'reset')) {
             svg.setAttribute('class', 'e-maps-panning');
         }
         else {
@@ -14848,22 +15419,50 @@ class Zoom {
         for (let i = 0; i < elements.childElementCount; i++) {
             childElement = elements.childNodes[i];
             if (childElement.tagName !== 'circle') {
-                childElement.setAttribute('fill', color);
+                childElement.setAttribute('fill', (elements.id.indexOf('Pan') > -1 ? color : 'transparent'));
                 childElement.setAttribute('stroke', color);
             }
         }
     }
+    /**
+     * @private
+     */
     showTooltip(e) {
         const text = e.target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
+        const tooltip = this.maps.zoomSettings.toolbarSettings.tooltipSettings;
+        const tooltipSettings = {
+            visible: tooltip.visible,
+            fill: tooltip.fill,
+            borderOpacity: tooltip.borderOpacity,
+            borderWidth: tooltip.borderWidth,
+            borderColor: tooltip.borderColor,
+            fontColor: tooltip.fontColor,
+            fontFamily: tooltip.fontFamily,
+            fontStyle: tooltip.fontStyle,
+            fontWeight: tooltip.fontWeight,
+            fontSize: tooltip.fontSize || '10px',
+            fontOpacity: tooltip.fontOpacity
+        };
+        tooltipSettings.fontFamily = this.maps.themeStyle.fontFamily;
         if (!this.isTouch) {
-            createTooltip('EJ2_Map_Toolbar_Tip', this.maps.getLocalizedLabel(text), (e.pageY + 10), (e.pageX + 10), '10px');
+            createTooltip('EJ2_Map_Toolbar_Tip', this.maps.getLocalizedLabel(text), (e.pageY + 10), (e.pageX + 10), tooltipSettings);
+            if (this.maps.isDevice) {
+                clearTimeout(this.clearTimeout);
+                this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+            }
         }
     }
+    /**
+     * @private
+     */
     removeTooltip() {
         if (getElementByID('EJ2_Map_Toolbar_Tip')) {
             remove(getElementByID('EJ2_Map_Toolbar_Tip'));
         }
     }
+    /**
+     * @private
+     */
     alignToolBar() {
         const map = this.maps;
         const padding = 10;
@@ -14878,12 +15477,12 @@ class Zoom {
             getElementByID(map.element.id + '_Secondary_Element').appendChild(element);
         }
         const toolBarSize = this.toolBarGroup.getBoundingClientRect();
-        rectSVGObject.setAttribute('height', (toolBarSize.height + padding / 2).toString());
-        rectSVGObject.setAttribute('width', (toolBarSize.width + padding / 2).toString());
+        rectSVGObject.setAttribute('height', (toolBarSize.height + map.zoomSettings.toolbarSettings.borderWidth).toString());
+        rectSVGObject.setAttribute('width', (toolBarSize.width + map.zoomSettings.toolbarSettings.borderWidth).toString());
         const size = !isNullOrUndefined(map.totalRect) ? map.totalRect : map.mapAreaRect;
         let x = 0;
         let y = 0;
-        switch (map.zoomSettings.verticalAlignment) {
+        switch (map.toolbarProperties.verticalAlignment) {
             case 'Near':
                 y = size.y;
                 break;
@@ -14894,7 +15493,7 @@ class Zoom {
                 y = (size.height - toolBarSize.height) - padding;
                 break;
         }
-        switch (map.zoomSettings.horizontalAlignment) {
+        switch (map.toolbarProperties.horizontalAlignment) {
             case 'Near':
                 x = size.x;
                 break;
@@ -14913,7 +15512,7 @@ class Zoom {
         const extraPosition = map.getExtraPosition();
         element.style.left = x + extraPosition.x + 'px';
         element.style.top = y + extraPosition.y + 'px';
-        const color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
+        const color = this.maps.toolbarProperties.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         const css = ' .e-maps-toolbar:hover > circle { stroke:' + color + '; } .e-maps-toolbar:hover > path { fill: ' + color + ' ;  stroke: ' + color + '; }' +
             '.e-maps-toolbar:hover { cursor: pointer; } .e-maps-cursor-disable:hover { cursor: not-allowed; } .e-maps-panning:hover { cursor: pointer; } ' +
             '.e-maps-popup-close { display: block; opacity: 0; }';
@@ -14921,6 +15520,141 @@ class Zoom {
         style.appendChild(document.createTextNode(css));
         element.appendChild(style);
     }
+    /**
+     * @private
+     */
+    removeToolbarOpacity(factor, id) {
+        if (this.maps.zoomModule && this.maps.zoomSettings.enable) {
+            if (getElementByID(this.maps.element.id + '_Zooming_KitCollection') && id.indexOf(this.maps.element.id + '_Zooming_') > -1) {
+                if (this.maps.isDevice) {
+                    getElementByID(this.maps.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
+                    this.removeToolbarClass('', '', '', '', '');
+                }
+                else {
+                    this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
+                }
+                let toolbarShapeOpacity = this.maps.toolbarProperties.shapeOpacity;
+                let toolbarButtonOpacity = this.maps.toolbarProperties.borderOpacity;
+                if (this.maps.isTileMap && (factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', '');
+                    }
+                    if (this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                    }
+                    if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming && !this.maps.isReset) {
+                        this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity, 0.3, 0.3, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), 0.3, 0.3);
+                }
+                else if ((factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '', '', '');
+                    }
+                    if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming && !this.maps.isReset) {
+                        this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3);
+                }
+                else if (factor < this.maps.zoomSettings.maxZoom) {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
+                    }
+                    if (!this.maps.zoomModule.isZoomFinal) {
+                        this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity, toolbarShapeOpacity, toolbarButtonOpacity, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity);
+                    }
+                    else {
+                        this.maps.zoomModule.isZoomFinal = false;
+                    }
+                    if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming) {
+                        this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        if (this.maps.zoomModule.isPan && this.maps.zoomSettings.enablePanning) {
+                            this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                        }
+                    }
+                    else if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        if (this.maps.zoomSettings.enableSelectionZooming) {
+                            this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                        }
+                    }
+                }
+                else {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass('', '', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
+                    }
+                    this.removeZoomOpacity(0.3, 0.3, 0.3, 0.3, toolbarShapeOpacity, toolbarButtonOpacity, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity);
+                    if (this.maps.zoomSettings.enableSelectionZooming) {
+                        this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                    }
+                }
+            }
+            else {
+                if (!this.maps.isDevice) {
+                    this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    this.removeZoomOpacity(1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
+                }
+            }
+        }
+    }
+    setOpacity(circleId, pathId, circleOpacity, pathOpacity) {
+        if (getElementByID(this.maps.element.id + circleId)) {
+            getElementByID(this.maps.element.id + circleId).setAttribute('stroke-opacity', circleOpacity.toString());
+            getElementByID(this.maps.element.id + circleId).setAttribute('fill-opacity', circleOpacity.toString());
+            getElementByID(this.maps.element.id + pathId).setAttribute('stroke-opacity', pathOpacity.toString());
+            getElementByID(this.maps.element.id + pathId).setAttribute('fill-opacity', pathOpacity.toString());
+        }
+    }
+    removeZoomOpacity(zoomOpacity, zoomStrokeOpacity, zoomInOpacity, zoomInStrokeOpacity, zoomOutOpacity, zoomOutStrokeOpacity, panOpacity, panStrokeOpacity, resetOpacity, resetStrokeOpacity) {
+        this.setOpacity('_Zooming_ToolBar_Zoom_Rect', '_Zooming_ToolBar_Zoom', zoomStrokeOpacity, zoomOpacity);
+        this.setOpacity('_Zooming_ToolBar_ZoomIn_Rect', '_Zooming_ToolBar_ZoomIn_Path', zoomInStrokeOpacity, zoomInOpacity);
+        this.setOpacity('_Zooming_ToolBar_ZoomOut_Rect', '_Zooming_ToolBar_ZoomOut', zoomOutStrokeOpacity, zoomOutOpacity);
+        this.setOpacity('_Zooming_ToolBar_Pan_Rect', '_Zooming_ToolBar_Pan', panStrokeOpacity, panOpacity);
+        this.setOpacity('_Zooming_ToolBar_Reset_Rect', '_Zooming_ToolBar_Reset', resetStrokeOpacity, resetOpacity);
+    }
+    /**
+     * @private
+     */
+    removeToolbarClass(zoomClassStyle, zoomInClassStyle, zoomOutClassStyle, panClassStyle, resetClassStyle) {
+        if (getElementByID(this.maps.element.id + '_Zooming_KitCollection')) {
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_ZoomIn_Group')) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_ZoomIn_Group').setAttribute('class', zoomInClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_ZoomOut_Group')) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_ZoomOut_Group').setAttribute('class', zoomOutClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Reset_Group')) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_Reset_Group').setAttribute('class', resetClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Zoom_Group') && this.maps.zoomSettings.enableSelectionZooming) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom_Group').setAttribute('class', zoomClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Pan_Group') && this.maps.zoomSettings.enablePanning) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan_Group').setAttribute('class', panClassStyle);
+            }
+        }
+    }
+    removePanColor(selectionColor) {
+        if (getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan_Rect') && this.maps.zoomSettings.enablePanning) {
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan').setAttribute('fill', selectionColor);
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan').setAttribute('stroke', selectionColor);
+        }
+    }
+    removeZoomColor(selectionColor) {
+        if (getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom_Rect') && this.maps.zoomSettings.enableSelectionZooming) {
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom').setAttribute('fill', 'transparent');
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom').setAttribute('stroke', selectionColor);
+        }
+    }
     /**
      * To bind events.
      *
@@ -14935,6 +15669,9 @@ class Zoom {
         EventHandler.add(element, 'mouseover', this.showTooltip, this);
         EventHandler.add(element, 'mouseout', this.removeTooltip, this);
     }
+    /**
+     * @private
+     */
     mapMouseWheel(e) {
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.mouseWheelZoom) {
             const map = this.maps;
@@ -14975,8 +15712,13 @@ class Zoom {
                     this.performZooming(position, (value - delta), direction);
                 }
             }
+            this.removeToolbarOpacity(map.mapScaleValue, (!this.maps.isDevice ? (!isNullOrUndefined(e.target) ? e.target['id'] :
+                this.maps.element.id) : this.maps.element.id + '_Zooming_'));
         }
     }
+    /**
+     * @private
+     */
     doubleClick(e) {
         const pageX = e.pageX;
         const pageY = e.pageY;
@@ -14996,6 +15738,9 @@ class Zoom {
             }
         }
     }
+    /**
+     * @private
+     */
     mouseDownHandler(e) {
         let pageX;
         let pageY;
@@ -15015,15 +15760,15 @@ class Zoom {
             target = e.target;
         }
         if (!this.maps.zoomSettings.enablePanning) {
-            this.isPanning = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
+            this.isPan = this.isPanning = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
                 : this.zoomColor === this.selectionColor;
         }
         else {
-            this.isPanning = this.panColor === this.selectionColor ? this.maps.zoomSettings.enablePanning
-                : this.zoomColor !== this.selectionColor;
+            this.isPan = this.isPanning = !this.isZoomSelection;
         }
         this.mouseDownLatLong = { x: pageX, y: pageY };
-        this.rectZoomingStart = ((!this.isPanning) && this.maps.zoomSettings.enable);
+        let scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+        this.rectZoomingStart = ((this.isZoomSelection && scale < this.maps.zoomSettings.maxZoom) && this.maps.zoomSettings.enable);
         this.mouseDownPoints = this.getMousePosition(pageX, pageY);
         if (this.isTouch) {
             this.firstMove = true;
@@ -15032,6 +15777,9 @@ class Zoom {
         }
         this.isSingleClick = true;
     }
+    /**
+     * @private
+     */
     mouseMoveHandler(e) {
         let pageX;
         let pageY;
@@ -15054,21 +15802,9 @@ class Zoom {
         if (getElementByID(map.element.id + '_Zooming_KitCollection')) {
             if (target.id.indexOf('_Zooming_') > -1) {
                 getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
-                if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
-                    if (!this.maps.zoomSettings.enablePanning) {
-                        if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
-                        }
-                    }
-                }
             }
-            else {
+            else if (!map.isDevice) {
                 getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
-                if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
-                    getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
-                    getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');
-                }
             }
         }
         if (this.isTouch) {
@@ -15090,7 +15826,7 @@ class Zoom {
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
         const targetId = e.target['id'];
         const targetEle = e.target;
-        if (zoom.enable && this.isPanning && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (zoom.enable && this.isPanning && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
             e.preventDefault();
             this.maps.element.style.cursor = 'pointer';
             this.mouseMoveLatLong = { x: pageX, y: pageY };
@@ -15104,11 +15840,19 @@ class Zoom {
         }
         if (this.isTouch ? (touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
             e.preventDefault();
-            if (this.maps.zoomSettings.enableSelectionZooming) {
+            let scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+            if (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
                 this.drawZoomRectangle();
             }
+            else {
+                this.rectZoomingStart = false;
+                this.isPan = true;
+            }
         }
     }
+    /**
+     * @private
+     */
     mouseUpHandler(e) {
         const map = this.maps;
         this.rectZoomingStart = false;
@@ -15131,6 +15875,9 @@ class Zoom {
         this.mouseMoveLatLong = { x: 0, y: 0 };
         this.mouseDownLatLong = { x: 0, y: 0 };
     }
+    /**
+     * @private
+     */
     mouseCancelHandler(e) {
         this.isPanning = false;
         this.isTouch = false;
@@ -15146,6 +15893,7 @@ class Zoom {
      *
      * @param {PointerEvent} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     click(e) {
         const map = this.maps;
@@ -15168,6 +15916,9 @@ class Zoom {
             }
         }
     }
+    /**
+     * @private
+     */
     getMousePosition(pageX, pageY) {
         const map = this.maps;
         const elementRect = map.element.getBoundingClientRect();
@@ -15179,6 +15930,9 @@ class Zoom {
         const positionY = elementRect.top + pageYOffset - clientTop;
         return new Point(Math.abs(pageX - positionX), Math.abs(pageY - positionY));
     }
+    /**
+     * @private
+     */
     addEventListener() {
         if (this.maps.isDestroyed) {
             return;
@@ -15191,6 +15945,9 @@ class Zoom {
         this.maps.on(Browser.touchEndEvent, this.mouseUpHandler, this);
         EventHandler.add(this.maps.element, this.cancelEvent, this.mouseCancelHandler, this);
     }
+    /**
+     * @private
+     */
     removeEventListener() {
         if (this.maps.isDestroyed) {
             return;
@@ -15343,7 +16100,7 @@ class Print {
 }
 
 /**
- * This module enables the export to Image functionality in Maps control.
+ * This module enables the export to Image functionality in maps.
  *
  * @hidden
  */
@@ -15512,7 +16269,7 @@ class ImageExport {
 }
 
 /**
- * This module enables the export to PDF functionality in Maps control.
+ * This module enables the export to PDF functionality in maps.
  *
  * @hidden
  */
@@ -15530,7 +16287,7 @@ class PdfExport {
      * @param {ExportType} type - Specifies the type of the document.
      * @param {string} fileName - Specifies the name of the PDF document.
      * @param {boolean} allowDownload - Specifies whether to download the document or not.
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the maps.
      * @returns {Promise<string>} - Returns "null" value when the allowDownload is set to false.
      * @private
      */
@@ -15676,5 +16433,5 @@ class PdfExport {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, getHexColor, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
 //# sourceMappingURL=ej2-maps.es2015.js.map