@syncfusion/ej2-maps 20.4.54 → 21.1.37

package/src/maps/user-interaction/zoom.js

@@ -12,32 +12,44 @@ import { getValueFromObject } from '../utils/helper';
  */
 var Zoom = /** @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();
     }
     /**
@@ -47,6 +59,7 @@ var Zoom = /** @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;
@@ -61,6 +74,7 @@ var Zoom = /** @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)) {
@@ -149,6 +163,9 @@ var Zoom = /** @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) {
@@ -193,6 +210,9 @@ var Zoom = /** @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;
@@ -211,11 +231,14 @@ var Zoom = /** @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;
@@ -249,6 +272,8 @@ var Zoom = /** @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;
@@ -262,6 +287,9 @@ var Zoom = /** @class */ (function () {
             this.setInteraction(null);
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.performPinchZooming = function (e) {
         var map = this.maps;
         var prevLevel = map.tileZoomLevel;
@@ -335,7 +363,13 @@ var Zoom = /** @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;
@@ -353,7 +387,8 @@ var Zoom = /** @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));
@@ -380,6 +415,9 @@ var Zoom = /** @class */ (function () {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.applyTransform = function (maps, animate) {
         var layerIndex;
         this.templateCount = 0;
@@ -538,7 +576,7 @@ var Zoom = /** @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;
@@ -681,7 +719,7 @@ var Zoom = /** @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');
                 }
@@ -755,23 +793,23 @@ var Zoom = /** @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') {
@@ -782,11 +820,11 @@ var Zoom = /** @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;
                                 }
                             }
@@ -804,7 +842,7 @@ var Zoom = /** @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']) {
@@ -812,7 +850,7 @@ var Zoom = /** @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']) {
@@ -820,7 +858,7 @@ var Zoom = /** @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;
                                     }
                                 }
@@ -829,7 +867,7 @@ var Zoom = /** @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 || duration > 0) {
@@ -1022,6 +1060,9 @@ var Zoom = /** @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;
@@ -1040,10 +1081,10 @@ var Zoom = /** @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;
         var zoomArgs;
-        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'];
@@ -1132,6 +1173,9 @@ var Zoom = /** @class */ (function () {
             this.maps.zoomNotApplied = false;
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
         var zoomInElements;
@@ -1140,41 +1184,61 @@ var Zoom = /** @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 performFunction;
+        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 pathOptions = void 0;
-            var polyOptions = void 0;
+            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');
+            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 fillColor = '';
-            var fill = 'transparent';
+            var opacity = 1;
             var direction = '';
             var polygonDirection = '';
-            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;
@@ -1182,36 +1246,51 @@ var Zoom = /** @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 = 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 = this.maps.themeStyle.zoomFillColor;
+                        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;
@@ -1219,17 +1298,20 @@ var Zoom = /** @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);
@@ -1239,16 +1321,18 @@ var Zoom = /** @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();
@@ -1274,29 +1358,30 @@ var Zoom = /** @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;
@@ -1304,32 +1389,66 @@ var Zoom = /** @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 {
@@ -1344,22 +1463,50 @@ var Zoom = /** @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;
@@ -1374,12 +1521,12 @@ var Zoom = /** @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;
@@ -1390,7 +1537,7 @@ var Zoom = /** @class */ (function () {
                 y = (size.height - toolBarSize.height) - padding;
                 break;
         }
-        switch (map.zoomSettings.horizontalAlignment) {
+        switch (map.toolbarProperties.horizontalAlignment) {
             case 'Near':
                 x = size.x;
                 break;
@@ -1409,7 +1556,7 @@ var Zoom = /** @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; }';
@@ -1417,6 +1564,141 @@ var Zoom = /** @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.
      *
@@ -1431,6 +1713,9 @@ var Zoom = /** @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;
@@ -1471,8 +1756,13 @@ var Zoom = /** @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;
@@ -1492,6 +1782,9 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.mouseDownHandler = function (e) {
         var pageX;
         var pageY;
@@ -1511,15 +1804,15 @@ var Zoom = /** @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;
@@ -1528,6 +1821,9 @@ var Zoom = /** @class */ (function () {
         }
         this.isSingleClick = true;
     };
+    /**
+     * @private
+     */
     Zoom.prototype.mouseMoveHandler = function (e) {
         var pageX;
         var pageY;
@@ -1551,21 +1847,9 @@ var Zoom = /** @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) {
@@ -1587,7 +1871,7 @@ var Zoom = /** @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 };
@@ -1601,11 +1885,19 @@ var Zoom = /** @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 isDragZoom;
         var map = this.maps;
@@ -1630,6 +1922,9 @@ var Zoom = /** @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;
@@ -1645,6 +1940,7 @@ var Zoom = /** @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     Zoom.prototype.click = function (e) {
         var map = this.maps;
@@ -1667,6 +1963,9 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.getMousePosition = function (pageX, pageY) {
         var map = this.maps;
         var elementRect = map.element.getBoundingClientRect();
@@ -1678,6 +1977,9 @@ var Zoom = /** @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;
@@ -1690,6 +1992,9 @@ var Zoom = /** @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;