@syncfusion/ej2-maps 19.4.56 → 20.1.55

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.56
+*  version : 20.1.55
 *  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@19.4.55",
+  "_id": "@syncfusion/ej2-maps@20.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-q9a3UHN4IPE+Dj7luY6xOJVNcEKEpTSLOkaXdJdNxCf883wYbcX5oTu88Ab2Pbj8tIPwPJuvt5bt8b7bfBPJ/A==",
+  "_integrity": "sha512-Q9Bjk9kbgqAvOxaOLh3wnmOx6gYLBhcPPuOipozUN3uRcN7dS9SDcTfNM00eROJk8OlXSrnFZNG7T+HqInhgeQ==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-19.4.55.tgz",
-  "_shasum": "68aeba0a91caa2c3c4aa2d6d01c2bc2e163e692c",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.1.48.tgz",
+  "_shasum": "75977d2b5ff33ae4dafe2fc6441182eee72f6586",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-compression": "~19.4.52",
-    "@syncfusion/ej2-data": "~19.4.54",
-    "@syncfusion/ej2-file-utils": "~19.4.52",
-    "@syncfusion/ej2-pdf-export": "~19.4.52",
-    "@syncfusion/ej2-svg-base": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.55",
+    "@syncfusion/ej2-buttons": "~20.1.55",
+    "@syncfusion/ej2-compression": "~20.1.55",
+    "@syncfusion/ej2-data": "~20.1.55",
+    "@syncfusion/ej2-file-utils": "~20.1.55",
+    "@syncfusion/ej2-pdf-export": "~20.1.55",
+    "@syncfusion/ej2-svg-base": "~20.1.55"
   },
   "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",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.56",
+  "version": "20.1.55",
   "sideEffects": false
 }

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

