@syncfusion/ej2-maps 19.4.55 → 19.4.56

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.55
+*  version : 19.4.56
 *  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.53",
+  "_id": "@syncfusion/ej2-maps@19.4.55",
   "_inBundle": false,
-  "_integrity": "sha512-iKmlZs4Jk3Ham1nZcEED796tj4trxggyWDRFZaeoVffVMBcmk1eR0q0guoxl6jInRjI47uVY5TWxM/ZkTlvhCQ==",
+  "_integrity": "sha512-q9a3UHN4IPE+Dj7luY6xOJVNcEKEpTSLOkaXdJdNxCf883wYbcX5oTu88Ab2Pbj8tIPwPJuvt5bt8b7bfBPJ/A==",
   "_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.53.tgz",
-  "_shasum": "4d8d8af62e877d87dfdda1b5ffcfdb03d90a8122",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-19.4.55.tgz",
+  "_shasum": "68aeba0a91caa2c3c4aa2d6d01c2bc2e163e692c",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.55",
+  "version": "19.4.56",
   "sideEffects": false
 }

package/src/maps/maps.js

@@ -417,12 +417,14 @@ var Maps = /** @class */ (function (_super) {
                     this.checkInitialRender = false;
                 }
             }
-            for (var k = 0; k < this.layers[i].markerSettings.length; k++) {
-                if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
-                    && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
-                    var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
-                    for (var j = 0; j < markerSelectionValues.length; j++) {
-                        this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
+            if (!this.isResize) {
+                for (var k = 0; k < this.layers[i].markerSettings.length; k++) {
+                    if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
+                        && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
+                        var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
+                        for (var j = 0; j < markerSelectionValues.length; j++) {
+                            this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
+                        }
                     }
                 }
             }
@@ -500,7 +502,8 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.markerSelection = function (selectionSettings, map, targetElement, data) {
         var border = {
             color: selectionSettings.border.color,
-            width: selectionSettings.border.width / map.scale
+            width: selectionSettings.border.width / map.scale,
+            opacity: selectionSettings.border.opacity
         };
         var markerSelectionProperties = {
             opacity: selectionSettings.opacity,
@@ -520,9 +523,11 @@ var Maps = /** @class */ (function (_super) {
         if (this.selectedMarkerElementId.length === 0 || selectionSettings.enableMultiSelect) {
             if (targetElement.tagName === 'g') {
                 targetElement.children[0].setAttribute('class', 'MarkerselectionMapStyle');
+                this.selectedMarkerElementId.push(targetElement.children[0].id);
             }
             else {
                 targetElement.setAttribute('class', 'MarkerselectionMapStyle');
+                this.selectedMarkerElementId.push(targetElement.id);
             }
         }
     };

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { createElement, Browser } from '@syncfusion/ej2-base';
-import { triggerDownload } from '../utils/helper';
+import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { triggerDownload, getElementByID, getClientElement } from '../utils/helper';
 /**
  * This module enables the export to Image functionality in Maps control.
  *
@@ -38,18 +38,21 @@ 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);
             if (!_this.control.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                     _this.control.svgObject.outerHTML + '</svg>';
             }
             else {
-                var tileSvg = document.getElementById(_this.control.element.id + '_Tile_SVG');
+                tileSvg = getElementByID(_this.control.element.id + '_Tile_SVG').cloneNode(true);
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                    _this.control.svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
+                    svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgDataElement] :
-                [(new XMLSerializer()).serializeToString(_this.control.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(svgObject)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
                 if (allowDownload) {
                     triggerDownload(fileName, type, url, isDownload);
@@ -80,6 +83,7 @@ var ImageExport = /** @class */ (function () {
                     image_1.src = url;
                 }
                 else {
+                    var extraSpace_1 = getClientElement(_this.control.element.id);
                     var imgxHttp = new XMLHttpRequest();
                     var imgTileLength_1 = _this.control.mapLayerPanel.tiles.length;
                     var _loop_1 = function (i) {
@@ -89,8 +93,11 @@ var ImageExport = /** @class */ (function () {
                         ctxt_1.fillStyle = _this.control.background ? _this.control.background : '#FFFFFF';
                         ctxt_1.fillRect(0, 0, _this.control.availableSize.width, _this.control.availableSize.height);
                         ctxt_1.font = _this.control.titleSettings.textStyle.size + ' Arial';
-                        ctxt_1.fillStyle = document.getElementById(_this.control.element.id + '_Map_title').getAttribute('fill');
-                        ctxt_1.fillText(_this.control.titleSettings.text, parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('y')));
+                        var titleElement = document.getElementById(_this.control.element.id + '_Map_title');
+                        if (!isNullOrUndefined(titleElement)) {
+                            ctxt_1.fillStyle = titleElement.getAttribute('fill');
+                            ctxt_1.fillText(_this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                        }
                         exportTileImg.onload = (function () {
                             if (i === 0 || i === imgTileLength_1 + 1) {
                                 if (i === 0) {
@@ -99,12 +106,12 @@ var ImageExport = /** @class */ (function () {
                                     ctxt_1.clip();
                                 }
                                 else {
-                                    ctxt_1.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                    ctxt_1.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace_1["top"]));
                                 }
                             }
                             else {
-                                ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                    (parseFloat(document.getElementById(_this.control.element.id + '_tile_parent').style.top)));
+                                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"]);
                             }
                             ctxt_1.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength_1 + 1) {
@@ -130,7 +137,7 @@ var ImageExport = /** @class */ (function () {
                             }
                             else {
                                 setTimeout(function () {
-                                    exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(_this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
+                                    exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                                 }, 300);
                             }
                         }

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

@@ -1,6 +1,7 @@
 /* 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.
  *
@@ -40,6 +41,7 @@ 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')
@@ -72,6 +74,7 @@ var PdfExport = /** @class */ (function () {
                 image.src = url;
             }
             else {
+                var extraSpace_1 = getClientElement(_this.control.element.id);
                 var xHttp = new XMLHttpRequest();
                 var tileLength_1 = _this.control.mapLayerPanel.tiles.length;
                 var _loop_1 = function (i) {
@@ -81,8 +84,11 @@ var PdfExport = /** @class */ (function () {
                     ctx.fillStyle = _this.control.background ? _this.control.background : '#FFFFFF';
                     ctx.fillRect(0, 0, _this.control.availableSize.width, _this.control.availableSize.height);
                     ctx.font = _this.control.titleSettings.textStyle.size + ' Arial';
-                    ctx.fillStyle = document.getElementById(_this.control.element.id + '_Map_title').getAttribute('fill');
-                    ctx.fillText(_this.control.titleSettings.text, parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('y')));
+                    var titleElement = document.getElementById(_this.control.element.id + '_Map_title');
+                    if (!isNullOrUndefined(titleElement)) {
+                        ctx.fillStyle = titleElement.getAttribute('fill');
+                        ctx.fillText(_this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                    }
                     tileImg.onload = (function () {
                         if (i === 0 || i === tileLength_1 + 1) {
                             if (i === 0) {
@@ -91,12 +97,12 @@ var PdfExport = /** @class */ (function () {
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace_1["top"]));
                             }
                         }
                         else {
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                (parseFloat(document.getElementById(_this.control.element.id + '_tile_parent').style.top)));
+                            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"]));
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength_1 + 1) {
@@ -122,7 +128,8 @@ var PdfExport = /** @class */ (function () {
                         }
                         else {
                             setTimeout(function () {
-                                tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(_this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
+                                var tileSvg = document.getElementById(_this.control.element.id + '_Tile_SVG');
+                                tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
                     }

package/src/maps/model/print.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { print as printWindow, createElement } from '@syncfusion/ej2-base';
-import { getElement } from '../utils/helper';
+import { getElement, getClientElement } from '../utils/helper';
 import { beforePrint } from '../model/constants';
 /**
  * This module enables the print functionality in maps.
@@ -45,7 +45,9 @@ var Print = /** @class */ (function () {
      * @private
      */
     Print.prototype.getHTMLContent = function (elements) {
+        var elementRect = getClientElement(this.control.element.id);
         var div = createElement('div');
+        div.setAttribute("style", "margin-top:" + elementRect["top"] + "px");
         if (elements) {
             if (elements instanceof Array) {
                 Array.prototype.forEach.call(elements, function (value) {

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

@@ -818,6 +818,14 @@ export declare function fixInitialScaleForTile(map: Maps): void;
  * @returns {Element} - Returns the element
  */
 export declare function getElementByID(id: string): Element;
+/**
+ * Function to get clientElement from id.
+ *
+ * @param {string} id - Specifies the id
+ * @returns {Element} - Returns the element
+ * @private
+ */
+export declare function getClientElement(id: string): ClientRect;
 /**
  * To apply internalization
  *

package/src/maps/utils/helper.js

@@ -1312,8 +1312,10 @@ export function maintainSelection(elementId, elementClass, element, className) {
     if (elementId) {
         for (var index = 0; index < elementId.length; index++) {
             if (element.getAttribute('id') === elementId[index]) {
-                if (isNullOrUndefined(getElement(elementClass.id)) || index === 0) {
-                    document.body.appendChild(elementClass);
+                if (index === 0 || element.tagName === 'g') {
+                    if (!isNullOrUndefined(elementClass) && !isNullOrUndefined(elementClass.id)) {
+                        document.body.appendChild(elementClass);
+                    }
                     if (element.id.indexOf('_MarkerIndex_') > -1 && element.childElementCount > 0) {
                         element.children[0].setAttribute('class', className);
                     }
@@ -2274,6 +2276,22 @@ export function fixInitialScaleForTile(map) {
 export function getElementByID(id) {
     return document.getElementById(id);
 }
+/**
+ * Function to get clientElement from id.
+ *
+ * @param {string} id - Specifies the id
+ * @returns {Element} - Returns the element
+ * @private
+ */
+export function getClientElement(id) {
+    var element = document.getElementById(id);
+    if (!isNullOrUndefined(element)) {
+        return element.getClientRects()[0];
+    }
+    else {
+        return null;
+    }
+}
 /**
  * To apply internalization
  *