@syncfusion/ej2-maps 20.4.48 → 20.4.54

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.48
+*  version : 20.4.54
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@20.4.44",
+  "_id": "@syncfusion/ej2-maps@20.4.49",
   "_inBundle": false,
-  "_integrity": "sha512-kIbapKUjj1tBztWAd7E/g7fomL2FOTSnoXV7duLRSUCVfZp7gwIQjIhc5eXch8+uElXzdAv4Fl7s56Yxym24mA==",
+  "_integrity": "sha512-mDTTSc12RWppsfjXlF9qEA7MK7jvYKRM5sGrgLLq9Cww4zk45QTUmcWxU3rKvDgzp9DtVRVYmGBKaCu3t88UzQ==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.4.44.tgz",
-  "_shasum": "b341ba1e5a519f4842ef787647fd632a6fb3035b",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.4.49.tgz",
+  "_shasum": "55ff71b4c167a3be8af6a298f611c794e2b026c8",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.48",
-    "@syncfusion/ej2-buttons": "~20.4.48",
+    "@syncfusion/ej2-base": "~20.4.51",
+    "@syncfusion/ej2-buttons": "~20.4.53",
     "@syncfusion/ej2-compression": "~20.4.48",
     "@syncfusion/ej2-data": "~20.4.48",
     "@syncfusion/ej2-file-utils": "~20.4.48",
     "@syncfusion/ej2-pdf-export": "~20.4.48",
-    "@syncfusion/ej2-svg-base": "~20.4.48"
+    "@syncfusion/ej2-svg-base": "~20.4.53"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -93,6 +93,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.48",
+  "version": "20.4.54",
   "sideEffects": false
 }

package/src/maps/layers/data-label.js

