@syncfusion/ej2-maps 23.2.7 → 24.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.7
+*  version : 24.1.47
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@23.2.4",
+  "_id": "@syncfusion/ej2-maps@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-pP7nlBwjL//N7mrbliAsjf2LVrx7Dr+qkj5mHab9ekMu2UR5OwJ3GkSjL0CfYUqaTPAYjxnVXJlh4I6rMn/ZzQ==",
+  "_integrity": "sha512-c5WmN2YgV4LUYns8pho6Db9uQ2AOOcKtuwF50pEeJNEQGLk/iML8AG9Wm7CtxR9VvQkCt/PySZ0AkEMYv4NdXg==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-23.2.4.tgz",
-  "_shasum": "84a7b5a26630bc3a334b34466283014291a5283e",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-24.1.41.tgz",
+  "_shasum": "a1dd14ef6bfbd226fe87c023a62bd8feedf1587d",
   "_spec": "@syncfusion/ej2-maps@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.6",
-    "@syncfusion/ej2-buttons": "~23.2.7",
-    "@syncfusion/ej2-compression": "~23.2.4",
-    "@syncfusion/ej2-data": "~23.2.4",
-    "@syncfusion/ej2-file-utils": "~23.2.4",
-    "@syncfusion/ej2-pdf-export": "~23.2.6",
-    "@syncfusion/ej2-svg-base": "~23.2.5"
+    "@syncfusion/ej2-base": "~24.1.46",
+    "@syncfusion/ej2-buttons": "~24.1.46",
+    "@syncfusion/ej2-compression": "~24.1.41",
+    "@syncfusion/ej2-data": "~24.1.41",
+    "@syncfusion/ej2-file-utils": "~24.1.41",
+    "@syncfusion/ej2-pdf-export": "~24.1.47",
+    "@syncfusion/ej2-svg-base": "~24.1.47"
   },
   "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": "23.2.7",
+  "version": "24.1.47",
   "sideEffects": false
 }

package/src/global.js

@@ -1,3 +1,3 @@
 import * as index from './index';
-index.Maps.Inject(index.Bubble, index.Legend, index.Marker, index.Highlight, index.Selection, index.MapsTooltip, index.Zoom, index.DataLabel, index.NavigationLine, index.Annotations, index.Print, index.PdfExport, index.ImageExport);
+index.Maps.Inject(index.Bubble, index.Legend, index.Marker, index.Highlight, index.Selection, index.MapsTooltip, index.Zoom, index.DataLabel, index.NavigationLine, index.Annotations, index.Print, index.PdfExport, index.ImageExport, index.Polygon);
 export * from './index';

package/src/maps/index.d.ts

@@ -13,6 +13,7 @@ export * from './layers/layer-panel';
 export * from './layers/bubble';
 export * from './layers/bing-map';
 export * from './layers/marker';
+export * from './layers/polygon';
 export * from './layers/color-mapping';
 export * from './layers/data-label';
 export * from './layers/navigation-selected-line';

package/src/maps/index.js

@@ -9,6 +9,7 @@ export * from './layers/layer-panel';
 export * from './layers/bubble';
 export * from './layers/bing-map';
 export * from './layers/marker';
+export * from './layers/polygon';
 export * from './layers/color-mapping';
 export * from './layers/data-label';
 export * from './layers/navigation-selected-line';

package/src/maps/layers/layer-panel.js

