@syncfusion/ej2-maps 20.1.59 → 20.2.43

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

@@ -1,6 +1,6 @@
 import { click, itemSelection } from '../index';
 import { getElement, createStyle, customizeStyle, removeClass, getTargetElement, getElementByID } from '../utils/helper';
-import { isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * Selection module class
  */
@@ -17,7 +17,6 @@ var Selection = /** @class */ (function () {
     Selection.prototype.addEventListener = function () {
         if (!this.maps.isDestroyed) {
             this.maps.on(click, this.mouseClick, this);
-            this.maps.on(Browser.touchEndEvent, this.mouseClick, this);
         }
     };
     /**
@@ -30,7 +29,6 @@ var Selection = /** @class */ (function () {
             return;
         }
         this.maps.off(click, this.mouseClick);
-        this.maps.off(Browser.touchEndEvent, this.mouseClick);
     };
     Selection.prototype.mouseClick = function (targetElement) {
         if (!isNullOrUndefined(targetElement['type']) && targetElement['type'].indexOf('touch') !== -1 &&
@@ -48,8 +46,12 @@ var Selection = /** @class */ (function () {
             var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
             if (targetElement.id.indexOf('shapeIndex') > -1) {
                 shapeIndex = parseInt(targetElement.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                shapeData = !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['features'])
+                    && this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] :
+                    !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['geometries'])
+                        && this.maps.layers[layerIndex].shapeData['geometries']['length'] > shapeIndex ?
+                        this.maps.layers[layerIndex].shapeData['geometries'][shapeIndex]['properties'] : null;
                 dataIndex = parseInt(targetElement.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.selectionsettings = this.maps.layers[layerIndex].selectionSettings;
@@ -133,15 +135,17 @@ var Selection = /** @class */ (function () {
         var parentElement;
         var children;
         var selectionClass;
+        var isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         var selectionsettings = this.selectionsettings;
         var border = {
-            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
-            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) : this.selectionsettings.border.color,
+            width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
+                (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
         };
         var eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
+            fill: isLineStringShape ? 'transparent' : (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none'),
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -153,7 +157,8 @@ var Selection = /** @class */ (function () {
         this.maps.trigger('itemSelection', eventArgs, function (observedArgs) {
             eventArgs.border.opacity = isNullOrUndefined(_this.selectionsettings.border.opacity) ? _this.selectionsettings.opacity : _this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
-                if (targetElement.getAttribute('class') === _this.selectionType + 'selectionMapStyle') {
+                if (targetElement.getAttribute('class') === _this.selectionType + 'selectionMapStyle'
+                    || targetElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(targetElement);
                     _this.removedSelectionList(targetElement);
                     for (var m = 0; m < _this.maps.shapeSelectionItem.length; m++) {
@@ -172,7 +177,8 @@ var Selection = /** @class */ (function () {
                 else {
                     var layetElement = getElementByID(_this.maps.element.id + '_Layer_Collections');
                     if (!_this.selectionsettings.enableMultiSelect &&
-                        layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length > 0) {
+                        (layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length > 0 ||
+                            layetElement.getElementsByClassName('LineselectionMapStyle').length > 0)) {
                         var eleCount = layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length;
                         var ele = void 0;
                         for (var k = 0; k < eleCount; k++) {
@@ -180,6 +186,14 @@ var Selection = /** @class */ (function () {
                             removeClass(ele);
                             _this.removedSelectionList(ele);
                         }
+                        if (layetElement.getElementsByClassName('LineselectionMapStyle').length > 0) {
+                            eleCount = layetElement.getElementsByClassName('LineselectionMapStyle').length;
+                            for (var k = 0; k < eleCount; k++) {
+                                ele = layetElement.getElementsByClassName('LineselectionMapStyle')[0];
+                                removeClass(ele);
+                                _this.removedSelectionList(ele);
+                            }
+                        }
                         if (_this.selectionType === 'Shape') {
                             _this.maps.shapeSelectionItem = [];
                             var selectionLength = _this.maps.selectedElementId.length;
@@ -197,13 +211,24 @@ var Selection = /** @class */ (function () {
                             ele.setAttribute('stroke', _this.maps.layers[layerIndex_2].navigationLineSettings[index].color);
                         }
                     }
-                    if (!getElement(_this.selectionType + 'selectionMap')) {
-                        document.body.appendChild(createStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs));
+                    if (!isLineStringShape) {
+                        if (!getElement(_this.selectionType + 'selectionMap')) {
+                            document.body.appendChild(createStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', _this.selectionType + 'selectionMapStyle');
                     }
                     else {
-                        customizeStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs);
+                        if (!getElement('LineselectionMap')) {
+                            document.body.appendChild(createStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', 'LineselectionMapStyle');
                     }
-                    targetElement.setAttribute('class', _this.selectionType + 'selectionMapStyle');
                     if (targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
                         _this.maps.shapeSelectionClass = getElement(_this.selectionType + 'selectionMap');
                         _this.maps.selectedElementId.push(targetElement.getAttribute('id'));

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

@@ -184,7 +184,7 @@ var MapsTooltip = /** @class */ (function () {
                 options: tooltipOption,
                 fill: option.fill,
                 maps: this.maps,
-                element: target, eventArgs: e
+                element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
             this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
@@ -202,7 +202,7 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -218,7 +218,7 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],

package/src/maps/user-interaction/zoom.d.ts

@@ -44,7 +44,6 @@ export declare class Zoom {
     private lastScale;
     private pinchFactor;
     private startTouches;
-    private shapeZoomLocation;
     private zoomshapewidth;
     private index;
     intersect: any[];
@@ -69,6 +68,7 @@ export declare class Zoom {
      * @returns {void}
      */
     performZooming(position: Point, newZoomFactor: number, type: string): void;
+    private calculateInitalZoomTranslatePoint;
     private triggerZoomEvent;
     private getTileTranslatePosition;
     performRectZooming(): void;

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

@@ -25,8 +25,6 @@ var Zoom = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.shapeZoomLocation = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.intersect = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.mouseDownLatLong = { x: 0, y: 0 };
@@ -66,7 +64,8 @@ var Zoom = /** @class */ (function () {
         var minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         var prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && (type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)) {
+        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+            || map.isReset)) {
             var availSize = map.mapAreaRect;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var minBounds = map.baseMapRectBounds['min'];
@@ -74,17 +73,29 @@ var Zoom = /** @class */ (function () {
             var maxBounds = map.baseMapRectBounds['max'];
             var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            var point = map.translatePoint;
-            var translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-            var translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                var point = map.translatePoint;
+                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = newZoomFactor;
             if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                 map.translatePoint = map.previousPoint;
-                map.scale = map.previousScale;
+                map.scale = map.mapScaleValue = map.previousScale;
             }
             else {
                 this.applyTransform();
@@ -140,6 +151,14 @@ var Zoom = /** @class */ (function () {
         }
         this.maps.zoomNotApplied = false;
     };
+    Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
+        mapTotalWidth *= newZoomFactor;
+        mapTotalHeight *= newZoomFactor;
+        var widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        return new Point(translatePointX, translatePointY);
+    };
     Zoom.prototype.triggerZoomEvent = function (prevTilePoint, prevLevel, type) {
         var map = this.maps;
         var zoomArgs;
@@ -267,12 +286,24 @@ var Zoom = /** @class */ (function () {
             var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
             var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             var translatePoint = map.translatePoint;
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
-            var translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
-            var translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
+                translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
+                translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = zoomCalculationFactor;
             isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
             if (isZoomCancelled) {
@@ -380,17 +411,16 @@ var Zoom = /** @class */ (function () {
                             if (this.maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[0]);
+                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
                                     layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
                                 }
                             }
-                            else {
+                            else if (currentEle.id.indexOf('Legend') == -1) {
                                 changeBorderWidth(currentEle, this.index, scale, this.maps);
                                 this.maps.zoomTranslatePoint = this.maps.translatePoint;
                                 this.animateTransform(currentEle, animate, x, y, scale);
-                                this.shapeZoomLocation = currentEle.childNodes;
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
@@ -490,16 +520,17 @@ var Zoom = /** @class */ (function () {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1) {
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(this.maps.layers[this.index])) {
                             this.intersect = [];
                             this.maps.zoomLabelPositions = [];
                             this.maps.zoomLabelPositions = this.maps.dataLabelModule.dataLabelCollections;
+                            var labelAnimate = !this.maps.isTileMap && animate;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this.zoomshapewidth = this.shapeZoomLocation[labelIndex].getBoundingClientRect();
+                                    this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
                                     this.maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', animate);
+                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
                                     var dataLabel = this.maps.layers[this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
@@ -716,7 +747,7 @@ var Zoom = /** @class */ (function () {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = (this.zoomshapewidth['width'] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.innerHTML = text;
                         }
                         else {
@@ -726,7 +757,7 @@ var Zoom = /** @class */ (function () {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             text = zoomtrimLabel;
                             element.innerHTML = text;
                         }
@@ -764,7 +795,7 @@ var Zoom = /** @class */ (function () {
                                     || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim(this.zoomshapewidth['width'], trimmedLable, style);
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
                                     }
                                     element.innerHTML = trimmedLable;
                                 }
@@ -790,11 +821,11 @@ var Zoom = /** @class */ (function () {
                         }
                         this.intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             element.innerHTML = trimmedLable;
                         }
                     }
-                    else {
+                    if (animate || duration > 0) {
                         smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                     }
                 }
@@ -916,7 +947,7 @@ var Zoom = /** @class */ (function () {
             var layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
             var elementRect = getElementByID(map.element.id + '_svg').getBoundingClientRect();
             var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
-                ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
+                ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             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
@@ -1009,14 +1040,26 @@ var Zoom = /** @class */ (function () {
             var max = map.baseMapRectBounds['max'];
             var mapWidth = Math.abs(max['x'] - min['x']);
             var mapHeight = Math.abs(min['y'] - max['y']);
-            var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
-            var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
-                : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
-                : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            if (zoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
+                zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
+            }
+            else {
+                translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
+                translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
+                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
+                    : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
+                    : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.zoomTranslatePoint = map.translatePoint;
             map.scale = zoomFactor;
             if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
@@ -1070,6 +1113,7 @@ var Zoom = /** @class */ (function () {
                         if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
+                        _this.maps.isAddLayer = false;
                     }, animationDuration);
                 }
             }
@@ -1340,7 +1384,12 @@ var Zoom = /** @class */ (function () {
                 x = (size.width / 2) - (toolBarSize.width / 2);
                 break;
             case 'Far':
-                x = (size.width - toolBarSize.width) - padding;
+                if (!isNullOrUndefined(map.legendModule) && map.legendSettings.position === 'Left') {
+                    x = size.width + size.x - toolBarSize.width - padding;
+                }
+                else {
+                    x = (size.width - toolBarSize.width) - padding;
+                }
                 break;
         }
         var extraPosition = map.getExtraPosition();
@@ -1396,6 +1445,7 @@ var Zoom = /** @class */ (function () {
                 }
                 else {
                     map.mapScaleValue = value - delta;
+                    map.isReset = (map.mapScaleValue < 1) ? true : false;
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.mapScaleValue === 1) {
                         map.markerCenterLatitude = null;

package/src/maps/utils/helper.js

@@ -807,6 +807,8 @@ export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, ma
     var padding = 5;
     var rectOptions;
     var pathOptions = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
+    size.width = typeof (size.width) === 'string' ? parseInt(size.width, 10) : size.width;
+    size.height = typeof (size.height) === 'string' ? parseInt(size.height, 10) : size.height;
     if (shape === 'Circle') {
         var radius = (size.width + size.height) / 4;
         var circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
@@ -1024,8 +1026,8 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location_1.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location_1.y + transPoint.y + (eventArg.height / 2)) * maps.mapScaleValue);
+                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
+                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
                         if (maps.isTileMap && !maps.zoomSettings.enable) {
                             tempX = location_1.x;
                             tempY = location_1.y;
@@ -1104,7 +1106,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
         }
@@ -2042,6 +2044,10 @@ export function getTranslate(mapObject, layer, animate) {
         }
         else {
             if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                 mapWidth *= scaleFactor;
                 mapHeight *= scaleFactor;
@@ -2091,7 +2097,7 @@ export function getTranslate(mapObject, layer, animate) {
                         mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
+                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1 || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
                             scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                             mapWidth *= scaleFactor;
                             x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
@@ -2249,6 +2255,8 @@ export function getZoomTranslate(mapObject, layer, animate) {
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
+    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
+    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
     return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
 }
 /**
@@ -2918,6 +2926,7 @@ export function changeBorderWidth(element, index, scale, maps) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             var borderWidth = maps.layersCollection[index].shapeSettings.border.width;
+            var circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2938,8 +2947,8 @@ export function changeBorderWidth(element, index, scale, maps) {
                 currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
             }
             childNode.setAttribute('stroke-width', (currentStroke / scale).toString());
-            if (element.id.indexOf('_LineString') > -1 && isNullOrUndefined(currentStroke)) {
-                childNode.setAttribute('stroke-width', (1 / scale).toString());
+            if (element.id.indexOf('_Point') > -1 || element.id.indexOf('_MultiPoint') > -1) {
+                childNode.setAttribute('r', (circleRadius / scale).toString());
             }
         }
     }
@@ -3133,7 +3142,11 @@ export function animate(element, delay, duration, process, end) {
         else {
             window.cancelAnimationFrame(clearAnimation);
             end.call(_this, { element: element });
-            element.setAttribute('style', markerStyle);
+            if (element.id.indexOf('Marker') > -1) {
+                console.log(element);
+                var markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);