@@ -150,6 +150,9 @@ var DataLabel = /** @class */ (function () {
         if (isNullOrUndefined(text) && (layer.dataLabelSettings.template !== '' && layer.dataSource['length'] === 0)) {
             text = shapeData['properties'][layer.shapePropertyPath];
         }
+        if (isNullOrUndefined(text) && layer.dataSource['length'] > 0) {
+            text = '';
+        }
         var dataLabelText = text;
         var projectionType = this.maps.projectionType;
         if (isPoint) {
@@ -202,9 +205,9 @@ var DataLabel = /** @class */ (function () {
                 }
                 var position = [];
                 var width = zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied
-                    && _this.maps.zoomShapeCollection.length > index ? _this.maps.zoomShapeCollection[index]['width'] :
+                    && _this.maps.zoomShapeCollection.length > index ? (_this.maps.dataLabelShape[index]) * scale :
                     (location['rightMax']['x'] - location['leftMax']['x']) * scale;
-                if (!isNullOrUndefined(_this.maps.dataLabelShape)) {
+                if (!isNullOrUndefined(_this.maps.dataLabelShape) && !_this.maps.isReset) {
                     shapeWidth = firstLevelMapLocation['rightMax']['x'] - firstLevelMapLocation['leftMax']['x'];
                     _this.maps.dataLabelShape.push(shapeWidth);
                 }
@@ -230,8 +233,9 @@ var DataLabel = /** @class */ (function () {
                     locationX = location1['x'];
                     location['x'] = location1['x'];
                     width = zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied
-                        && _this.maps.zoomShapeCollection.length > index ? _this.maps.zoomShapeCollection[index]['width'] :
-                        (location1['rightMax']['x'] - location1['leftMax']['x']) * scale;
+                        && _this.maps.zoomShapeCollection.length > index ? (_this.maps.dataLabelShape[index]) * scale :
+                        ((location1['rightMax']['x'] - location1['leftMax']['x']) * scale) > 0 ?
+                            ((location1['rightMax']['x'] - location1['leftMax']['x']) * scale) : width;
                 }
                 var xpositionEnds = ((location['x'] + transPoint['x']) * scale) + textSize['width'] / 2;
                 var xpositionStart = ((location['x'] + transPoint['x']) * scale) - textSize['width'] / 2;

package/src/maps/layers/marker.js

@@ -218,7 +218,7 @@ var Marker = /** @class */ (function () {
                     }
                     var markerFactor = void 0;
                     if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                        zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, mapWidth, mapHeight, this.maps);
+                        zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, mapWidth, mapHeight, this.maps, false);
                         if (this.maps.isTileMap) {
                             markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
                                 zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?

package/src/maps/maps.d.ts

@@ -862,6 +862,12 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     mergeCluster(): void;
+    /**
+     * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
+     * @private
+     */
+    mapsOnRightClick(e: PointerEvent): void;
     /**
      * This method is used to perform operations when performing the double click operation on maps.
      *

package/src/maps/maps.js

@@ -30,7 +30,7 @@ import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
 import { Marker } from './layers/marker';
-import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
@@ -383,7 +383,6 @@ var Maps = /** @class */ (function (_super) {
         }
         if (!isNullOrUndefined(this.dataLabelModule)) {
             this.dataLabelModule.dataLabelCollections = [];
-            this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
         if (!isNullOrUndefined(this.svgObject)) {
@@ -433,33 +432,33 @@ var Maps = /** @class */ (function (_super) {
             var bottom = void 0;
             var top_1;
             var left = void 0;
-            left = parseFloat(tileElement.style.left) + element.offsetLeft;
+            left = parseFloat(tileElement.style.left);
             var titleTextSize = measureText(this.titleSettings.text, this.titleSettings.textStyle);
             var subTitleTextSize = measureText(this.titleSettings.subtitleSettings.text, this.titleSettings.subtitleSettings.textStyle);
             if (this.isTileMap && this.isTileMapSubLayer && this.legendSettings.position === 'Bottom' && this.legendSettings.visible) {
                 if (this.legendSettings.mode !== 'Default') {
                     if (titleTextSize.width !== 0 && titleTextSize.height !== 0) {
-                        top_1 = parseFloat(tileElement.style.top) + element.offsetTop + (subTitleTextSize.height / 2)
+                        top_1 = parseFloat(tileElement.style.top) + (subTitleTextSize.height / 2)
                             - (this.legendModule.legendBorderRect.height / 2);
                     }
                     else {
-                        top_1 = parseFloat(tileElement.style.top) + element.offsetTop - this.mapAreaRect.y;
+                        top_1 = parseFloat(tileElement.style.top) - this.mapAreaRect.y;
                     }
                 }
                 else {
                     left = this.legendModule.legendBorderRect.x;
                     if (titleTextSize.width !== 0 && titleTextSize.height !== 0) {
-                        top_1 = parseFloat(tileElement.style.top) + element.offsetTop + (subTitleTextSize['height'] / 2)
+                        top_1 = parseFloat(tileElement.style.top) + (subTitleTextSize['height'] / 2)
                             - this.legendModule.legendBorderRect.y;
                     }
                     else {
-                        top_1 = parseFloat(tileElement.style.top) + element.offsetTop + (subTitleTextSize['height'] / 2);
+                        top_1 = parseFloat(tileElement.style.top) + (subTitleTextSize['height'] / 2);
                     }
                 }
             }
             else {
                 bottom = svg.bottom - tile.bottom - element.offsetTop;
-                top_1 = parseFloat(tileElement.style.top) + element.offsetTop;
+                top_1 = parseFloat(tileElement.style.top);
             }
             top_1 = (bottom <= 11) ? top_1 : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top_1 * 2);
             left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
@@ -479,6 +478,7 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.element.style.outline = 'none';
+        this.element.style.position = 'relative';
         for (var i = 0; i < document.getElementsByTagName('path').length - 1; i++) {
             if (document.getElementsByTagName('path')[i].id.indexOf('shapeIndex') > -1) {
                 document.getElementsByTagName('path')[i].style.outline = 'none';
@@ -656,7 +656,7 @@ var Maps = /** @class */ (function (_super) {
             var secondaryElement = createElement('div', {
                 id: this.element.id + '_Secondary_Element'
             });
-            secondaryElement.style.cssText = 'position: absolute;z-index:2;';
+            secondaryElement.style.cssText = 'position: relative;z-index:2;';
             this.element.appendChild(secondaryElement);
         }
     };
@@ -880,7 +880,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.wireEVents = function () {
         //let cancelEvent: string = Browser.isPointer ? 'pointerleave' : 'mouseleave';
         EventHandler.add(this.element, 'click', this.mapsOnClick, this);
-        // EventHandler.add(this.element, 'contextmenu', this.mapsOnRightClick, this);
+        EventHandler.add(this.element, 'contextmenu', this.mapsOnRightClick, this);
         EventHandler.add(this.element, 'dblclick', this.mapsOnDoubleClick, this);
         EventHandler.add(this.element, Browser.touchStartEvent, this.mouseDownOnMap, this);
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap, this);
@@ -900,7 +900,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.unWireEVents = function () {
         //let cancelEvent: string = Browser.isPointer ? 'pointerleave' : 'mouseleave';
         EventHandler.remove(this.element, 'click', this.mapsOnClick);
-        // EventHandler.remove(this.element, 'contextmenu', this.mapsOnRightClick);
+        EventHandler.remove(this.element, 'contextmenu', this.mapsOnRightClick);
         EventHandler.remove(this.element, 'dblclick', this.mapsOnDoubleClick);
         EventHandler.remove(this.element, Browser.touchStartEvent, this.mouseDownOnMap);
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap);
@@ -1264,6 +1264,31 @@ var Maps = /** @class */ (function (_super) {
             this.markerModule.sameMarkerData = [];
         }
     };
+    /**
+     * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
+     * @private
+     */
+    Maps.prototype.mapsOnRightClick = function (e) {
+        var targetEle = e.target;
+        var targetId = targetEle.id;
+        var latitude = null;
+        var longitude = null;
+        this.mouseClickEvent = this.mouseDownEvent = { x: e.x, y: e.y };
+        if (targetEle.id.indexOf('_ToolBar') === -1) {
+            var latLongValue = this.getClickLocation(targetId, e.pageX, e.pageY, targetEle, e['layerX'], e['layerY']);
+            if (!isNullOrUndefined(latLongValue)) {
+                latitude = latLongValue.latitude;
+                longitude = latLongValue.longitude;
+            }
+            var eventArgs = {
+                cancel: false, name: rightClick, target: targetId, x: e.clientX, y: e.clientY,
+                latitude: latitude, longitude: longitude,
+                isShapeSelected: false
+            };
+            this.trigger('rightClick', eventArgs);
+        }
+    };
     /**
      * This method is used to perform operations when performing the double click operation on maps.
      *
@@ -1701,7 +1726,7 @@ var Maps = /** @class */ (function (_super) {
             this.maxLatOfGivenLocation = maxLatitude;
             this.maxLongOfGivenLocation = maxLongitude;
             this.zoomNotApplied = true;
-            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
+            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this, true);
             var zoomArgs = {
                 cancel: false, name: 'zoom', type: zoomIn, maps: this,
                 tileTranslatePoint: {}, translatePoint: {},

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

@@ -681,6 +681,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";
                 for (var k = 0; k < markerTemplateElement.childElementCount; k++) {
                     this.markerTranslate(markerTemplateElement.childNodes[k], factor, x, y, scale, 'Template');
                 }

package/src/maps/utils/helper.d.ts

@@ -1162,7 +1162,7 @@ export declare function compareZoomFactor(scaleFactor: number, maps: Maps): void
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {number} - Returns the scale factor
  */
-export declare function calculateZoomLevel(minLat: number, maxLat: number, minLong: number, maxLong: number, mapWidth: number, mapHeight: number, maps: Maps): number;
+export declare function calculateZoomLevel(minLat: number, maxLat: number, minLong: number, maxLong: number, mapWidth: number, mapHeight: number, maps: Maps, isZoomToCoordinates: boolean): number;
 /**
  * Method to get the result
  *

package/src/maps/utils/helper.js

@@ -2023,7 +2023,7 @@ export function getTranslate(mapObject, layer, animate) {
         center = mapObject.zoomSettings.shouldZoomInitially
             && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
             mapObject.centerPosition;
-        if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
+        if (((!isNullOrUndefined(centerLongitude) && centerLongitude !== 0) && (!isNullOrUndefined(centerLatitude) && centerLatitude !== 0)) || checkMethodeZoom) {
             var leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
             var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
             var point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
@@ -2207,7 +2207,7 @@ export function getZoomTranslate(mapObject, layer, animate) {
     var factor = animate ? 1 : mapObject.mapScaleValue;
     var mapWidth = Math.abs(max['x'] - min['x']);
     var mapHeight = Math.abs(min['y'] - max['y']);
-    if ((!isNullOrUndefined(longitude) && !isNullOrUndefined(latitude)) || checkZoomMethod) {
+    if (((!isNullOrUndefined(longitude) && longitude !== 0) && (!isNullOrUndefined(latitude) && latitude !== 0)) || checkZoomMethod) {
         var topPosition = ((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) / factor;
         var leftPosition = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;
         var point = checkZoomMethod ? calculateCenterFromPixel(mapObject, layer) :
@@ -3260,7 +3260,7 @@ export function compareZoomFactor(scaleFactor, maps) {
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {number} - Returns the scale factor
  */
-export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, maps) {
+export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, maps, isZoomToCoordinates) {
     var scaleFactor;
     var maxZoomFact = maps.zoomSettings.maxZoom;
     var applyMethodeZoom;
@@ -3273,9 +3273,7 @@ export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, m
     if (maps.zoomNotApplied && !maps.isTileMap) {
         var latiRatio = Math.abs((maps.baseMapBounds.latitude.max - maps.baseMapBounds.latitude.min) / (maxLat - minLat));
         var longiRatio = Math.abs((maps.baseMapBounds.longitude.max - maps.baseMapBounds.longitude.min) / (maxLong - minLong));
-        applyMethodeZoom = Math.min(latiRatio, longiRatio);
-        var minLocation = convertGeoToPoint(minLat, minLong, 1, maps.layersCollection[0], maps);
-        var maxLocation = convertGeoToPoint(maxLat, maxLong, 1, maps.layersCollection[0], maps);
+        applyMethodeZoom = isZoomToCoordinates ? (latiRatio + longiRatio) / 2 : Math.min(latiRatio, longiRatio);
     }
     var latRatio = (maxLatValue - minLatValue) / Math.PI;
     var lngDiff = maxLong - minLong;
@@ -3284,7 +3282,8 @@ export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, m
     var WORLD_PX_WIDTH = 256;
     var latZoom = (Math.log(mapHeight / WORLD_PX_HEIGHT / latRatio) / Math.LN2);
     var lngZoom = (Math.log(mapWidth / WORLD_PX_WIDTH / lngRatio) / Math.LN2);
-    var result = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom : Math.min(latZoom, lngZoom);
+    var result = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom :
+        isZoomToCoordinates && !maps.isTileMap ? (latZoom + lngZoom) / 2 : Math.min(latZoom, lngZoom);
     scaleFactor = Math.min(result, maxZoomFact);
     scaleFactor = maps.isTileMap || !maps.zoomNotApplied ? Math.floor(scaleFactor) : scaleFactor;
     if (!maps.isTileMap) {