@@ -196,6 +196,12 @@ var LayerPanel = /** @class */ (function () {
             && panel.mapObject.previousZoomFactor !== panel.mapObject.zoomSettings.zoomFactor) {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
+        if (panel.mapObject.polygonModule) {
+            var polygonElement = panel.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, panel.mapObject.tileZoomLevel);
+            if (!isNullOrUndefined(polygonElement)) {
+                panel.layerObject.appendChild(polygonElement);
+            }
+        }
         if (panel.mapObject.navigationLineModule) {
             var navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
             if (!isNullOrUndefined(navigationLineElement)) {
@@ -664,6 +670,9 @@ var LayerPanel = /** @class */ (function () {
     layerIndex, colors, renderData, labelTemplateEle) {
         var _this = this;
         var bubbleG;
+        if (this.mapObject.polygonModule) {
+            this.groupElements.push(this.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) : this.currentFactor)));
+        }
         if (this.currentLayer.bubbleSettings.length && this.mapObject.bubbleModule) {
             var length_1 = this.currentLayer.bubbleSettings.length;
             var bubble_1;
@@ -1019,9 +1028,11 @@ var LayerPanel = /** @class */ (function () {
                     (!(childNode.id.indexOf('_bubble_Group') > -1)) &&
                     (!(childNode.id.indexOf('_dataLableIndex_Group') > -1)) &&
                     (!(childNode.id.indexOf('_line_Group') > -1))) {
-                    var transform = 'scale( ' + this.mapObject.scale + ' ) ' + 'translate( ' + this.mapObject.translatePoint.x
-                        + ' ' + this.mapObject.translatePoint.y + ' ) ';
-                    childNode.setAttribute('transform', transform);
+                    if (childNode.id.indexOf('_Polygons_Group') === -1) {
+                        var transform = 'scale( ' + this.mapObject.scale + ' ) ' + 'translate( ' + this.mapObject.translatePoint.x
+                            + ' ' + this.mapObject.translatePoint.y + ' ) ';
+                        childNode.setAttribute('transform', transform);
+                    }
                 }
             }
         }

package/src/maps/layers/legend.js

@@ -1797,7 +1797,7 @@ var Legend = /** @class */ (function () {
         var legendToggleBorderWidth = this.maps.legendSettings.toggleLegendSettings.border.width;
         var legendToggleBorderOpacity = isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
             this.maps.legendSettings.toggleLegendSettings.opacity : this.maps.legendSettings.toggleLegendSettings.border.opacity;
-        if (targetEle.parentNode['id'].indexOf(this.maps.element.id + '_Legend_Index_') > -1) {
+        if (!isNullOrUndefined(targetEle.parentNode) && targetEle.parentNode['id'].indexOf(this.maps.element.id + '_Legend_Index_') > -1) {
             var mapElement = void 0;
             var legendIndex = parseFloat(targetEle.parentElement.id.substr((this.maps.element.id + '_Legend_Index_').length));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/maps/layers/marker.js

@@ -35,11 +35,20 @@ var Marker = /** @class */ (function () {
             'left:' + maps.mapAreaRect.x + 'px;' +
             'height:' + maps.mapAreaRect.height + 'px;' +
             'width:' + maps.mapAreaRect.width + 'px;';
-        currentLayer.markerSettings.map(function (markerSettings, markerIndex) {
+        var allowAnimation = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var translatePoint;
+        if (!maps.isTileMap) {
+            translatePoint = !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
+                getZoomTranslate(maps, currentLayer, allowAnimation) :
+                getTranslate(maps, currentLayer, allowAnimation);
+        }
+        var _loop_1 = function (markerIndex) {
+            var markerSettings = currentLayer.markerSettings[markerIndex];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+            var _loop_2 = function (dataIndex) {
+                var data = markerData[dataIndex];
                 maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 var eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
@@ -62,14 +71,11 @@ var Marker = /** @class */ (function () {
                         var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        var animate = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
-                            !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
-                                getZoomTranslate(maps, currentLayer, animate) :
-                                getTranslate(maps, currentLayer, animate);
-                        var scale = type === 'AddMarker' ? maps.scale : translate['scale'];
-                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
+                        if (maps.isTileMap) {
+                            translatePoint = (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object();
+                        }
+                        var scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
+                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['location'];
                         if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerTemplateCount++;
                             markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
@@ -87,6 +93,7 @@ var Marker = /** @class */ (function () {
                     maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
                         maps.markerNullCount + 1 : maps.markerNullCount;
                     var markerDataLength = markerData.length - maps.markerNullCount;
+                    var isMarkersClustered = false;
                     if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(_this.markerSVGObject);
                         if (currentLayer.markerClusterSettings.allowClustering) {
@@ -94,11 +101,11 @@ var Marker = /** @class */ (function () {
                             maps.element.appendChild(maps.svgObject);
                             if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
                                 && maps.zoomSettings.enable) {
-                                clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
                                 layerElement.appendChild(_this.markerSVGObject);
                             }
                             else {
-                                clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             maps.renderReactTemplates();
@@ -107,7 +114,7 @@ var Marker = /** @class */ (function () {
                     if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
                         getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
                         if (maps.checkInitialRender) {
-                            if (currentLayer.markerClusterSettings.allowClustering) {
+                            if (currentLayer.markerClusterSettings.allowClustering && !isMarkersClustered) {
                                 clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
@@ -115,8 +122,15 @@ var Marker = /** @class */ (function () {
                         }
                     }
                 });
-            });
-        });
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for (var dataIndex = 0; dataIndex < markerData.length; dataIndex++) {
+                _loop_2(dataIndex);
+            }
+        };
+        for (var markerIndex = 0; markerIndex < currentLayer.markerSettings.length; markerIndex++) {
+            _loop_1(markerIndex);
+        }
     };
     /**
      * To find zoom level for individual layers like India, USA.
@@ -181,25 +195,27 @@ var Marker = /** @class */ (function () {
                                     !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
                                 var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
                                     !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                                minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
-                                    longitude : minLong_1;
-                                maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
-                                    latitude : maxLat_1;
-                                minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
-                                    latitude : minLat_1;
-                                maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
-                                    longitude : maxLong_1;
-                                if (minLong_1 > longitude) {
-                                    minLong_1 = longitude;
-                                }
-                                if (minLat_1 > latitude) {
-                                    minLat_1 = latitude;
-                                }
-                                if (maxLong_1 < longitude) {
-                                    maxLong_1 = longitude;
-                                }
-                                if (maxLat_1 < latitude) {
-                                    maxLat_1 = latitude;
+                                if (!isNullOrUndefined(latitude) && !isNullOrUndefined(longitude)) {
+                                    minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
+                                        longitude : minLong_1;
+                                    maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
+                                        latitude : maxLat_1;
+                                    minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
+                                        latitude : minLat_1;
+                                    maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
+                                        longitude : maxLong_1;
+                                    if (minLong_1 > longitude) {
+                                        minLong_1 = longitude;
+                                    }
+                                    if (minLat_1 > latitude) {
+                                        minLat_1 = latitude;
+                                    }
+                                    if (maxLong_1 < longitude) {
+                                        maxLong_1 = longitude;
+                                    }
+                                    if (maxLat_1 < latitude) {
+                                        maxLat_1 = latitude;
+                                    }
                                 }
                             });
                         });

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

@@ -0,0 +1,31 @@
+import { Maps } from '../../index';
+/**
+ * When injected, this module will be used to render polygon shapes over the Maps.
+ */
+export declare class Polygon {
+    private maps;
+    constructor(maps: Maps);
+    /**
+     * To render polygon for maps
+     *
+     * @param {Maps} maps - Specifies the layer instance to which the polygon is to be rendered.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @returns {Element} - Returns the polygon element.
+     * @private
+     */
+    polygonRender(maps: Maps, layerIndex: number, factor: number): Element;
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string;
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    destroy(): void;
+}

package/src/maps/layers/polygon.js

@@ -0,0 +1,58 @@
+import { PathOption, calculatePolygonPath, maintainSelection } from '../utils/helper';
+/**
+ * When injected, this module will be used to render polygon shapes over the Maps.
+ */
+var Polygon = /** @class */ (function () {
+    function Polygon(maps) {
+        this.maps = maps;
+    }
+    /**
+     * To render polygon for maps
+     *
+     * @param {Maps} maps - Specifies the layer instance to which the polygon is to be rendered.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @returns {Element} - Returns the polygon element.
+     * @private
+     */
+    Polygon.prototype.polygonRender = function (maps, layerIndex, factor) {
+        var _this = this;
+        var currentLayer = maps.layersCollection[layerIndex];
+        var polygonsSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group'
+        });
+        currentLayer.polygonSettings.polygons.map(function (polygonSetting, polygonIndex) {
+            var polygonSVGObject = maps.renderer.createGroup({
+                id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
+            });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var polygonData = polygonSetting.points;
+            var path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
+            var pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
+            var polygonEle = maps.renderer.drawPath(pathOptions);
+            maintainSelection(_this.maps.selectedPolygonElementId, _this.maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
+            polygonSVGObject.appendChild(polygonEle);
+            polygonsSVGObject.appendChild(polygonSVGObject);
+        });
+        return polygonsSVGObject;
+    };
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    Polygon.prototype.getModuleName = function () {
+        return 'Polygon';
+    };
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    Polygon.prototype.destroy = function () {
+        this.maps = null;
+    };
+    return Polygon;
+}());
+export { Polygon };

package/src/maps/maps-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Fetch } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel, InitialMarkerSelectionSettingsModel } from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint} from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs, IMarkerDragEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Fetch } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel, PolygonSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel, InitialMarkerSelectionSettingsModel } from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMinMaxLatitudeLongitude, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint} from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs, IMarkerDragEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { Polygon } from './layers/polygon';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/maps/maps.d.ts

@@ -21,7 +21,7 @@ import { MapsTooltip } from './user-interaction/tooltip';
 import { Zoom } from './user-interaction/zoom';
 import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';
 import { MapsModel } from './maps-model';
-import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';
+import { ILoadEventArgs, ILoadedEventArgs, IMinMaxLatitudeLongitude, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';
 import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';
 import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';
 import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';
@@ -33,6 +33,7 @@ import { GeoLocation, Rect } from '../maps/utils/helper';
 import { Annotations } from '../maps/user-interaction/annotation';
 import { DataLabel, IAnnotationRenderingEventArgs, IMarkerDragEventArgs } from './index';
 import { NavigationLine } from './layers/navigation-selected-line';
+import { Polygon } from './layers/polygon';
 import { ExportType } from '../maps/utils/enum';
 import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 import { Print } from './model/print';
@@ -80,6 +81,12 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     navigationLineModule: NavigationLine;
+    /**
+     * Gets or sets the module to add the polygon shapes over the maps.
+     *
+     * @private
+     */
+    polygonModule: Polygon;
     /**
      * Gets or sets the module to add the legend in maps.
      *
@@ -674,6 +681,10 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     /** @private */
     selectedNavigationElementId: string[];
     /** @private */
+    polygonSelectionClass: Element;
+    /** @private */
+    selectedPolygonElementId: string[];
+    /** @private */
     legendSelectionClass: SelectionSettingsModel;
     /** @private */
     selectedLegendElementId: number[];
@@ -700,6 +711,8 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     /** @private */
     previousTileWidth: number;
     /** @private */
+    isMarkerZoomCompleted: boolean;
+    /** @private */
     markerDragId: string;
     /** @private */
     previousTileHeight: number;
@@ -767,6 +780,7 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      */
     processResponseJsonData(processType: string, data?: any | string, layer?: LayerSettings, dataType?: string): void;
     private renderMap;
+    private triggerZoomEvent;
     /**
      * To apply color to the initial selected marker
      *
@@ -805,6 +819,10 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     private setSecondaryElementPosition;
     private zoomingChange;
     private createSecondaryElement;
+    /**
+     * @returns {void}
+     */
+    getMinMaxLatitudeLongitude(): IMinMaxLatitudeLongitude;
     /**
      * @returns {void}
      * @private
@@ -1083,6 +1101,12 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
     private isNavigationVisible;
+    /**
+     * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
+     */
+    private isPolygonVisible;
     /**
      * To find marker visibility
      */