@syncfusion/ej2-maps 20.4.40 → 20.4.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.40
+*  version : 20.4.44
 *  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.38",
+  "_id": "@syncfusion/ej2-maps@20.4.42",
   "_inBundle": false,
-  "_integrity": "sha512-TH0dxa2Csh7v1sPf5o9M+jb/cC1ETE/UGwP7jI3lTF205CryE9vgFj3S1GAiQAWYhHjplmjIT+ZBljVE34LlBA==",
+  "_integrity": "sha512-FlGB9hzYRQaPAPqR1i5fQ9YGgBECHXzjDLzJb7czFS6EO2Gr0798kZqhMCK8W8TSPENB14TAeyJuFKNZGDkKLw==",
   "_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.38.tgz",
-  "_shasum": "250b32850a0db25e999cb2c563a4955b5b780a35",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.4.42.tgz",
+  "_shasum": "7d8a8fb9a0b0124b6d513fa680db3d7dcfed9953",
   "_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.40",
-    "@syncfusion/ej2-buttons": "~20.4.40",
-    "@syncfusion/ej2-compression": "~20.4.40",
-    "@syncfusion/ej2-data": "~20.4.40",
-    "@syncfusion/ej2-file-utils": "~20.4.40",
-    "@syncfusion/ej2-pdf-export": "~20.4.40",
-    "@syncfusion/ej2-svg-base": "~20.4.40"
+    "@syncfusion/ej2-base": "~20.4.44",
+    "@syncfusion/ej2-buttons": "~20.4.44",
+    "@syncfusion/ej2-compression": "~20.4.42",
+    "@syncfusion/ej2-data": "~20.4.44",
+    "@syncfusion/ej2-file-utils": "~20.4.42",
+    "@syncfusion/ej2-pdf-export": "~20.4.42",
+    "@syncfusion/ej2-svg-base": "~20.4.42"
   },
   "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.40",
+  "version": "20.4.44",
   "sideEffects": false
 }

package/src/maps/layers/legend.d.ts

@@ -143,6 +143,7 @@ export declare class Legend {
     private removeCollections;
     removeEventListener(): void;
     private getLegendData;
+    private setToggleAttributes;
     legendGradientColor(colorMap: ColorMappingSettings, legendIndex: number): string;
     /**
      * Get module name.

package/src/maps/layers/legend.js

@@ -538,14 +538,14 @@ var Legend = /** @class */ (function () {
                             ' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
                         var leftPath = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
                             ' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
-                        var leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
+                        var leftPageOptions = new PathOption(map.element.id + '_Left_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         var leftRectPageOptions = new RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                         var pathEle = render.drawRectangle(leftRectPageOptions);
                         pathEle.tabIndex = (page + 1) === 1 ? -1 : (map.tabIndex + 1);
                         leftPageElement.appendChild(pathEle);
                         this.wireEvents(leftPageElement);
-                        var rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
+                        var rightPageOptions = new PathOption(map.element.id + '_Right_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
                         rightPageElement.appendChild(render.drawPath(rightPageOptions));
                         var rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                         pathEle = render.drawRectangle(rightRectPageOptions);
@@ -559,7 +559,7 @@ var Legend = /** @class */ (function () {
                             'id': map.element.id + '_Paging_Text',
                             'x': pageTextX,
                             'y': locY + (pagingTextSize.height / 4),
-                            'fill': '#a6a6a6',
+                            'fill': this.maps.themeStyle.legendTextColor,
                             'font-size': '14px',
                             'font-style': pagingFont.fontStyle,
                             'font-family': pagingFont.fontFamily,
@@ -1814,22 +1814,10 @@ var Legend = /** @class */ (function () {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
-                                        legendShapeId.setAttribute('fill', legendToggleFill);
-                                        legendShapeId.setAttribute('fill-opacity', (legendToggleOpacity).toString());
-                                        legendShapeId.setAttribute('stroke', legendToggleBorderColor);
-                                        legendShapeId.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
-                                        legendShapeId.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
-                                        legendTextId.setAttribute('fill', legendToggleFill);
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        legendTextId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                        legendShapeId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                        legendShapeId.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
-                                        legendShapeId.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                        legendShapeId.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
-                                        legendShapeId.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
-                                            this.maps.layers[k].shapeSettings.opacity :
-                                            this.maps.layers[k].shapeSettings.border.opacity).toString());
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[k].shapeSettings.fill);
                                     }
                                 }
                             }
@@ -1842,16 +1830,11 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
-                                    legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
-                                    legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
-                                    legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
-                                    legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
                                     if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
                                         legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
                                     }
-                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#757575');
                                 }
                             }
                         }
@@ -1898,9 +1881,13 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#E5E5E5');
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
+                                    }
+                                    else {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ? this.maps.layers[j].shapeSettings.opacity : this.maps.layers[j].shapeSettings.border.opacity, this.maps.layers[j].shapeSettings.fill);
+                                    }
                                 }
                             }
                             else {
@@ -1919,9 +1906,8 @@ var Legend = /** @class */ (function () {
                                 layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#757575');
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
                                 }
                             }
                         }
