@syncfusion/ej2-maps 25.1.35 → 25.1.40

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

@@ -22,7 +22,6 @@ var Zoom = /** @class */ (function () {
         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;
@@ -32,10 +31,8 @@ var Zoom = /** @class */ (function () {
         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.mouseDownLatLong = { x: 0, y: 0 };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
         this.mouseMoveLatLong = { x: 0, y: 0 };
         /** @private */
@@ -152,7 +149,6 @@ var Zoom = /** @class */ (function () {
                     }
                     this.markerLineAnimation(map);
                     map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-                    var element1 = document.getElementById(this.maps.element.id + '_tiles');
                     var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(function () {
                         // if (type === 'ZoomOut') {
@@ -231,6 +227,7 @@ var Zoom = /** @class */ (function () {
             position.y - ((y * totalSize) / 100);
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.performRectZooming = function () {
@@ -310,27 +307,29 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PointerEvent} e - Specifies the vent in the map
+     * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Zoom.prototype.performPinchZooming = function (e) {
         var map = this.maps;
         var prevLevel = map.tileZoomLevel;
-        var availSize = map.mapAreaRect;
-        map.isMarkerZoomCompleted = false;
-        map.previousScale = map.scale;
-        map.previousPoint = map.translatePoint;
-        map.previousProjection = map.projectionType;
-        var prevTilePoint = map.tileTranslatePoint;
-        var scale = calculateScale(this.touchStartList, this.touchMoveList);
-        var touchCenter = getTouchCenter(getTouches(this.touchMoveList, this.maps));
-        var newScale = scale / this.lastScale;
-        this.lastScale = scale;
-        this.pinchFactor *= newScale;
-        this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
         var zoomCalculationFactor = this.pinchFactor;
-        var zoomArgs;
         var isZoomCancelled;
+        var prevTilePoint = map.tileTranslatePoint;
         if (!map.isTileMap) {
+            var availSize = map.mapAreaRect;
+            map.isMarkerZoomCompleted = false;
+            map.previousScale = map.scale;
+            map.previousPoint = map.translatePoint;
+            map.previousProjection = map.projectionType;
+            var scale = calculateScale(this.touchStartList, this.touchMoveList);
+            var touchCenter = getTouchCenter(getTouches(this.touchMoveList, this.maps));
+            var newScale = scale / this.lastScale;
+            this.lastScale = scale;
+            this.pinchFactor *= newScale;
+            this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var minBounds = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -365,24 +364,38 @@ var Zoom = /** @class */ (function () {
             }
         }
         else {
-            var newTileFactor = zoomCalculationFactor;
-            this.getTileTranslatePosition(prevLevel, newTileFactor, { x: touchCenter.x, y: touchCenter.y });
-            map.tileZoomLevel = newTileFactor;
-            map.translatePoint.x = (map.tileTranslatePoint.x - (0.5 * Math.pow(2, newTileFactor))) /
-                (Math.pow(2, newTileFactor));
-            map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
-                (Math.pow(2, newTileFactor));
-            map.scale = (Math.pow(2, newTileFactor));
-            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-            if (isZoomCancelled) {
-                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
-                map.scale = map.previousScale;
-                map.tileZoomLevel = prevLevel;
-                map.zoomSettings.zoomFactor = map.previousScale;
-            }
-            else {
-                map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
+            var touchCenter = this.getTouchCenterPoint();
+            var distance = Math.sqrt(Math.pow((this.touchMoveList[0].pageX - this.touchMoveList[1].pageX), 2) + Math.pow((this.touchMoveList[0].pageY - this.touchMoveList[1].pageY), 2));
+            var factor = map.tileZoomLevel;
+            if (!isNullOrUndefined(this.pinchDistance)) {
+                if (this.pinchDistance > distance) {
+                    factor = factor - 1;
+                }
+                else if (this.pinchDistance < distance) {
+                    factor = factor + 1;
+                }
+                factor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.maps.zoomSettings.minZoom, factor));
+                if (factor !== map.tileZoomLevel) {
+                    this.pinchFactor = factor;
+                    map.previousScale = map.scale;
+                    map.tileZoomLevel = this.pinchFactor;
+                    map.scale = Math.pow(2, map.tileZoomLevel - 1);
+                    this.getTileTranslatePosition(prevLevel, this.pinchFactor, { x: touchCenter.x, y: touchCenter.y }, null);
+                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.scale)) / map.scale;
+                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.scale)) / map.scale;
+                    isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                    if (isZoomCancelled) {
+                        map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                        map.scale = map.previousScale;
+                        map.tileZoomLevel = prevLevel;
+                        map.zoomSettings.zoomFactor = map.previousScale;
+                    }
+                    else {
+                        map.mapLayerPanel.generateTiles(factor, map.tileTranslatePoint);
+                    }
+                }
             }
+            this.pinchDistance = distance;
         }
         map.mapScaleValue = zoomCalculationFactor;
         if (!isZoomCancelled) {
@@ -393,6 +406,16 @@ var Zoom = /** @class */ (function () {
             this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
         }
     };
+    Zoom.prototype.getTouchCenterPoint = function () {
+        var touchList = [];
+        for (var i = 0; i < this.touchMoveList.length; i++) {
+            touchList.push(this.getMousePosition(this.touchMoveList[i].pageX, this.touchMoveList[i].pageY));
+        }
+        return {
+            x: (touchList[0].x + touchList[1].x) / 2,
+            y: (touchList[0].y + touchList[1].y) / 2
+        };
+    };
     Zoom.prototype.triggerZoomComplete = function (map, prevLevel, type) {
         if (map.zoomSettings.enable) {
             var zoomArgs = void 0;
@@ -424,6 +447,7 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.drawZoomRectangle = function () {
@@ -436,7 +460,6 @@ var Zoom = /** @class */ (function () {
         var height = Math.abs(move.y - down.y);
         var x = ((move.x > down.x) ? down.x : down.x - width);
         var y = ((move.y > down.y) ? down.y : down.y - height);
-        var elementRect = getElementByID(map.element.id).getBoundingClientRect();
         if ((x > map.mapAreaRect.x && x < (map.mapAreaRect.x + map.mapAreaRect.width)) &&
             (y > map.mapAreaRect.y) && (y < map.mapAreaRect.y + map.mapAreaRect.height)) {
             this.zoomingRect = new Rect(x, y, width, height);
@@ -474,30 +497,28 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {Maps} maps - Specifies the Map control
+     * @param {boolean} animate - Specifies the animation is available or not
+     * @param {boolean} isPanning - Specifies that it is panning or not
+     * @returns {void}
      * @private
      */
     Zoom.prototype.applyTransform = function (maps, animate, isPanning) {
         var _this = this;
         var layerIndex;
         this.templateCount = 0;
-        var layer;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var zoomshapelocation;
-        var i;
         var markerStyle;
         var scale = maps.scale;
         var x = maps.translatePoint.x;
         var y = maps.translatePoint.y;
         var currentLabelIndex = 0;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var collection = [];
         maps.zoomShapeCollection = [];
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
         if (this.layerCollectionEle) {
-            var _loop_1 = function (i_1) {
-                var layerElement = this_1.layerCollectionEle.childNodes[i_1];
+            var _loop_1 = function (i) {
+                var layerElement = this_1.layerCollectionEle.childNodes[i];
                 if (layerElement.tagName === 'g') {
                     this_1.templateCount++;
                     this_1.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
@@ -536,14 +557,13 @@ var Zoom = /** @class */ (function () {
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
                             if ((!this_1.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
-                                this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement, animate);
+                                this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
                             var markerAnimation_1;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                     _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
-                                    var layerIndex = parseInt(childNode['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     var dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                                     markerAnimation_1 = _this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
@@ -636,7 +656,9 @@ var Zoom = /** @class */ (function () {
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
                             var labelAnimate_1 = !maps.isTileMap && animate;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var intersect_1 = [];
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
@@ -672,8 +694,8 @@ var Zoom = /** @class */ (function () {
                 maps.arrangeTemplate();
             };
             var this_1 = this;
-            for (var i_1 = 0; i_1 < this.layerCollectionEle.childElementCount; i_1++) {
-                _loop_1(i_1);
+            for (var i = 0; i < this.layerCollectionEle.childElementCount; i++) {
+                _loop_1(i);
             }
             if (!isNullOrUndefined(this.currentLayer)) {
                 if (!animate || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
@@ -682,9 +704,8 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
-    Zoom.prototype.markerTranslates = function (element, factor, x, y, scale, type, layerElement, animate) {
+    Zoom.prototype.markerTranslates = function (element, factor, x, y, scale, type, layerElement) {
         var _this = this;
-        if (animate === void 0) { animate = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var templateFn;
         var nullCount = 0;
@@ -728,6 +749,7 @@ var Zoom = /** @class */ (function () {
                 };
                 eventArgs = markerShapeChoose(eventArgs, data);
                 eventArgs = markerColorChoose(eventArgs, data);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
                     if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
                         eventArgs = markerShapeChoose(eventArgs, data);
@@ -840,6 +862,7 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate, currentLabelIndex, isPanning, intersect) {
         if (animate === void 0) { animate = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1087,11 +1110,11 @@ var Zoom = /** @class */ (function () {
      * @param {PanDirection} direction - Specifies the direction of the panning.
      * @param {number} xDifference - Specifies the distance moved in the horizontal direction.
      * @param {number} yDifference - Specifies the distance moved in the vertical direction.
-     * @param {PointerEvent | TouchEvent | KeyboardEvent} mouseLocation - Specifies the pointer event argument.
+     * @param {PointerEvent | TouchEvent | KeyboardEvent} event - Specifies the pointer event argument.
      * @returns {void}
      * @private
      */
-    Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
+    Zoom.prototype.panning = function (direction, xDifference, yDifference, event) {
         var map = this.maps;
         var panArgs;
         var down = this.mouseDownPoints;
@@ -1107,6 +1130,8 @@ var Zoom = /** @class */ (function () {
         var y;
         xDifference = !isNullOrUndefined(xDifference) ? xDifference : (down.x - move.x);
         yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
+        var layerX = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerX'] : event.touches[0].pageX;
+        var layerY = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerY'] : event.touches[0].pageY;
         this.maps.mergeCluster();
         if (!map.isTileMap) {
             var legendElement = document.getElementById(map.element.id + '_Legend_Group');
@@ -1120,7 +1145,7 @@ var Zoom = /** @class */ (function () {
             var panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
+            var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, layerX, layerY);
             var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
             panArgs = {
                 cancel: false, name: pan, maps: map,
@@ -1149,18 +1174,16 @@ var Zoom = /** @class */ (function () {
         else if (this.maps.tileZoomLevel > 1) {
             x = map.tileTranslatePoint.x - xDifference;
             y = map.tileTranslatePoint.y - yDifference;
-            this.distanceX = x - map.tileTranslatePoint.x;
-            this.distanceY = y - map.tileTranslatePoint.y;
             map.tileTranslatePoint.x = x;
             map.tileTranslatePoint.y = y;
             if ((map.tileTranslatePoint.y > -10 && yDifference < 0) || ((map.tileTranslatePoint.y < -((Math.pow(2, this.maps.tileZoomLevel) - 2) * 256) && yDifference > 0))) {
                 map.tileTranslatePoint.x = x + xDifference;
                 map.tileTranslatePoint.y = y + yDifference;
             }
-            map.translatePoint.x = (map.tileTranslatePoint.x - xDifference) / map.scale;
-            map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
+            map.translatePoint.x = (map.tileTranslatePoint.x) / map.scale;
+            map.translatePoint.y = (map.tileTranslatePoint.y) / map.scale;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var location_4 = this.maps.getTileGeoLocation(mouseLocation['layerX'], mouseLocation['layerY']);
+            var location_4 = this.maps.getTileGeoLocation(layerX, layerY);
             var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
             panArgs = {
                 cancel: false, name: pan, maps: map,
@@ -1173,19 +1196,17 @@ var Zoom = /** @class */ (function () {
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
             this.applyTransform(map, false, true);
+            map.translatePoint.x = (map.tileTranslatePoint.x - xDifference) / map.scale;
+            map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
         this.isSingleClick = false;
     };
-    Zoom.prototype.toAlignSublayer = function () {
-        this.maps.translatePoint.x = !isNullOrUndefined(this.distanceX) ? (this.maps.translatePoint.x -
-            (this.distanceX / this.maps.scale)) : this.maps.translatePoint.x;
-        this.maps.translatePoint.y = !isNullOrUndefined(this.distanceY) ? this.maps.translatePoint.y -
-            (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
-        this.applyTransform(this.maps, false);
-    };
     /**
+     * @param {number} zoomFactor - Specifies the factor for zooming
+     * @param {string} type - Specifies the type
+     * @returns {void}
      * @private
      */
     Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
@@ -1208,7 +1229,6 @@ var Zoom = /** @class */ (function () {
         zoomFactor = (type === 'ZoomOut') ? (Math.round(zoomFactor) === 1 ? 1 : zoomFactor) : 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 && Math.round(zoomFactor) <= maxZoom : zoomFactor >= minZoom
             || map.isReset)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1280,7 +1300,6 @@ var Zoom = /** @class */ (function () {
                     }
                     this.markerLineAnimation(map);
                     map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-                    var element1 = document.getElementById(this.maps.element.id + '_tiles');
                     var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(function () {
                         if (type === 'ZoomOut' || type === 'Reset') {
@@ -1300,12 +1319,11 @@ var Zoom = /** @class */ (function () {
         this.triggerZoomComplete(map, prevLevel, type);
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
-        var zoomInElements;
-        var zoomOutElements;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
@@ -1359,45 +1377,39 @@ var Zoom = /** @class */ (function () {
             });
             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 opacity = 1;
             var direction = '';
-            var polygonDirection = '';
             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;
+                    var fillColor = void 0;
                     var strokeColor = void 0;
                     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;
+                        fillColor = fill;
                         strokeColor = pathStroke;
                     }
                     else if (this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
-                        fillColor_1 = fill;
+                        fillColor = fill;
                         strokeColor = pathStroke;
                     }
                     else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
-                        fillColor_1 = fill;
+                        fillColor = 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;
+                        fillColor = this.maps.themeStyle.zoomFillColor;
                         strokeColor = pathStroke;
                     }
                     else {
-                        fillColor_1 = this.selectionColor;
+                        fillColor = this.selectionColor;
                         strokeColor = this.selectionColor;
                     }
-                    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'));
+                    var zoomPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fillColor, 1, strokeColor, opacity, opacity, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z'));
                     zoomPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                     this.currentToolbarEle.appendChild(zoomPath);
                     this.zoomElements = this.currentToolbarEle;
@@ -1406,18 +1418,20 @@ var Zoom = /** @class */ (function () {
                 }
                 case 'zoomin':
                     direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
+                    /* eslint-disable no-case-declarations */
                     var zoomInPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Path', fill, 3, pathStroke, 1, 1, null, direction));
+                    /* eslint-enable no-case-declarations */
                     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';
+                    /* eslint-disable no-case-declarations */
                     var zoomOutPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fill, 3, pathStroke, 1, 1, null, direction));
+                    /* eslint-enable no-case-declarations */
                     zoomOutPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                     this.currentToolbarEle.appendChild(zoomOutPath);
-                    zoomOutElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'pan': {
@@ -1447,7 +1461,9 @@ 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,';
+                    /* eslint-disable no-case-declarations */
                     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'));
+                    /* eslint-enable no-case-declarations */
                     resetPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                     this.currentToolbarEle.appendChild(resetPath);
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
@@ -1457,6 +1473,8 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     Zoom.prototype.performToolBarAction = function (e) {
@@ -1470,13 +1488,15 @@ var Zoom = /** @class */ (function () {
                 isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
                 break;
             case 'zoomout':
+                /* eslint-disable no-case-declarations */
                 var scaleValue = this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale;
+                /* eslint-enable no-case-declarations */
                 isToolbarPerform = (this.maps.projectionType === 'Miller' || this.maps.projectionType === 'Winkel3' ||
                     this.maps.projectionType === 'AitOff') ? Math.round(scaleValue) - 1 >= this.maps.zoomSettings.minZoom :
                     (scaleValue) - 1 >= this.maps.zoomSettings.minZoom;
                 break;
             case 'reset':
-                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
+                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) !== this.maps.zoomSettings.minZoom;
                 break;
         }
         if (isTouch && isToolbarPerform) {
@@ -1610,6 +1630,8 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     Zoom.prototype.showTooltip = function (e) {
@@ -1638,6 +1660,7 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.removeTooltip = function () {
@@ -1646,6 +1669,7 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.alignToolBar = function () {
@@ -1705,6 +1729,9 @@ var Zoom = /** @class */ (function () {
         element.appendChild(style);
     };
     /**
+     * @param {number} factor - Specifies the factor for toolbar
+     * @param {string} id - Specifies the id
+     * @returns {void}
      * @private
      */
     Zoom.prototype.removeToolbarOpacity = function (factor, id) {
@@ -1806,6 +1833,12 @@ var Zoom = /** @class */ (function () {
         this.setOpacity('_Zooming_ToolBar_Reset_Rect', '_Zooming_ToolBar_Reset', resetStrokeOpacity, resetOpacity);
     };
     /**
+     * @param {string} zoomClassStyle - Specifies the style for zoom class.
+     * @param {string} zoomInClassStyle - Specifies the style for zoom in.
+     * @param {string} zoomOutClassStyle - Specifies the style for zoom out.
+     * @param {string} panClassStyle -  Specifies the style for pan.
+     * @param {string} resetClassStyle - Specifies the style for reset.
+     * @returns {void}
      * @private
      */
     Zoom.prototype.removeToolbarClass = function (zoomClassStyle, zoomInClassStyle, zoomOutClassStyle, panClassStyle, resetClassStyle) {
@@ -1843,30 +1876,30 @@ var Zoom = /** @class */ (function () {
      * To bind events.
      *
      * @param {Element} element - Specifies the element.
-     * @param {any} process - Specifies the process.
+     * @param {Function} process - Specifies the process.
      * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Zoom.prototype.wireEvents = function (element, process) {
         EventHandler.add(element, Browser.touchStartEvent, process, this);
         EventHandler.add(element, 'mouseover', this.showTooltip, this);
         EventHandler.add(element, 'mouseout', this.removeTooltip, this);
     };
     /**
+     * @param {WheelEvent} e - Specifies the wheel event in the map for zooming
+     * @returns {void}
      * @private
      */
     Zoom.prototype.mapMouseWheel = function (e) {
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.mouseWheelZoom) {
             var map = this.maps;
-            var size = map.availableSize;
             map.markerZoomedState = false;
             map.zoomPersistence = map.enablePersistence;
             var position = this.getMousePosition(e.pageX, e.pageY);
             var prevLevel = map.tileZoomLevel;
             var prevScale = map.scale;
             var delta = 1;
-            var staticMaxZoomLevel = 22; // google map maximum zoom level value
+            var staticMaxZoomLevel = map.zoomSettings.maxZoom;
             var value = (map.isTileMap) ? prevLevel : prevScale;
             if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                 (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
@@ -1879,8 +1912,8 @@ var Zoom = /** @class */ (function () {
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
                         map.staticMapZoom += 1;
+                        this.performZooming(position, (value + delta), direction);
                     }
-                    this.performZooming(position, (value + delta), direction);
                 }
                 else {
                     map.mapScaleValue = value - delta;
@@ -1901,18 +1934,18 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     Zoom.prototype.doubleClick = function (e) {
         var pageX = e.pageX;
         var pageY = e.pageY;
-        var target = e.target;
         var tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.doubleClickZoom
             && !(e.target['id'].indexOf('_Zooming_') > -1) && isNullOrUndefined(tooltipElement)) {
             var position = this.getMousePosition(pageX, pageY);
             var map = this.maps;
-            var size = map.availableSize;
             var prevLevel = map.tileZoomLevel;
             var prevScale = map.scale;
             map.mapScaleValue = map.mapScaleValue + 1;
@@ -1924,6 +1957,8 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     Zoom.prototype.mouseDownHandler = function (e) {
@@ -1931,6 +1966,7 @@ var Zoom = /** @class */ (function () {
         var pageY;
         var target;
         var touches = null;
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         var element = e.target;
         if (e.type === 'touchstart') {
             this.isTouch = true;
@@ -1942,6 +1978,7 @@ var Zoom = /** @class */ (function () {
         else {
             pageX = e.pageX;
             pageY = e.pageY;
+            //eslint-disable-next-line @typescript-eslint/no-unused-vars
             target = e.target;
         }
         if (!this.maps.zoomSettings.enablePanning) {
@@ -1955,7 +1992,7 @@ var Zoom = /** @class */ (function () {
         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) {
+        if (this.isTouch && touches !== null) {
             this.firstMove = true;
             this.pinchFactor = this.maps.scale;
             this.fingers = touches.length;
@@ -1963,12 +2000,15 @@ var Zoom = /** @class */ (function () {
         this.isSingleClick = true;
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     Zoom.prototype.mouseMoveHandler = function (e) {
         var pageX;
         var pageY;
         var map = this.maps;
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         var touchArg;
         var target;
         var touches = null;
@@ -1994,7 +2034,7 @@ var Zoom = /** @class */ (function () {
             }
         }
         if (this.isTouch) {
-            if (this.maps.zoomSettings.pinchZooming) {
+            if (this.maps.zoomSettings.pinchZooming && touches !== null) {
                 if (this.firstMove && touches.length === 2) {
                     this.rectZoomingStart = false;
                     this.updateInteraction();
@@ -2010,9 +2050,7 @@ var Zoom = /** @class */ (function () {
             }
         }
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
-        var targetId = e.target['id'];
-        var targetEle = e.target;
-        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (zoom.enable && this.isPanModeEnabled && 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 };
@@ -2024,7 +2062,7 @@ var Zoom = /** @class */ (function () {
                 this.mouseDownLatLong['y'] = pageY;
             }
         }
-        if (this.isTouch ? (touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
+        if (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
             e.preventDefault();
             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) {
@@ -2037,11 +2075,11 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     Zoom.prototype.mouseUpHandler = function (e) {
-        var isDragZoom;
-        var map = this.maps;
         this.rectZoomingStart = false;
         this.isSingleClick = this.isSingleClick ? true : false;
         this.isTouch = false;
@@ -2049,7 +2087,6 @@ var Zoom = /** @class */ (function () {
         this.touchMoveList = [];
         this.lastScale = 1;
         this.maps.element.style.cursor = 'auto';
-        // eslint-disable-next-line max-len
         if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
             (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)) {
             var pageX = void 0;
@@ -2057,7 +2094,6 @@ var Zoom = /** @class */ (function () {
             var layerX = 0;
             var layerY = 0;
             var target = void 0;
-            var rect = this.maps.element.getBoundingClientRect();
             var element = e.target;
             if (e.type.indexOf('touch') !== -1) {
                 var touchArg = e;
@@ -2072,6 +2108,7 @@ var Zoom = /** @class */ (function () {
                 pageY = e.pageY;
                 layerX = e['layerX'];
                 layerY = e['layerY'] - (this.maps.isTileMap ? 10 : 0);
+                //eslint-disable-next-line @typescript-eslint/no-unused-vars
                 target = e.target;
             }
             var panCompleteEventArgs = void 0;
@@ -2103,22 +2140,21 @@ var Zoom = /** @class */ (function () {
             this.maps.trigger('panComplete', panCompleteEventArgs);
         }
         this.isPanModeEnabled = false;
-        if ((!isNullOrUndefined(this.distanceX) || !isNullOrUndefined(this.distanceY)) && (!isNullOrUndefined(this.currentLayer) && this.currentLayer.type === 'SubLayer')) {
-            this.toAlignSublayer();
-            this.distanceX = this.distanceY = null;
-        }
         var zoomRectElement = getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
         if (zoomRectElement && this.maps.zoomSettings.enable && this.maps.zoomSettings.enableSelectionZooming) {
-            isDragZoom = true;
             remove(zoomRectElement);
             this.performRectZooming();
         }
         this.mouseMoveLatLong = { x: 0, y: 0 };
         this.mouseDownLatLong = { x: 0, y: 0 };
+        this.pinchDistance = null;
     };
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
     Zoom.prototype.mouseCancelHandler = function (e) {
         this.isPanModeEnabled = false;
         this.isTouch = false;
@@ -2159,6 +2195,11 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * Gets the Mouse Position
+     *
+     * @param {number} pageX - Specifies the Page x in map
+     * @param {number} pageY - Specifies the Page y in map
+     * @returns {Point} - returns the mouse point position
      * @private
      */
     Zoom.prototype.getMousePosition = function (pageX, pageY) {
@@ -2173,6 +2214,7 @@ var Zoom = /** @class */ (function () {
         return new Point(Math.abs(pageX - positionX), Math.abs(pageY - positionY));
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.addEventListener = function () {
@@ -2188,6 +2230,7 @@ var Zoom = /** @class */ (function () {
         EventHandler.add(this.maps.element, this.cancelEvent, this.mouseCancelHandler, this);
     };
     /**
+     * @returns {void}
      * @private
      */
     Zoom.prototype.removeEventListener = function () {
@@ -2234,6 +2277,7 @@ var Zoom = /** @class */ (function () {
         this.removeEventListener();
         this.layerCollectionEle = null;
         this.currentLayer = null;
+        this.pinchDistance = null;
         this.maps = null;
     };
     return Zoom;