@@ -256,7 +256,7 @@ var DataLabel = /** @class */ (function () {
                 _this.value[index] = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
                 var labelElement;
                 if (eventargs_1.template !== '') {
-                    templateFn = getTemplateFunction(eventargs_1.template);
+                    templateFn = getTemplateFunction(eventargs_1.template, _this.maps);
                     var templateElement = templateFn ? templateFn(!isNullOrUndefined(datasrcObj) ?
                         datasrcObj : shapeData['properties'], _this.maps, eventargs_1.template, _this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs_1.template : '';

package/src/maps/layers/legend.js

@@ -1303,7 +1303,7 @@ var Legend = /** @class */ (function () {
                     data[_this.maps.legendSettings.showLegendPath];
                 if (marker.visible && showLegend && (!isNullOrUndefined(data['latitude'])) && (!isNullOrUndefined(data['longitude']))) {
                     if (marker.template) {
-                        templateFn = getTemplateFunction(marker.template);
+                        templateFn = getTemplateFunction(marker.template, _this.maps);
                         var templateElement = templateFn(_this.maps);
                         var markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                             templateElement;

package/src/maps/layers/marker.js

@@ -53,10 +53,10 @@ var Marker = /** @class */ (function () {
                     eventArgs = markerShapeChoose(eventArgs, data);
                     var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
                     var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : 0;
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
                     var offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
                         var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -101,7 +101,7 @@ var Marker = /** @class */ (function () {
                             _this.maps.renderReactTemplates();
                         }
                     }
-                    if (markerTemplateEle.childElementCount === (markerData.length - markerCount - nullCount) && getElementByID(_this.maps.element.id + '_Secondary_Element')) {
+                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(_this.maps.element.id + '_Secondary_Element')) {
                         getElementByID(_this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
                         if (_this.maps.checkInitialRender) {
                             if (currentLayer.markerClusterSettings.allowClustering) {
@@ -354,7 +354,7 @@ var Marker = /** @class */ (function () {
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
                     var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
-                    var indexes = clusterElement.innerHTML.split(',').map(Number);
+                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];

package/src/maps/maps.js

@@ -75,6 +75,10 @@ var Maps = /** @class */ (function (_super) {
          * Resize the map
          */
         _this.isResize = false;
+        /**
+         * @private
+         */
+        _this.isReset = false;
         /** @private */
         _this.baseSize = new Size(0, 0);
         /** @public */
@@ -1759,7 +1763,10 @@ var Maps = /** @class */ (function (_super) {
                                 var collection = Object.keys(newProp.layers[x]);
                                 for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
                                     var collectionProp = collection_1[_b];
-                                    if (collectionProp === 'markerSettings') {
+                                    if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
+                                        this.isReset = true;
+                                    }
+                                    else if (collectionProp === 'markerSettings') {
                                         isMarker = true;
                                     }
                                     else if (collectionProp === 'staticMapType') {

package/src/maps/model/export-image.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { triggerDownload, getElementByID, getClientElement } from '../utils/helper';
+import { triggerDownload, getElementByID } from '../utils/helper';
 /**
  * This module enables the export to Image functionality in Maps control.
  *
@@ -38,7 +38,6 @@ var ImageExport = /** @class */ (function () {
             var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             var toolbarEle = document.getElementById(_this.control.element.id + '_ToolBar');
             var svgParent = document.getElementById(_this.control.element.id + '_Tile_SVG_Parent');
-            var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
             var svgDataElement;
             var tileSvg;
             var svgObject = getElementByID(_this.control.element.id + '_svg').cloneNode(true);
@@ -83,7 +82,9 @@ var ImageExport = /** @class */ (function () {
                     image_1.src = url;
                 }
                 else {
-                    var extraSpace_1 = getClientElement(_this.control.element.id);
+                    var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
+                    var top_1 = parseFloat(svgParentElement.getAttribute('y'));
+                    var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                     var imgxHttp = new XMLHttpRequest();
                     var imgTileLength_1 = _this.control.mapLayerPanel.tiles.length;
                     var _loop_1 = function (i) {
@@ -102,16 +103,17 @@ var ImageExport = /** @class */ (function () {
                             if (i === 0 || i === imgTileLength_1 + 1) {
                                 if (i === 0) {
                                     ctxt_1.setTransform(1, 0, 0, 1, 0, 0);
-                                    ctxt_1.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                    ctxt_1.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                     ctxt_1.clip();
                                 }
                                 else {
-                                    ctxt_1.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace_1["top"]));
+                                    ctxt_1.setTransform(1, 0, 0, 1, left_1, top_1);
                                 }
                             }
                             else {
-                                ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + _this.control.margin.left, parseFloat(tile.style.top) +
-                                    (parseFloat(tileParent.style.top)) - extraSpace_1["top"]);
+                                var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
+                                ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) +
+                                    top_1);
                             }
                             ctxt_1.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength_1 + 1) {

package/src/maps/model/export-pdf.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
-import { getClientElement } from '../utils/helper';
 /**
  * This module enables the export to PDF functionality in Maps control.
  *
@@ -41,11 +40,10 @@ var PdfExport = /** @class */ (function () {
             var svgParent = document.getElementById(_this.control.element.id + '_Tile_SVG_Parent');
             var svgData;
             var exportElement = _this.control.svgObject.cloneNode(true);
-            var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark')
-                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark'
+                || _this.control.theme === 'Fluent' || _this.control.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -74,7 +72,9 @@ var PdfExport = /** @class */ (function () {
                 image.src = url;
             }
             else {
-                var extraSpace_1 = getClientElement(_this.control.element.id);
+                var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
+                var top_1 = parseFloat(svgParentElement.getAttribute('y'));
+                var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                 var xHttp = new XMLHttpRequest();
                 var tileLength_1 = _this.control.mapLayerPanel.tiles.length;
                 var _loop_1 = function (i) {
@@ -93,16 +93,16 @@ var PdfExport = /** @class */ (function () {
                         if (i === 0 || i === tileLength_1 + 1) {
                             if (i === 0) {
                                 ctx.setTransform(1, 0, 0, 1, 0, 0);
-                                ctx.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                ctx.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace_1["top"]));
+                                ctx.setTransform(1, 0, 0, 1, left_1, top_1);
                             }
                         }
                         else {
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + _this.control.margin.left, (parseFloat(tile.style.top) +
-                                (parseFloat(tileParent.style.top)) - extraSpace_1["top"]));
+                            var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) + top_1);
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength_1 + 1) {

package/src/maps/model/print.js

@@ -47,7 +47,27 @@ var Print = /** @class */ (function () {
     Print.prototype.getHTMLContent = function (elements) {
         var elementRect = getClientElement(this.control.element.id);
         var div = createElement('div');
-        div.setAttribute("style", "margin-top:" + elementRect["top"] + "px");
+        var divElement = this.control.element.cloneNode(true);
+        if (this.control.isTileMap) {
+            for (var i = 0; i < divElement.childElementCount; i++) {
+                if (divElement.children[i].id === this.control.element.id + '_tile_parent') {
+                    divElement.children[i].style.removeProperty('height');
+                    divElement.children[i].style.removeProperty('width');
+                    divElement.children[i].style.removeProperty('top');
+                    divElement.children[i].style.removeProperty('left');
+                    divElement.children[i].style.removeProperty('right');
+                    divElement.children[i].style.removeProperty('overflow');
+                    var svgElement = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+                    divElement.children[i].children[0].style.overflow = 'hidden';
+                    divElement.children[i].children[0].style.position = 'absolute';
+                    divElement.children[i].children[0].style.height = svgElement.style.height;
+                    divElement.children[i].children[0].style.width = svgElement.style.width;
+                    divElement.children[i].children[0].style.left = svgElement.style.left;
+                    divElement.children[i].children[0].style.top = svgElement.style.top;
+                    break;
+                }
+            }
+        }
         if (elements) {
             if (elements instanceof Array) {
                 Array.prototype.forEach.call(elements, function (value) {
@@ -62,7 +82,7 @@ var Print = /** @class */ (function () {
             }
         }
         else {
-            div.appendChild(this.control.element.cloneNode(true));
+            div.appendChild(divElement);
         }
         return div;
     };

package/src/maps/model/theme.js

@@ -183,11 +183,11 @@ export function getShapeColor(theme) {
             themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
                 '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
             break;
-        case 'fluentui':
+        case 'fluent':
             themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
                 '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
                 '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
             break;
@@ -476,7 +476,7 @@ export function getThemeStyle(theme) {
                 shapeFill: '#495057'
             };
             break;
-        case 'fluentui':
+        case 'fluent':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 areaBackgroundColor: 'rgba(255,255,255, 0.0)',
@@ -499,7 +499,7 @@ export function getThemeStyle(theme) {
                 shapeFill: '#F3F2F1'
             };
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 areaBackgroundColor: 'rgba(255,255,255, 0.0)',

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

@@ -53,7 +53,7 @@ var Annotations = /** @class */ (function () {
             if (argsData.cancel) {
                 return;
             }
-            templateFn = getTemplateFunction(argsData.content);
+            templateFn = getTemplateFunction(argsData.content, _this.map);
             if (templateFn && templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
                 templateElement = Array.prototype.slice.call(templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex));
                 var length_1 = templateElement.length;

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

@@ -27,7 +27,8 @@ export declare class MapsTooltip {
     private setTooltipContent;
     private formatter;
     mouseUpHandler(e: PointerEvent): void;
-    removeTooltip(): void;
+    removeTooltip(): boolean;
+    private clearTooltip;
     /**
      * To bind events for tooltip module
      */

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

@@ -228,6 +228,10 @@ var MapsTooltip = /** @class */ (function () {
                             fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor
                         });
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (_this.maps.isVue || _this.maps.isVue3) {
+                        _this.svgTooltip.controlInstance = _this.maps;
+                    }
                     _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
                     _this.svgTooltip.appendTo(tooltipEle);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -241,9 +245,7 @@ var MapsTooltip = /** @class */ (function () {
                     }
                 }
                 else {
-                    _this.removeTooltip();
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    _this.maps.clearTemplate();
+                    _this.clearTooltip();
                 }
             });
             if (this.svgTooltip) {
@@ -258,9 +260,7 @@ var MapsTooltip = /** @class */ (function () {
                 });
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
         else {
@@ -270,9 +270,7 @@ var MapsTooltip = /** @class */ (function () {
                 this.maps.notify(click, this);
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
     };
@@ -318,8 +316,18 @@ var MapsTooltip = /** @class */ (function () {
         }
     };
     MapsTooltip.prototype.removeTooltip = function () {
+        var isTooltipRemoved = false;
         if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
             remove(document.getElementsByClassName('EJ2-maps-Tooltip')[0]);
+            isTooltipRemoved = true;
+        }
+        return isTooltipRemoved;
+    };
+    MapsTooltip.prototype.clearTooltip = function () {
+        var isTooltipRemoved = this.removeTooltip();
+        if (isTooltipRemoved) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.maps.clearTemplate();
         }
     };
     // eslint-disable-next-line valid-jsdoc