@syncfusion/ej2-maps 20.4.54 → 21.1.35

package/dist/es6/ej2-maps.es5.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';
@@ -21,7 +21,7 @@ var __extends$1 = (undefined && undefined.__extends) || (function () {
  * Helper functions for maps control
  */
 /**
- * Maps internal use of `Size` type
+ * Specifies the size information of an element.
  */
 var Size = /** @__PURE__ @class */ (function () {
     function Size(width, height) {
@@ -49,6 +49,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';
@@ -72,6 +73,7 @@ function calculateSize(maps) {
  *
  * @param {Maps} maps Specifies the map instance
  * @returns {void}
+ * @private
  */
 function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
@@ -93,6 +95,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) {
     var elementRect = element.getBoundingClientRect();
@@ -109,6 +112,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);
@@ -118,6 +122,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);
@@ -131,6 +136,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) {
     var mapSize = new Size(mapModel.mapAreaRect.width, mapModel.mapAreaRect.height);
@@ -214,6 +220,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) {
     var size = Math.pow(2, zoomLevel) * 256;
@@ -234,6 +241,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) {
     var longitudeMinMax = mapObject.baseMapBounds.longitude;
@@ -247,6 +255,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) {
     var latitudeMinMax = mapObject.baseMapBounds.latitude;
@@ -258,6 +267,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) {
     var cosy = Math.cos(y);
@@ -270,6 +280,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) {
     var c = Math.pow(10, b);
@@ -279,6 +290,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);
@@ -287,6 +299,7 @@ function sinci(x) {
  *
  * @param {number} a - Specifies the a value
  * @returns {number} - Returns the number
+ * @private
  */
 function acos(a) {
     return Math.acos(a);
@@ -298,6 +311,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)) {
@@ -316,6 +330,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', {
@@ -330,7 +345,7 @@ function triggerDownload(fileName, type, url, isDownload) {
     }));
 }
 /**
- * Map internal class for point
+ * Specifies the information of the position of the point in maps.
  */
 var Point = /** @__PURE__ @class */ (function () {
     function Point(x, y) {
@@ -374,7 +389,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';
@@ -538,6 +553,7 @@ var LineOption = /** @__PURE__ @class */ (function (_super) {
  * Internal use of line
  *
  * @property {number} Line - Specifies the line class
+ * @private
  */
 var Line = /** @__PURE__ @class */ (function () {
     function Line(x1, y1, x2, y2) {
@@ -551,6 +567,7 @@ var Line = /** @__PURE__ @class */ (function () {
 /**
  * Internal use of map location type
  *
+ * @private
  */
 var MapLocation = /** @__PURE__ @class */ (function () {
     function MapLocation(x, y) {
@@ -577,6 +594,7 @@ var Rect = /** @__PURE__ @class */ (function () {
  * Internal use for pattern creation.
  *
  * @property {PatternOptions} PatternOptions - Specifies the pattern option class.
+ * @private
  */
 var PatternOptions = /** @__PURE__ @class */ (function () {
     function PatternOptions(id, x, y, width, height, patternUnits, patternContentUnits, patternTransform, href) {
@@ -693,6 +711,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
@@ -714,6 +733,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) {
@@ -744,6 +764,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) {
@@ -773,6 +794,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) {
@@ -805,7 +827,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);
     }
@@ -819,6 +841,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) {
@@ -840,6 +863,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) {
@@ -856,6 +880,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) {
@@ -891,6 +916,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) {
     var bounds1;
@@ -1016,14 +1042,13 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         var clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
                         var labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
                         m++;
-                        var imageShapeY = shapeCustom['shape'] === 'Image' ? shapeCustom['size']['height'] / 2 : 0;
-                        var ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: imageShapeY }, clusterID, shapeCustom, markerCollection, maps);
+                        var 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);
@@ -1105,6 +1130,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) {
     var layerIndex = sameMarkerData[0].layerIndex;
@@ -1133,6 +1159,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) {
     var layerIndex = sameMarkerData[0].layerIndex;
@@ -1227,6 +1254,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) {
@@ -1266,6 +1294,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) {
@@ -1334,11 +1363,12 @@ function maintainSelection(elementId, elementClass, element, className) {
 function maintainStyleClass(id, idClass, fill, opacity, borderColor, borderWidth, maps) {
     if (!getElement(id)) {
         var 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);
     }
@@ -1609,7 +1639,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     var height = size.height;
     var 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';
     var balloon = maps.renderer.drawPath(options);
@@ -1682,6 +1712,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) {
@@ -1734,6 +1765,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) {
     var pointObject = [];
@@ -1753,6 +1785,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) {
     var percent = (100 / (maxValue - minValue)) * (value - minValue);
@@ -1769,6 +1802,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) {
@@ -1909,6 +1943,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) {
     var x;
@@ -1933,6 +1968,7 @@ function findPosition(location, alignment, textSize, type) {
  *
  * @param {string} id - Specifies the id
  * @returns {void}
+ * @private
  */
 function removeElement(id) {
     var element = document.getElementById(id);
@@ -1944,6 +1980,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) {
     var point1 = convertGeoToPoint(mapObject.minLatOfGivenLocation, mapObject.minLongOfGivenLocation, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
@@ -2272,6 +2309,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;
@@ -2288,6 +2326,7 @@ function fixInitialScaleForTile(map) {
  *
  * @param {string} id - Specifies the id
  * @returns {Element} - Returns the element
+ * @private
  */
 function getElementByID(id) {
     return document.getElementById(id);
@@ -2314,6 +2353,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 =
@@ -2362,6 +2402,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) {
@@ -2427,6 +2468,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);
@@ -2443,6 +2485,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) {
     var targetEle = null;
@@ -2459,6 +2502,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) {
     var targetId;
@@ -2480,16 +2524,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'] + ';' + '}'
+    var 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
@@ -2498,12 +2545,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) {
     var 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() + ';' +
@@ -2519,6 +2567,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
@@ -2556,6 +2605,7 @@ shapeData, data) {
  *
  * @param {Element} element - Specifies the element
  * @returns {void}
+ * @private
  */
 function removeClass(element) {
     element.removeAttribute('class');
@@ -2610,6 +2660,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
 /**
  * @param {string} id - Specifies the id
  * @returns {void}
+ * @private
  */
 function timeout(id) {
     removeElement(id);
@@ -2625,6 +2676,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) {
     var location = getMousePosition(x, y, element);
@@ -2690,9 +2742,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';
@@ -2734,30 +2787,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) {
     var tooltip = getElement(id);
+    var borderColor = getHexColor(settings.borderColor);
+    var fontColor = getHexColor(settings.fontColor);
     var 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) {
+        var 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) {
+        var colorArray = color.match(/\d+/g).map(function (a) { return parseInt(a, 10); });
+        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
+    }
+    else {
+        var divElment = document.createElement('div');
+        divElment.style.color = color;
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        var colorArray = window.getComputedStyle(document.body.appendChild(divElment)).color.match(/\d+/g).map(function (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
@@ -3130,6 +3212,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) {
@@ -3159,7 +3242,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.
  */
 var MapAjax = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3210,6 +3293,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) {
     var previous = isNullOrUndefined(maps.shouldZoomPreviousFactor) ?
@@ -3240,6 +3324,7 @@ 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, isZoomToCoordinates) {
     var scaleFactor;
@@ -3277,6 +3362,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) {
@@ -3602,6 +3688,7 @@ var DarkTheme;
  *
  * @param {MapsTheme} theme - Specifies the theme.
  * @returns {IThemeStyle} - Returns the theme style.
+ * @private
  */
 function getThemeStyle(theme) {
     var style;
@@ -3869,7 +3956,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.
  */
 var Annotation = /** @__PURE__ @class */ (function (_super) {
     __extends$2(Annotation, _super);
@@ -3896,6 +3983,9 @@ var Annotation = /** @__PURE__ @class */ (function (_super) {
     ], Annotation.prototype, "zIndex", void 0);
     return Annotation;
 }(ChildProperty));
+/**
+ * Gets or sets the options to customize the arrow in the navigation line.
+ */
 var Arrow = /** @__PURE__ @class */ (function (_super) {
     __extends$2(Arrow, _super);
     function Arrow() {
@@ -3919,7 +4009,7 @@ var Arrow = /** @__PURE__ @class */ (function (_super) {
     return Arrow;
 }(ChildProperty));
 /**
- * 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.
  */
 var Font = /** @__PURE__ @class */ (function (_super) {
     __extends$2(Font, _super);
@@ -3947,7 +4037,130 @@ var Font = /** @__PURE__ @class */ (function (_super) {
     return Font;
 }(ChildProperty));
 /**
- * Sets and gets the options to customize the border for the maps.
+ * Specifies the options to customize the buttons in the zoom toolbar.
+ */
+var ZoomToolbarButtonSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(ZoomToolbarButtonSettings, _super);
+    function ZoomToolbarButtonSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return ZoomToolbarButtonSettings;
+}(ChildProperty));
+/**
+ * Specifies the options to customize the tooltip of the zoom toolbar.
+ */
+var ZoomToolbarTooltipSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(ZoomToolbarTooltipSettings, _super);
+    function ZoomToolbarTooltipSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return ZoomToolbarTooltipSettings;
+}(ChildProperty));
+/**
+ * Sets and gets the options to customize the border of the zoom toolbar.
+ */
+var ZoomToolbarSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(ZoomToolbarSettings, _super);
+    function ZoomToolbarSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return ZoomToolbarSettings;
+}(ChildProperty));
+/**
+ * Gets or sets the options to customize the border of the maps.
  */
 var Border = /** @__PURE__ @class */ (function (_super) {
     __extends$2(Border, _super);
@@ -3966,7 +4179,7 @@ var Border = /** @__PURE__ @class */ (function (_super) {
     return Border;
 }(ChildProperty));
 /**
- * Sets and gets the center position in maps.
+ * Gets or sets the values to change the center position of the maps.
  */
 var CenterPosition = /** @__PURE__ @class */ (function (_super) {
     __extends$2(CenterPosition, _super);
@@ -3982,7 +4195,7 @@ var CenterPosition = /** @__PURE__ @class */ (function (_super) {
     return CenterPosition;
 }(ChildProperty));
 /**
- * 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.
  */
 var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(TooltipSettings, _super);
@@ -4013,7 +4226,7 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
     return TooltipSettings;
 }(ChildProperty));
 /**
- * Sets and gets the margin for the maps component.
+ * Gets or sets the options to customize the margin of the maps.
  */
 var Margin = /** @__PURE__ @class */ (function (_super) {
     __extends$2(Margin, _super);
@@ -4034,8 +4247,8 @@ var Margin = /** @__PURE__ @class */ (function (_super) {
     ], Margin.prototype, "bottom", void 0);
     return Margin;
 }(ChildProperty));
-/*
- * 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.
  */
 var ConnectorLineSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(ConnectorLineSettings, _super);
@@ -4054,7 +4267,7 @@ var ConnectorLineSettings = /** @__PURE__ @class */ (function (_super) {
     return ConnectorLineSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var MarkerClusterSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(MarkerClusterSettings, _super);
@@ -4103,7 +4316,7 @@ var MarkerClusterSettings = /** @__PURE__ @class */ (function (_super) {
     return MarkerClusterSettings;
 }(ChildProperty));
 /**
- * Sets and gets the data in the marker cluster.
+ * Gets or sets the data in the marker cluster.
  */
 var MarkerClusterData = /** @__PURE__ @class */ (function (_super) {
     __extends$2(MarkerClusterData, _super);
@@ -4113,7 +4326,7 @@ var MarkerClusterData = /** @__PURE__ @class */ (function (_super) {
     return MarkerClusterData;
 }(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.
  */
 var ColorMappingSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(ColorMappingSettings, _super);
@@ -4147,7 +4360,8 @@ var ColorMappingSettings = /** @__PURE__ @class */ (function (_super) {
     return ColorMappingSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var InitialMarkerSelectionSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(InitialMarkerSelectionSettings, _super);
@@ -4163,7 +4377,8 @@ var InitialMarkerSelectionSettings = /** @__PURE__ @class */ (function (_super)
     return InitialMarkerSelectionSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var InitialShapeSelectionSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(InitialShapeSelectionSettings, _super);
@@ -4179,7 +4394,7 @@ var InitialShapeSelectionSettings = /** @__PURE__ @class */ (function (_super) {
     return InitialShapeSelectionSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(SelectionSettings, _super);
@@ -4204,7 +4419,7 @@ var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
     return SelectionSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(HighlightSettings, _super);
@@ -4226,7 +4441,7 @@ var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
     return HighlightSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var NavigationLineSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(NavigationLineSettings, _super);
@@ -4266,7 +4481,7 @@ var NavigationLineSettings = /** @__PURE__ @class */ (function (_super) {
     return NavigationLineSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var BubbleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(BubbleSettings, _super);
@@ -4327,7 +4542,7 @@ var BubbleSettings = /** @__PURE__ @class */ (function (_super) {
     return BubbleSettings;
 }(ChildProperty));
 /**
- * Sets and gets the title for the maps.
+ * Gets or sets the options to customize the title of the maps.
  */
 var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(CommonTitleSettings, _super);
@@ -4343,7 +4558,7 @@ var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
     return CommonTitleSettings;
 }(ChildProperty));
 /**
- * Sets and gets the subtitle for maps.
+ * Gets or sets the options to customize the subtitle of the maps.
  */
 var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(SubTitleSettings, _super);
@@ -4359,7 +4574,7 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
     return SubTitleSettings;
 }(CommonTitleSettings));
 /**
- * Sets and gets the title for the maps.
+ * Gets or sets the options to customize the title of the maps.
  */
 var TitleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(TitleSettings, _super);
@@ -4378,7 +4593,7 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
     return TitleSettings;
 }(CommonTitleSettings));
 /**
- * Sets and gets the options to configure maps zooming operations.
+ * Gets or sets the options to configure maps zooming operations.
  */
 var ZoomSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(ZoomSettings, _super);
@@ -4442,10 +4657,13 @@ var ZoomSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(true)
     ], ZoomSettings.prototype, "resetToInitial", void 0);
+    __decorate$1([
+        Complex({}, ZoomToolbarSettings)
+    ], ZoomSettings.prototype, "toolbarSettings", void 0);
     return ZoomSettings;
 }(ChildProperty));
 /**
- * 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.
  */
 var ToggleLegendSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(ToggleLegendSettings, _super);
@@ -4470,7 +4688,7 @@ var ToggleLegendSettings = /** @__PURE__ @class */ (function (_super) {
     return ToggleLegendSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options to customize the legend of the maps.
+ * Gets or sets the options to customize the legend of the maps.
  */
 var LegendSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(LegendSettings, _super);
@@ -4570,7 +4788,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
     return LegendSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options to customize the data-labels in maps.
+ * Gets or sets the options to customize the data labels in maps.
  */
 var DataLabelSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(DataLabelSettings, _super);
@@ -4613,7 +4831,7 @@ var DataLabelSettings = /** @__PURE__ @class */ (function (_super) {
     return DataLabelSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options to customize the shapes in the maps.
+ * Gets or sets the options to customize the shapes in the maps.
  */
 var ShapeSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(ShapeSettings, _super);
@@ -4659,7 +4877,7 @@ var ShapeSettings = /** @__PURE__ @class */ (function (_super) {
     return ShapeSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options to customize the marker in the maps.
+ * Gets or sets the options to customize the markers in the maps.
  */
 var MarkerBase = /** @__PURE__ @class */ (function (_super) {
     __extends$2(MarkerBase, _super);
@@ -4675,6 +4893,9 @@ var MarkerBase = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -4743,6 +4964,9 @@ var MarkerBase = /** @__PURE__ @class */ (function (_super) {
     ], MarkerBase.prototype, "initialMarkerSelection", void 0);
     return MarkerBase;
 }(ChildProperty));
+/**
+ * Gets or sets the options to customize the markers in the maps.
+ */
 var MarkerSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(MarkerSettings, _super);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4752,7 +4976,7 @@ var MarkerSettings = /** @__PURE__ @class */ (function (_super) {
     return MarkerSettings;
 }(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.
  */
 var LayerSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(LayerSettings, _super);
@@ -4862,7 +5086,7 @@ var Tile = /** @__PURE__ @class */ (function () {
     return Tile;
 }());
 /**
- * Sets and gets the maps area settings
+ * Gets or sets the options to customize the area around the shapes in the map layer.
  */
 var MapsAreaSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(MapsAreaSettings, _super);
@@ -5021,6 +5245,7 @@ var Marker = /** @__PURE__ @class */ (function () {
      *
      * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
      * @returns {void}
+     * @private
      */
     Marker.prototype.calculateZoomCenterPositionAndFactor = function (layersCollection) {
         if (!isNullOrUndefined(this.maps)) {
@@ -5146,6 +5371,7 @@ var Marker = /** @__PURE__ @class */ (function () {
      * To check and trigger marker click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerClick = function (e) {
         var target = e.target.id;
@@ -5156,6 +5382,9 @@ var Marker = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
+        }
         var eventArgs = {
             cancel: false, name: markerClick, data: options.data, maps: this.maps,
             marker: options.marker, target: target, x: e.clientX, y: e.clientY,
@@ -5164,11 +5393,39 @@ var Marker = /** @__PURE__ @class */ (function () {
             value: options.data['name']
         };
         this.maps.trigger(markerClick, eventArgs);
+        if (options.marker.enableDrag) {
+            var isCluster = false;
+            var layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
+            var markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
+            var dataIndex_1 = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
+            var marker_1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+            if (this.sameMarkerData.length > 0) {
+                isCluster = (this.sameMarkerData[0].data.filter(function (el) { return (el['index'] == dataIndex_1); })).length > 0 &&
+                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
+            }
+            if (!isCluster) {
+                var 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_1
+                };
+                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_1][marker_1.shapeValuePath],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex_1
+                };
+            }
+        }
     };
     /**
      * To check and trigger Cluster click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerClusterClick = function (e) {
         var target = e.target.id;
@@ -5239,7 +5496,7 @@ var Marker = /** @__PURE__ @class */ (function () {
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
                     var 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);
-                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
+                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerText.split(',').map(Number) : clusterElement.innerText.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
@@ -5263,6 +5520,7 @@ var Marker = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerMove = function (e) {
         var targetId = e.target.id;
@@ -5273,6 +5531,10 @@ var Marker = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
+                'pointer' : 'grabbing';
+        }
         var eventArgs = {
             cancel: false, name: markerMouseMove, data: options.data,
             maps: this.maps, target: targetId, x: e.clientX, y: e.clientY
@@ -5284,6 +5546,7 @@ var Marker = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerClusterMouseMove = function (e) {
         var targetId = e.target.id;
@@ -5434,6 +5697,18 @@ var markerClusterRendering = 'markerClusterRendering';
  * @private
  */
 var markerClick = 'markerClick';
+/**
+ * Specifies the maps marker drag start event name.
+ *
+ * @private
+ */
+var markerDragStart = 'markerDragStart';
+/**
+ * Specifies the maps marker drag end event name.
+ *
+ * @private
+ */
+var markerDragEnd = 'markerDragEnd';
 /**
  * Specifies the maps cluster click event name.
  *
@@ -5600,6 +5875,7 @@ var ColorMapping = /** @__PURE__ @class */ (function () {
      * @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
     ColorMapping.prototype.getColorByValue = function (colorMapping, colorValue, equalValue) {
@@ -6453,6 +6729,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var bubbleDataSource = bubble_1.dataSource;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this_2.mapObject.bubbleModule.bubbleCollection = [];
                 bubbleDataSource.map(function (bubbleData, i) {
                     _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
                 });
@@ -7311,6 +7588,8 @@ var Annotations = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To create annotation elements
+     *
+     * @private
      */
     Annotations.prototype.createAnnotationTemplate = function (parentElement, annotation, annotationIndex) {
         var _this = this;
@@ -7426,7 +7705,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>
@@ -7522,6 +7802,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         /** @private */
         _this.initialTileTranslate = new Point(0, 0);
         /** @private */
+        _this.markerDragId = '';
+        /** @private */
         _this.initialCheck = true;
         /** @private */
         _this.applyZoomReset = false;
@@ -7530,8 +7812,13 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         /** @private */
         _this.markerClusterExpand = false;
         /** @private */
+        _this.mouseMoveId = '';
+        /** @private */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this.shapeSelectionItem = [];
+        /** @private */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.markerDragArgument = null;
         setValue('mergePersistData', _this.mergePersistMapsData, _this);
         return _this;
     }
@@ -7540,7 +7827,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
          *
          * Specifies whether the shape is selected in the maps or not.
          *
-         * @returns {boolean} - Returns the boolean value.
+         * @returns {boolean} - Returns a boolean value to specify whether the shape is selected in the maps or not.
          */
         get: function () {
             return this.mapSelect;
@@ -7587,6 +7874,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param  {string} key - Specifies the key
      * @returns {string} - Returns the string value
+     * @private
      */
     Maps.prototype.getLocalizedLabel = function (key) {
         return this.localeObject.getConstant(key);
@@ -7729,6 +8017,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @param {LayerSettings} layer - Specifies the layer for the maps.
      * @param {string} dataType - Specifies the data type for maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.processResponseJsonData = function (processType, data, layer, dataType) {
         this.serverProcess['response']++;
@@ -7871,6 +8160,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.zoomingChange();
+        if (this.zoomModule && this.isDevice) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.element.id + '_Zooming_');
+        }
         if (!this.isZoomByPosition && !this.zoomNotApplied) {
             this.trigger(loaded, { maps: this, isResized: this.isResize });
         }
@@ -8302,6 +8594,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mouseLeaveOnMap = function (e) {
         if (document.getElementsByClassName('highlightMapStyle').length > 0 && this.legendModule) {
@@ -8347,6 +8640,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     Maps.prototype.keyDownHandler = function (event) {
         var zoom = this.zoomModule;
+        var id = event.target['id'];
         if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
             || event.code === 'ArrowRight') && zoom) {
             var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
@@ -8354,16 +8648,18 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 this.currentTiles = animatedTiles.cloneNode(true);
             }
         }
-        if ((event.key === '+' || event.code === 'Equal') && zoom) {
+        if (this.zoomSettings.enable && zoom && (event.key === '+' || event.code === 'Equal')) {
             zoom.performZoomingByToolBar('zoomin');
         }
-        else if ((event.key === '-' || event.code === 'Minus') && zoom) {
+        else if (this.zoomSettings.enable && zoom && (event.key === '-' || event.code === 'Minus')) {
             zoom.performZoomingByToolBar('zoomout');
         }
-        else if (event['keyCode'] === 82 && zoom) {
+        else if (this.zoomSettings.enable && zoom && event['keyCode'] === 82) {
             zoom.performZoomingByToolBar('reset');
+            zoom.isPanning = false;
         }
-        else if ((event.code === 'ArrowUp' || event.code === 'ArrowDown') && zoom) {
+        else if (this.zoomSettings.enable && this.zoomSettings.enablePanning && zoom
+            && (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
             event.preventDefault();
             zoom.mouseDownLatLong['x'] = 0;
             zoom.mouseMoveLatLong['y'] = this.mapAreaRect.height / 7;
@@ -8371,7 +8667,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 zoom.mouseMoveLatLong['y'], event);
             zoom.mouseDownLatLong['y'] = zoom.mouseMoveLatLong['y'];
         }
-        else if ((event.code === 'ArrowLeft' || event.code === 'ArrowRight') && zoom) {
+        else if (this.zoomSettings.enable && this.zoomSettings.enablePanning && zoom
+            && (event.code === 'ArrowLeft' || event.code === 'ArrowRight')) {
             event.preventDefault();
             zoom.mouseDownLatLong['y'] = 0;
             zoom.mouseMoveLatLong['x'] = this.mapAreaRect.width / 7;
@@ -8379,7 +8676,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             zoom.mouseDownLatLong['x'] = zoom.mouseMoveLatLong['x'];
         }
         else if (event.code === 'Enter') {
-            var id = event.target['id'];
+            id = event.target['id'];
             event.preventDefault();
             if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
                 this.mapAreaRect = this.legendModule.initialMapAreaRect;
@@ -8409,6 +8706,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 this.keyboardHighlightSelection(id, event.type);
             }
         }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.mouseMoveId);
+        }
     };
     /**
      * Gets the selected element to be maintained or not.
@@ -8429,6 +8729,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -8460,6 +8761,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 });
             }
         }
+        if (this.zoomModule) {
+            this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, targetId);
+            if (this.isDevice) {
+                this.zoomModule.removeToolbarClass('', '', '', '', '');
+            }
+        }
     };
     Maps.prototype.clickHandler = function (e, eventArgs, targetEle) {
         if (targetEle.id.indexOf('shapeIndex') > -1) {
@@ -8491,6 +8798,27 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.selectionModule.removedSelectionList(targetEle);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Maps.prototype.getMarkerClickLocation = function (pageX, pageY, x, y, marker$$1, isDragEnd) {
+        document.getElementById(this.element.id + "_svg").style.cursor = 'grabbing';
+        var targetElement = getElement(marker$$1.targetId);
+        var latLongValue = this.getClickLocation(marker$$1.targetId, pageX, pageY, targetElement, x, y);
+        var location = (this.isTileMap) ? convertTileLatLongToPoint(new MapLocation(latLongValue.longitude, latLongValue.latitude), this.scale, this.tileTranslatePoint, true) : convertGeoToPoint(latLongValue.latitude, latLongValue.longitude, this.mapLayerPanel.currentFactor, this.layersCollection[marker$$1.layerIndex], this);
+        var transPoint = this.translatePoint;
+        var translateX = (this.isTileMap ? location.x : (location.x + transPoint.x) * this.scale);
+        var translateY = (this.isTileMap ? location.y : (location.y + transPoint.y) * this.scale);
+        if (this.markerDragArgument.shape !== 'Balloon') {
+            targetElement.setAttribute('transform', 'translate( ' + translateX + ' ' + translateY + ' )');
+        }
+        else {
+            targetElement.parentElement.setAttribute('transform', 'translate( ' + translateX + ' ' + translateY + ' )');
+        }
+        if (isDragEnd) {
+            var markerSettings = this.layers[marker$$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;
+    };
     Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y) {
         var layerIndex = 0;
         var latLongValue;
@@ -8553,6 +8881,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {boolean} - Returns the boolean value
+     * @private
      */
     Maps.prototype.mouseEndOnMap = function (e) {
         var targetEle = e.target;
@@ -8563,13 +8892,16 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         var pageY;
         var target;
         var touchArg;
+        var layerX = 0;
+        var layerY = 0;
         var rect = this.element.getBoundingClientRect();
         var element = e.target;
         if (e.type.indexOf('touch') !== -1) {
             this.isTouch = true;
             touchArg = e;
-            pageX = touchArg.changedTouches[0].pageX;
+            layerX = pageX = touchArg.changedTouches[0].pageX;
             pageY = touchArg.changedTouches[0].pageY;
+            layerY = pageY - (this.isTileMap ? 10 : 0);
             target = touchArg.target;
             this.mouseClickEvent = { x: pageX, y: pageY };
         }
@@ -8577,6 +8909,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.isTouch = e.pointerType === 'touch';
             pageX = e.pageX;
             pageY = e.pageY;
+            layerX = e['layerX'];
+            layerY = e['layerY'] - (this.isTileMap ? 10 : 0);
             target = e.target;
         }
         if (this.isTileMap) {
@@ -8599,6 +8933,45 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
+        if (!isNullOrUndefined(this.markerDragArgument)) {
+            var marker$$1 = this.markerDragArgument;
+            this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
+            this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
+            var latLongValue = this.getMarkerClickLocation(pageX, pageY, layerX, layerY, this.markerDragArgument, true);
+            var markerObject = this.layers[marker$$1.layerIndex].markerSettings[marker$$1.markerIndex];
+            document.getElementById(this.element.id + "_svg").style.cursor = markerObject.enableDrag ? 'pointer' : 'grabbing';
+            var dragEventArgs = {
+                name: 'markerDragEnd', x: pageX, y: pageY,
+                latitude: latLongValue.latitude, longitude: latLongValue.longitude,
+                layerIndex: marker$$1.layerIndex, markerIndex: marker$$1.markerIndex,
+                dataIndex: marker$$1.dataIndex
+            };
+            if (isNullOrUndefined(markerObject.latitudeValuePath) && isNullOrUndefined(markerObject.longitudeValuePath)) {
+                var 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;
     };
     /**
@@ -8606,14 +8979,19 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps
      * @returns {void}
+     * @private
      */
     Maps.prototype.mouseDownOnMap = function (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);
+        }
         var rect = this.element.getBoundingClientRect();
         var element = e.target;
+        this.markerDragId = element.id;
         var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
         if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
             this.currentTiles = animatedTiles.cloneNode(true);
@@ -8676,6 +9054,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -8711,6 +9090,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.mouseMoveOnMap = function (e) {
         var target;
@@ -8726,6 +9106,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (this.bubbleModule) {
             this.bubbleModule.bubbleMove(e);
         }
+        if (target.id.indexOf('MarkerIndex') == -1) {
+            document.getElementById(this.element.id + "_svg").style.cursor = 'auto';
+        }
         this.onMouseMove(e);
         this.notify(Browser.touchMoveEvent, e);
     };
@@ -8734,15 +9117,40 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      * @returns {void}
+     * @private
      */
     Maps.prototype.onMouseMove = function (e) {
         var element = e.target;
-        if (!this.isTouch) {
+        this.mouseMoveId = element['id'];
+        var pageX;
+        var pageY;
+        var touches = null;
+        var layerX = 0;
+        var layerY = 0;
+        if (e.type.indexOf('touch') == -1) {
+            pageX = e.pageX;
+            pageY = e.pageY;
+            layerX = e['layerX'];
+            layerY = e['layerY'] - (this.isTileMap ? 10 : 0);
             this.titleTooltip(e, e.pageX, e.pageY);
             if (!isNullOrUndefined(this.legendModule)) {
                 this.legendTooltip(e, e.pageX, e.pageY, true);
             }
         }
+        else {
+            touches = e.touches;
+            layerX = pageX = touches[0].clientX;
+            layerY = pageY = touches[0].clientY - (this.isTileMap ? 10 : 0);
+        }
+        if (!isNullOrUndefined(this.markerDragArgument)) {
+            var marker$$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;
     };
     Maps.prototype.legendTooltip = function (event, x, y, isTouch) {
@@ -8825,10 +9233,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method is used to zoom the map by specifying the center position.
      *
-     * @param {number} centerPosition - Specifies the center position
-     * @param {number} centerPosition.latitude - Specifies the latitude value for the center position
-     * @param {number} centerPosition.longitude - Specifies the longitude value for the center position
-     * @param {number} zoomFactor - Specifies the zoom factor for maps.
+     * @param {number} centerPosition - Specifies the location of the maps to be zoomed as geographical coordinates.
+     * @param {number} zoomFactor - Specifies the zoom factor for the maps.
      * @returns {void}
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
@@ -8865,8 +9271,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method is used to perform panning by specifying the direction.
      *
-     * @param {PanDirection} direction - Specifies the direction in which the panning is performed.
-     * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps.
+     * @param {PanDirection} direction - Specifies the direction in which the panning must be performed.
+     * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps in pixels.
      * @returns {void}
      */
     Maps.prototype.panByDirection = function (direction, mouseLocation) {
@@ -8895,7 +9301,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method is used to add the layers dynamically to the maps.
      *
-     * @param {Object} layer - Specifies the layer for the maps.
+     * @param {Object} layer - Specifies the layer to be added in the maps.
      * @returns {void}
      */
     Maps.prototype.addLayer = function (layer) {
@@ -8907,7 +9313,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * This method is used to remove a layer from map.
+     * This method is used to remove a layer from the maps.
      *
      * @param {number} index - Specifies the index number of the layer to be removed.
      * @returns {void}
@@ -8921,7 +9327,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * This method is used to add markers dynamically in the maps.
-     * If we provide the index value of the layer in which the marker to be added and the coordinates
+     * If we provide the index value of the layer in which the marker to be added and the settings
      * of the marker as parameters, the marker will be added in the location.
      *
      * @param {number} layerIndex - Specifies the index number of the layer.
@@ -8943,12 +9349,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * This method is used to select the geometric shape element in the maps component.
+     * This method is used to select the geometric shape element in the maps.
      *
      * @param {number} layerIndex - Specifies the index of the layer in maps.
      * @param {string | string[]} propertyName - Specifies the property name from the data source.
-     * @param {string} name - Specifies the name of the shape that is selected.
-     * @param {boolean} enable - Specifies the shape selection to be enabled.
+     * @param {string} name - Specifies the name of the shape, which is mapped from the data source, that is selected.
+     * @param {boolean} enable - Specifies whether the shape should be selected or the selection should be removed.
      * @returns {void}
      */
     Maps.prototype.shapeSelection = function (layerIndex, propertyName, name, enable) {
@@ -9052,12 +9458,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * This method is used to zoom the maps component based on the provided coordinates.
+     * This method is used to zoom the maps based on the provided coordinates.
      *
-     * @param {number} minLatitude - Specifies the minimum latitude to be zoomed.
-     * @param {number} minLongitude - Specifies the minimum latitude to be zoomed.
-     * @param {number} maxLatitude - Specifies the maximum latitude to be zoomed.
-     * @param {number} maxLongitude - Specifies the maximum longitude to be zoomed.
+     * @param {number} minLatitude - Specifies the minimum latitude of the location to be zoomed.
+     * @param {number} minLongitude - Specifies the minimum latitude of the location to be zoomed.
+     * @param {number} maxLatitude - Specifies the maximum latitude of the location to be zoomed.
+     * @param {number} maxLongitude - Specifies the maximum longitude of the location to be zoomed.
      * @returns {void}
      */
     Maps.prototype.zoomToCoordinates = function (minLatitude, minLongitude, maxLatitude, maxLongitude) {
@@ -9134,7 +9540,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.legendSelectionCollection = [];
     };
     /**
-     * This method is used to set culture for maps component.
+     * This method is used to set culture for maps.
      *
      * @returns {void}
      */
@@ -9144,7 +9550,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.localeObject = new L10n(this.getModuleName(), this.defaultLocalConstants, this.locale);
     };
     /**
-     * This method to set locale constants to the maps component.
+     * This method to set locale constants to the maps.
      *
      * @returns {void}
      */
@@ -9160,7 +9566,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         };
     };
     /**
-     * This method disposes the maps component.
+     * This method destroys the maps. This method removes the events associated with the maps and disposes the objects created for rendering and updating the maps.
      *
      * @returns {void}
      */
@@ -9197,6 +9603,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * Gets component name
      *
      * @returns {string} - Returns the string value
+     * @private
      */
     Maps.prototype.getModuleName = function () {
         return 'maps';
@@ -9511,7 +9918,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return isVisible;
     };
     /**
-     * This method handles the printing functionality for the maps component.
+     * This method handles the printing functionality for the maps.
      *
      * @param {string[] | string | Element} id - Specifies the element to be printed.
      * @returns {void}
@@ -9522,13 +9929,13 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * This method handles the export functionality for the maps component.
+     * This method handles the export functionality for the maps.
      *
      * @param {ExportType} type - Specifies the type of the exported file.
      * @param {string} fileName - Specifies the name of the file with which the rendered maps need to be exported.
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the pdf document in exporting.
-     * @param {boolean} allowDownload - Specifies whether to download as a file or get as base64 string for the file
-     * @returns {Promise<string>} - Returns the string value.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document while exporting.
+     * @param {boolean} allowDownload - Specifies whether to download as a file or get as base64 string for the file.
+     * @returns {Promise<string>} - Specifies the base64 string of the exported image which is returned when the `allowDownload` is set to false.
      */
     Maps.prototype.export = function (type, fileName, orientation, allowDownload) {
         var _this = this;
@@ -9552,8 +9959,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method is used to get the Bing maps URL.
      *
-     * @param {string} url - Specifies the URL of the maps.
-     * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
+     * @param {string} url - Specifies the URL of the Bing maps along with the API key.
+     * @returns {Promise<string>} - Returns the processed Bing URL as `Promise`.
      */
     Maps.prototype.getBingUrlTemplate = function (url) {
         var promise;
@@ -9644,20 +10051,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         };
     };
     /**
-     * This method is used to get the geo location points.
+     * This method is used to get the geographical coordinates for location points in pixels when shape maps are rendered in the maps.
      *
-     * @param {number} layerIndex - Specifies the index number of the layer of the map.
-     * @param {number} x - Specifies the x value.
-     * @param {number} y - Specifies the y value.
-     * @returns {GeoPosition}- Returns the geo position
+     * @param {number} layerIndex - Specifies the index number of the layer of the maps.
+     * @param {number} x - Specifies the x value in pixel.
+     * @param {number} y - Specifies the y value in pixel.
+     * @returns {GeoPosition}- Returns the geographical coordinates.
      */
     Maps.prototype.getGeoLocation = function (layerIndex, x, y) {
         var latitude = 0;
         var longitude = 0;
         if (!this.isDestroyed) {
             var container = document.getElementById(this.element.id);
-            var pageX = x - container.offsetLeft;
-            var pageY = y - container.offsetTop;
+            var pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0);
+            var pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0);
             var currentLayer = this.layersCollection[layerIndex];
             var translate = getTranslate(this, currentLayer, false);
             var translatePoint = translate['location'];
@@ -9676,11 +10083,11 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return Math.min(Math.max(value, minVal), maxVal);
     };
     /**
-     * This method is used to get the geo location points when tile maps is rendered in the maps component.
+     * This method is used to get the geographical coordinates for location points in pixels when an online map provider is rendered in the maps.
      *
-     * @param {number} x - Specifies the x value
-     * @param {number} y - Specifies the y value
-     * @returns {GeoPosition} - Returns the position
+     * @param {number} x - Specifies the x value in pixel.
+     * @param {number} y - Specifies the y value in pixel.
+     * @returns {GeoPosition} - Returns the geographical coordinates.
      */
     Maps.prototype.getTileGeoLocation = function (x, y) {
         var latitude = 0;
@@ -9688,25 +10095,25 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (!this.isDestroyed) {
             var container = document.getElementById(this.element.id);
             var ele = document.getElementById(this.element.id + '_tile_parent');
-            var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
+            var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0)), y + this.mapAreaRect.y - (ele.offsetTop - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0)));
             latitude = latLong['latitude'];
             longitude = latLong['longitude'];
         }
         return { latitude: latitude, longitude: longitude };
     };
     /**
-     * This method is used to convert the point to latitude and longitude in maps.
+     * This method is used to convert the point in pixels to latitude and longitude in maps.
      *
-     * @param {number} pageX - Specifies the x value for the page.
-     * @param {number} pageY - Specifies the y value for the page.
-     * @returns {Object} - Returns the object.
+     * @param {number} pageX - Specifies the x position value in pixels.
+     * @param {number} pageY - Specifies the y position value in pixels.
+     * @returns {Object} - Returns the latitude and longitude values.
      */
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
         var latitude = 0;
         var longitude = 0;
         if (!this.isDestroyed) {
             var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            pageY = pageY + padding;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
             var y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
@@ -9844,6 +10251,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "markerClick", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "markerDragStart", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "markerDragEnd", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "markerClusterClick", void 0);
@@ -9890,6 +10303,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
     function Bubble(maps) {
         /**
          * Bubble Id for current layer
+         * @private
          */
         this.id = '';
         this.maps = maps;
@@ -10041,7 +10455,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 var bubbleDataSource = bubbleSettings.dataSource;
                 var scale = translate['scale'];
                 var transPoint = translate['location'];
-                var position = new MapLocation((_this.maps.isTileMap ? (eventArgs.cx) : ((eventArgs.cx + transPoint.x) * scale)), (_this.maps.isTileMap ? (eventArgs.cy) : ((eventArgs.cy + transPoint.y) * scale)));
+                var 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) + ' )');
                 var bubble = (bubbleDataSource.length - 1) === dataIndex ? 'bubble' : null;
                 if (bubbleSettings.bubbleType === 'Square') {
@@ -10203,6 +10617,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
      * @param {number} index - Specifies the index number.
      * @param {any[]} intersect - Specifies the intersect.
      * @returns {void}
+     * @private
      */
     DataLabel.prototype.renderLabel = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10590,6 +11005,7 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
      * @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
      */
     NavigationLine.prototype.renderNavigation = function (layer, factor, layerIndex) {
         var group;
@@ -10799,6 +11215,7 @@ var Legend = /** @__PURE__ @class */ (function () {
      * To calculate legend bounds and draw the legend shape and text.
      *
      * @returns {void}
+     * @private
      */
     Legend.prototype.renderLegend = function () {
         this.legendRenderingCollections = [];
@@ -11140,6 +11557,7 @@ var Legend = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend shape and text.
+     * @private
      */
     Legend.prototype.drawLegend = function () {
         var map = this.maps;
@@ -12974,6 +13392,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for highlight module
+     * @private
      */
     Highlight.prototype.addHighlight = function (layerIndex, name, enable) {
         var targetEle = getTargetElement(layerIndex, name, enable, this.maps);
@@ -13299,6 +13718,7 @@ var Selection = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for selection
+     * @private
      */
     Selection.prototype.addSelection = function (layerIndex, name, enable) {
         var targetElement = getTargetElement(layerIndex, name, enable, this.maps);
@@ -13505,6 +13925,9 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         this.tooltipId = this.maps.element.id + '_mapsTooltip';
         this.addEventListener();
     }
+    /**
+     * @private
+     */
     MapsTooltip.prototype.renderTooltip = function (e) {
         var _this = this;
         var pageX;
@@ -13526,6 +13949,10 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             pageY = e.pageY;
             target = e.target;
         }
+        if (this.maps.isDevice) {
+            clearTimeout(this.clearTimeout);
+            this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+        }
         var option;
         var currentData = '';
         var targetId = target.id;
@@ -13541,7 +13968,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         this.tooltipTargetID = targetId;
         var 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;
                 var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
@@ -13693,8 +14120,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -13710,8 +14137,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -13801,6 +14228,9 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         }
         return format;
     };
+    /**
+     * @private
+     */
     MapsTooltip.prototype.mouseUpHandler = function (e) {
         this.renderTooltip(e);
         if (this.maps.tooltipDisplayMode === 'MouseMove') {
@@ -13808,6 +14238,9 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
         }
     };
+    /**
+     * @private
+     */
     MapsTooltip.prototype.removeTooltip = function () {
         var isTooltipRemoved = false;
         if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
@@ -13826,6 +14259,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To bind events for tooltip module
+     * @private
      */
     MapsTooltip.prototype.addEventListener = function () {
         if (this.maps.isDestroyed) {
@@ -13843,6 +14277,9 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         this.maps.on(Browser.touchCancelEvent, this.removeTooltip, this);
         this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     };
+    /**
+     * @private
+     */
     MapsTooltip.prototype.removeEventListener = function () {
         if (this.maps) {
             if (this.maps.isDestroyed) {
@@ -13891,32 +14328,44 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
  */
 var Zoom = /** @__PURE__ @class */ (function () {
     function Zoom(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();
     }
     /**
@@ -13926,6 +14375,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @param {number} newZoomFactor - Specifies the zoom factor.
      * @param {string} type - Specifies the type.
      * @returns {void}
+     * @private
      */
     Zoom.prototype.performZooming = function (position, newZoomFactor, type) {
         var _this = this;
@@ -13940,6 +14390,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var maxZoom = map.zoomSettings.maxZoom;
         var minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
+        newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
         var prevTilePoint = map.tileTranslatePoint;
         if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
             || map.isReset)) {
@@ -14028,6 +14479,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
         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
     Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
@@ -14072,6 +14526,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
             position.y - ((y * totalSize) / 100);
     };
+    /**
+     * @private
+     */
     Zoom.prototype.performRectZooming = function () {
         this.isDragZoom = true;
         var map = this.maps;
@@ -14090,11 +14547,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
             if (!map.isTileMap) {
                 var 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;
                 var translatePoint = map.previousPoint = map.translatePoint;
-                var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
-                var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
-                map.translatePoint = new Point(translatePointX, translatePointY);
-                map.scale = zoomCalculationFactor;
+                if (zoomCalculationFactor <= maxZoom) {
+                    var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
+                    var 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;
@@ -14128,6 +14588,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 this.zoomingRect = null;
             }
         }
+        this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
+        this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
     };
     Zoom.prototype.setInteraction = function (newInteraction) {
         this.lastScale = 1;
@@ -14141,6 +14603,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             this.setInteraction(null);
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.performPinchZooming = function (e) {
         var map = this.maps;
         var prevLevel = map.tileZoomLevel;
@@ -14213,7 +14678,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
         if (!isZoomCancelled) {
             this.applyTransform(map);
         }
+        if (Browser.isDevice) {
+            this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
+        }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.drawZoomRectangle = function () {
         var map = this.maps;
         var down = this.mouseDownPoints;
@@ -14231,7 +14702,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var 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;'
             });
             var rectOption = new RectOption(map.element.id + '_ZoomRect', '#d3d3d3', border, 0.5, this.zoomingRect, 0, 0, '', '3');
             rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
@@ -14258,6 +14730,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.applyTransform = function (maps, animate$$1) {
         var layerIndex;
         this.templateCount = 0;
@@ -14411,7 +14886,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
                                             var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
                                             var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
-                                            var zoomtext = currentEle.childNodes[k]['innerHTML'];
+                                            var zoomtext = currentEle.childNodes[k]['textContent'];
                                             var style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             var zoomtextSize = measureText(zoomtext, style);
                                             var padding = 5;
@@ -14554,7 +15029,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var 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 (var k = 0; k < markerTemplateElement.childElementCount; k++) {
                     this.markerTranslate(markerTemplateElement.childNodes[k], factor, x, y, scale, 'Template');
                 }
@@ -14628,23 +15103,23 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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') {
@@ -14655,11 +15130,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     || 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;
                                 }
                             }
@@ -14677,7 +15152,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     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']) {
@@ -14685,7 +15160,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         var 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']) {
@@ -14693,7 +15168,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         var 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;
                                     }
                                 }
@@ -14702,7 +15177,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         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) {
@@ -14895,6 +15370,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
         this.applyTransform(this.maps, false);
     };
+    /**
+     * @private
+     */
     Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
         var _this = this;
         var map = this.maps;
@@ -14913,9 +15391,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var 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
             var min = map.baseMapRectBounds['min'];
@@ -15000,6 +15478,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             this.maps.zoomNotApplied = false;
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
         var zoomInElements;
@@ -15008,36 +15489,59 @@ var Zoom = /** @__PURE__ @class */ (function () {
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
         });
-        var kitHeight = 16;
-        var kitWidth = 16;
         var xSpacing = 15;
         var ySpacing = 15;
-        var padding = 20;
-        var orientation = map.zoomSettings.toolBarOrientation;
-        var toolbarsCollection = map.zoomSettings.toolbars;
+        var toolbar = map.zoomSettings.toolbarSettings;
+        var 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
+        };
+        var cx = button.radius / 4;
+        var cy = button.radius / 4;
+        var radius = button.radius / 2;
+        var padding = button.padding;
+        var orientation = this.maps.toolbarProperties.toolBarOrientation;
+        var toolbarCollection = map.zoomSettings.toolbarSettings.buttonSettings.toolbarItems.map(function (value) { return value; });
+        var toolbarsCollection = toolbarCollection.length === 3 ? map.zoomSettings.toolbars : toolbarCollection;
+        xSpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
+        ySpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
         var 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>';
-        var toolBarLength = map.zoomSettings.toolbars.length;
-        var toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
-        var toolHeight = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (kitHeight * 2) : (toolBarLength * kitHeight) + (toolBarLength * padding);
+        var toolBarLength = toolbarCollection.length;
+        var toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (button.radius + button.borderWidth + (2 * padding));
+        var toolHeight = (orientation === 'Horizontal') ? (button.radius + button.borderWidth + (2 * padding)) : ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
         var defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
-        var 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)');
+        var 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
+        var scaleX = (button.radius - (button.borderWidth / 2)) / 30;
         for (var 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);
+            }
             var toolbar_1 = toolbarsCollection[i];
+            var pathStroke = !isNullOrUndefined(this.maps.toolbarProperties.color) ? this.maps.toolbarProperties.color : this.maps.themeStyle.zoomFillColor;
+            var borderColor = button.borderColor || this.maps.themeStyle.zoomFillColor;
             this.currentToolbarEle = map.renderer.createGroup({
                 id: map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Group',
                 transform: 'translate( ' + xSpacing + ' ' + ySpacing + ' ) '
             });
             this.currentToolbarEle.setAttribute('class', 'e-maps-toolbar');
-            var fill = 'transparent';
+            this.currentToolbarEle.appendChild(map.renderer.drawCircle(new CircleOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Rect', button.fill, { color: borderColor, width: button.borderWidth, opacity: button.borderOpacity }, button.opacity, cx, cy, radius, '')));
+            var opacity = 1;
             var direction = '';
-            this.selectionColor = this.maps.zoomSettings.selectionColor || this.maps.themeStyle.zoomSelectionColor;
+            var fill = button.fill;
+            this.selectionColor = this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor;
             switch (toolbar_1.toLowerCase()) {
                 case 'zoom': {
                     var fillColor_1 = void 0;
@@ -15045,36 +15549,51 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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_1 = fill;
-                        strokeColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
                     }
                     else if (this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
                         fillColor_1 = fill;
-                        strokeColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
                     }
                     else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
                         fillColor_1 = fill;
-                        strokeColor = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
+                    }
+                    else if (!this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
+                        fillColor_1 = this.maps.themeStyle.zoomFillColor;
+                        strokeColor = pathStroke;
+                    }
+                    else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
+                        fillColor_1 = fill;
+                        strokeColor = pathStroke;
                     }
                     else {
                         fillColor_1 = this.selectionColor;
                         strokeColor = this.selectionColor;
                     }
-                    this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fillColor_1, 1, strokeColor, 1, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));
+                    var zoomPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fillColor_1, 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_1 + '_Path', fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
+                    var zoomInPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_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_1, fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
+                    var zoomOutPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, 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;
@@ -15082,17 +15601,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     var color = void 0;
                     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_1, color, 1, color, 1, 1, null, direction)));
+                    var panPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, 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);
@@ -15102,16 +15624,18 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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_1, 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')));
+                    var resetPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, 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_1 + '_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
+     */
     Zoom.prototype.performToolBarAction = function (e) {
         var target = e.target;
         e.stopImmediatePropagation();
@@ -15137,29 +15661,30 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.performZoomingByToolBar = function (type) {
         var map = this.maps;
         map.isReset = false;
+        var scale = 0;
+        var 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;
@@ -15167,32 +15692,66 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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());
     };
     Zoom.prototype.panningStyle = function (toolbar) {
         var 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 {
@@ -15207,22 +15766,50 @@ var Zoom = /** @__PURE__ @class */ (function () {
         for (var 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
+     */
     Zoom.prototype.showTooltip = function (e) {
         var text = e.target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
+        var tooltip = this.maps.zoomSettings.toolbarSettings.tooltipSettings;
+        var 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
+     */
     Zoom.prototype.removeTooltip = function () {
         if (getElementByID('EJ2_Map_Toolbar_Tip')) {
             remove(getElementByID('EJ2_Map_Toolbar_Tip'));
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.alignToolBar = function () {
         var map = this.maps;
         var padding = 10;
@@ -15237,12 +15824,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
             getElementByID(map.element.id + '_Secondary_Element').appendChild(element);
         }
         var 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());
         var size = !isNullOrUndefined(map.totalRect) ? map.totalRect : map.mapAreaRect;
         var x = 0;
         var y = 0;
-        switch (map.zoomSettings.verticalAlignment) {
+        switch (map.toolbarProperties.verticalAlignment) {
             case 'Near':
                 y = size.y;
                 break;
@@ -15253,7 +15840,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 y = (size.height - toolBarSize.height) - padding;
                 break;
         }
-        switch (map.zoomSettings.horizontalAlignment) {
+        switch (map.toolbarProperties.horizontalAlignment) {
             case 'Near':
                 x = size.x;
                 break;
@@ -15272,7 +15859,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var extraPosition = map.getExtraPosition();
         element.style.left = x + extraPosition.x + 'px';
         element.style.top = y + extraPosition.y + 'px';
-        var color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
+        var color = this.maps.toolbarProperties.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         var 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; }';
@@ -15280,6 +15867,141 @@ var Zoom = /** @__PURE__ @class */ (function () {
         style.appendChild(document.createTextNode(css));
         element.appendChild(style);
     };
+    /**
+     * @private
+     */
+    Zoom.prototype.removeToolbarOpacity = function (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');
+                }
+                var toolbarShapeOpacity = this.maps.toolbarProperties.shapeOpacity;
+                var 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);
+                }
+            }
+        }
+    };
+    Zoom.prototype.setOpacity = function (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());
+        }
+    };
+    Zoom.prototype.removeZoomOpacity = function (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
+     */
+    Zoom.prototype.removeToolbarClass = function (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);
+            }
+        }
+    };
+    Zoom.prototype.removePanColor = function (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);
+        }
+    };
+    Zoom.prototype.removeZoomColor = function (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.
      *
@@ -15294,6 +16016,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         EventHandler.add(element, 'mouseover', this.showTooltip, this);
         EventHandler.add(element, 'mouseout', this.removeTooltip, this);
     };
+    /**
+     * @private
+     */
     Zoom.prototype.mapMouseWheel = function (e) {
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.mouseWheelZoom) {
             var map = this.maps;
@@ -15334,8 +16059,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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
+     */
     Zoom.prototype.doubleClick = function (e) {
         var pageX = e.pageX;
         var pageY = e.pageY;
@@ -15355,6 +16085,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.mouseDownHandler = function (e) {
         var pageX;
         var pageY;
@@ -15374,15 +16107,15 @@ var Zoom = /** @__PURE__ @class */ (function () {
             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);
+        var 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;
@@ -15391,6 +16124,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
         this.isSingleClick = true;
     };
+    /**
+     * @private
+     */
     Zoom.prototype.mouseMoveHandler = function (e) {
         var pageX;
         var pageY;
@@ -15413,21 +16149,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         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) {
@@ -15449,7 +16173,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
         var targetId = e.target['id'];
         var 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 };
@@ -15463,11 +16187,19 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
         if (this.isTouch ? (touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
             e.preventDefault();
-            if (this.maps.zoomSettings.enableSelectionZooming) {
+            var 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
+     */
     Zoom.prototype.mouseUpHandler = function (e) {
         var map = this.maps;
         this.rectZoomingStart = false;
@@ -15490,6 +16222,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.mouseMoveLatLong = { x: 0, y: 0 };
         this.mouseDownLatLong = { x: 0, y: 0 };
     };
+    /**
+     * @private
+     */
     Zoom.prototype.mouseCancelHandler = function (e) {
         this.isPanning = false;
         this.isTouch = false;
@@ -15505,6 +16240,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     Zoom.prototype.click = function (e) {
         var map = this.maps;
@@ -15527,6 +16263,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.getMousePosition = function (pageX, pageY) {
         var map = this.maps;
         var elementRect = map.element.getBoundingClientRect();
@@ -15538,6 +16277,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var positionY = elementRect.top + pageYOffset - clientTop;
         return new Point(Math.abs(pageX - positionX), Math.abs(pageY - positionY));
     };
+    /**
+     * @private
+     */
     Zoom.prototype.addEventListener = function () {
         if (this.maps.isDestroyed) {
             return;
@@ -15550,6 +16292,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.maps.on(Browser.touchEndEvent, this.mouseUpHandler, this);
         EventHandler.add(this.maps.element, this.cancelEvent, this.mouseCancelHandler, this);
     };
+    /**
+     * @private
+     */
     Zoom.prototype.removeEventListener = function () {
         if (this.maps.isDestroyed) {
             return;
@@ -15705,7 +16450,7 @@ var Print = /** @__PURE__ @class */ (function () {
 }());
 
 /**
- * This module enables the export to Image functionality in Maps control.
+ * This module enables the export to Image functionality in maps.
  *
  * @hidden
  */
@@ -15878,7 +16623,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
 }());
 
 /**
- * This module enables the export to PDF functionality in Maps control.
+ * This module enables the export to PDF functionality in maps.
  *
  * @hidden
  */
@@ -15897,7 +16642,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @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
      */
@@ -16047,5 +16792,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
  * 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.es5.js.map