@@ -1975,22 +1961,10 @@ var Legend = /** @class */ (function () {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                     if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
-                                        legendTextId.setAttribute('fill', legendToggleFill);
-                                        legendShapeId.setAttribute('fill', legendToggleFill);
-                                        legendShapeId.setAttribute('fill-opacity', (legendToggleOpacity).toString());
-                                        legendShapeId.setAttribute('stroke', legendToggleBorderColor);
-                                        legendShapeId.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
-                                        legendShapeId.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        legendTextId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                        legendShapeId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                        legendShapeId.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
-                                        legendShapeId.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
-                                        legendShapeId.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
-                                            this.maps.layers[k].shapeSettings.opacity :
-                                            this.maps.layers[k].shapeSettings.border.opacity).toString());
-                                        legendShapeId.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width), (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity), this.maps.layers[k].shapeSettings.fill);
                                     }
                                 }
                             }
@@ -2056,9 +2030,13 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', '#E5E5E5');
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#E5E5E5');
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
+                                    }
+                                    else {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[0].shapeSettings.fill);
+                                    }
                                 }
                             }
                             else {
@@ -2078,9 +2056,8 @@ var Legend = /** @class */ (function () {
                                 mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#757575');
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
                                 }
                             }
                         }
@@ -2157,6 +2134,16 @@ var Legend = /** @class */ (function () {
         }
         return legendData;
     };
+    Legend.prototype.setToggleAttributes = function (textElement, shapeElement, fillColor, fillOpacity, borderColor, borderWidth, borderOpacity, textColor) {
+        textElement.setAttribute('fill', textColor);
+        shapeElement.setAttribute('fill', fillColor);
+        shapeElement.setAttribute('fill-opacity', (fillOpacity).toString());
+        shapeElement.setAttribute('stroke', borderColor);
+        shapeElement.setAttribute('stroke-width', (borderWidth).toString());
+        if (!isNullOrUndefined(borderOpacity)) {
+            shapeElement.setAttribute('stroke-opacity', (borderOpacity).toString());
+        }
+    };
     Legend.prototype.legendGradientColor = function (colorMap, legendIndex) {
         var legendFillColor;
         var xmlns = 'http://www.w3.org/2000/svg';

package/src/maps/maps.d.ts

@@ -531,6 +531,7 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     baseMapBounds: GeoLocation;
     /** @private */
     baseMapRectBounds: any;
+    private resizeEvent;
     /** @public */
     translatePoint: Point;
     /** @private */

package/src/maps/maps.js

@@ -889,7 +889,8 @@ var Maps = /** @class */ (function (_super) {
         EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
         EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
         //  EventHandler.add(this.element, cancelEvent, this.mouseLeaveOnMap, this);
-        window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.mapsOnResize.bind(this));
+        this.resizeEvent = this.mapsOnResize.bind(this);
+        window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeEvent);
     };
     /**
      * To unbind event handlers from maps.
@@ -908,7 +909,7 @@ var Maps = /** @class */ (function (_super) {
         EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
         EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
         //EventHandler.remove(this.element, cancelEvent, this.mouseLeaveOnMap);
-        window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.mapsOnResize);
+        window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeEvent);
     };
     /**
      * This method is used to perform operations when mouse pointer leave from maps.
@@ -1766,6 +1767,9 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.destroy = function () {
         this.unWireEVents();
+        if (!isNullOrUndefined(this.mapsTooltipModule)) {
+            this.mapsTooltipModule.removeEventListener();
+        }
         _super.prototype.destroy.call(this);
         this.shapeSelectionItem = [];
         this.toggledShapeElementId = [];

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

@@ -347,23 +347,26 @@ var MapsTooltip = /** @class */ (function () {
         else {
             this.maps.on(Browser.touchMoveEvent, this.renderTooltip, this);
         }
-        this.maps.element.addEventListener('contextmenu', this.removeTooltip);
         this.maps.on(Browser.touchCancelEvent, this.removeTooltip, this);
+        this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     };
     MapsTooltip.prototype.removeEventListener = function () {
-        if (this.maps.isDestroyed) {
-            return;
-        }
-        if (this.maps.tooltipDisplayMode === 'DoubleClick') {
-            this.maps.off('dblclick', this.removeTooltip);
-        }
-        else if (this.maps.tooltipDisplayMode === 'Click') {
-            this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
-        }
-        else {
-            this.maps.off(Browser.touchMoveEvent, this.renderTooltip);
+        if (this.maps) {
+            if (this.maps.isDestroyed) {
+                return;
+            }
+            if (this.maps.tooltipDisplayMode === 'DoubleClick') {
+                this.maps.off('dblclick', this.removeTooltip);
+            }
+            else if (this.maps.tooltipDisplayMode === 'Click') {
+                this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
+            }
+            else {
+                this.maps.off(Browser.touchMoveEvent, this.renderTooltip);
+            }
+            this.maps.off(Browser.touchCancelEvent, this.removeTooltip);
+            this.maps.element.removeEventListener('contextmenu', this.removeTooltip);
         }
-        this.maps.off(Browser.touchCancelEvent, this.removeTooltip);
     };
     /**
      * Get module name.
@@ -384,7 +387,6 @@ var MapsTooltip = /** @class */ (function () {
             this.svgTooltip.destroy();
         }
         this.svgTooltip = null;
-        this.removeEventListener();
         //TODO: Calling the below code throws spec issue.
         //this.maps = null;
     };