@syncfusion/ej2-maps 23.2.7 → 24.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.7
+*  version : 24.1.41
 *  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@16.42.7",
   "_inBundle": false,
-  "_integrity": "sha512-pP7nlBwjL//N7mrbliAsjf2LVrx7Dr+qkj5mHab9ekMu2UR5OwJ3GkSjL0CfYUqaTPAYjxnVXJlh4I6rMn/ZzQ==",
+  "_integrity": "sha512-zvzewbDnn/ObhbtffQT1SYCrRK+TPGpGGqdE8M2TrcHfXvu1l4wnqU0RWEMiLz2T3CX2DsifowLKf+kz8dgNSA==",
   "_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-release/@syncfusion/ej2-maps/-/ej2-maps-16.42.7.tgz",
+  "_shasum": "96564e376b3d8974f9ff4c1ce1bf9f2bb9414d77",
   "_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.41",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@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.41",
+    "@syncfusion/ej2-svg-base": "~24.1.41"
   },
   "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.41",
   "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

@@ -181,25 +181,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
      */

package/src/maps/maps.js

@@ -29,8 +29,7 @@ import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, merge
 import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
-import { Marker } from './layers/marker';
-import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { load, click, onclick, rightClick, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
@@ -120,6 +119,8 @@ var Maps = /** @class */ (function (_super) {
         /** @private */
         _this.selectedNavigationElementId = [];
         /** @private */
+        _this.selectedPolygonElementId = [];
+        /** @private */
         _this.selectedLegendElementId = [];
         /** @private */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -137,6 +138,8 @@ var Maps = /** @class */ (function (_super) {
         /** @private */
         _this.initialTileTranslate = new Point(0, 0);
         /** @private */
+        _this.isMarkerZoomCompleted = false;
+        /** @private */
         _this.markerDragId = '';
         /** @private */
         _this.initialCheck = true;
@@ -503,10 +506,20 @@ var Maps = /** @class */ (function (_super) {
             this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.element.id + '_Zooming_');
         }
         if (!this.isZoomByPosition && !this.zoomNotApplied) {
-            this.trigger(loaded, { maps: this, isResized: this.isResize });
+            this.triggerZoomEvent();
         }
         this.isResize = false;
     };
+    Maps.prototype.triggerZoomEvent = function () {
+        var loadedArgs;
+        var minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
+        loadedArgs = {
+            maps: this, isResized: this.isResize, minLatitude: minMaxLatitudeLongitude.minLatitude,
+            maxLatitude: minMaxLatitudeLongitude.maxLatitude, minLongitude: minMaxLatitudeLongitude.minLongitude,
+            maxLongitude: minMaxLatitudeLongitude.maxLongitude, cancel: false, name: 'Loaded'
+        };
+        this.trigger('loaded', loadedArgs);
+    };
     /**
      * To apply color to the initial selected marker
      *
@@ -678,6 +691,20 @@ var Maps = /** @class */ (function (_super) {
             this.element.appendChild(secondaryElement);
         }
     };
+    /**
+     * @returns {void}
+     */
+    Maps.prototype.getMinMaxLatitudeLongitude = function () {
+        var element = document.getElementById(this.element.id).getBoundingClientRect();
+        var minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
+        var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
+            this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
+        var MinMaxLatitudeLongitude = {
+            minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
+            maxLongitude: maxPosition.longitude
+        };
+        return MinMaxLatitudeLongitude;
+    };
     /**
      * @returns {void}
      * @private
@@ -1605,7 +1632,7 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
         if (!this.isDestroyed) {
-            this.zoomNotApplied = false;
+            this.zoomNotApplied = this.isMarkerZoomCompleted = false;
             var isRefresh = this.zoomSettings.zoomFactor === zoomFactor;
             this.previousProjection = null;
             if (!this.isTileMap && this.zoomModule) {
@@ -1702,15 +1729,14 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.addMarker = function (layerIndex, markerCollection) {
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.markerModule)) {
             var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
             if (markerCollection.length > 0 && layerEle) {
                 for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
                     var newMarker = markerCollection_1[_i];
                     this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
                 }
-                var markerModule = new Marker(this);
-                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
                 this.arrangeTemplate();
             }
         }
@@ -1836,6 +1862,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.zoomToCoordinates = function (minLatitude, minLongitude, maxLatitude, maxLongitude) {
         var _a, _b;
         if (!this.isDestroyed) {
+            this.isMarkerZoomCompleted = false;
             var centerLatitude = void 0;
             var centerLongtitude = void 0;
             var isTwoCoordinates = false;
@@ -1874,12 +1901,15 @@ var Maps = /** @class */ (function (_super) {
             this.maxLongOfGivenLocation = maxLongitude;
             this.zoomNotApplied = true;
             this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this, true);
+            var minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
             var zoomArgs = {
                 cancel: false, name: 'zoom', type: zoomIn, maps: this,
                 tileTranslatePoint: {}, translatePoint: {},
                 tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
                 scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
-                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
+                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation },
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
             };
             this.trigger('zoom', zoomArgs);
             this.refresh();
@@ -2051,6 +2081,9 @@ var Maps = /** @class */ (function (_super) {
                             }
                             else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
                                 this.zoomSettings.zoomFactor = 1;
+                                this.previousProjection = null;
+                                this.scale = this.isMarkerZoomCompleted ? null : this.scale;
+                                this.isMarkerZoomCompleted = !newProp.zoomSettings.shouldZoomInitially;
                                 render = true;
                             }
                             else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
@@ -2149,6 +2182,12 @@ var Maps = /** @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.isPolygonVisible()) {
+            modules.push({
+                member: 'Polygon',
+                args: [this]
+            });
+        }
         if (isVisible.tooltip) {
             modules.push({
                 member: 'MapsTooltip',
@@ -2230,6 +2269,23 @@ var Maps = /** @class */ (function (_super) {
         });
         return isVisible;
     };
+    /**
+     * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
+     */
+    Maps.prototype.isPolygonVisible = function () {
+        var isVisible = false;
+        Array.prototype.forEach.call(this.layers, function (layer) {
+            for (var i = 0; i < layer.polygonSettings.polygons.length; i++) {
+                if (layer.polygonSettings.polygons.length > 0) {
+                    isVisible = true;
+                    break;
+                }
+            }
+        });
+        return isVisible;
+    };
     /**
      * To find marker visibility
      */
@@ -2343,14 +2399,15 @@ var Maps = /** @class */ (function (_super) {
         if (isHighlight === void 0) { isHighlight = false; }
         var bubbles;
         var markers;
-        var navigationLine;
+        var polygonSetting;
         for (var _i = 0, layers_1 = layers; _i < layers_1.length; _i++) {
             var layer = layers_1[_i];
             isLayerVisible = layer.visible || isLayerVisible;
             if (layer.visible) {
                 bubbles = layer.bubbleSettings;
                 markers = layer.markerSettings;
-                navigationLine = layer.navigationLineSettings;
+                polygonSetting = layer.polygonSettings;
+                var navigationLine = layer.navigationLineSettings;
                 for (var _a = 0, navigationLine_1 = navigationLine; _a < navigationLine_1.length; _a++) {
                     var navigation = navigationLine_1[_a];
                     if (navigation.visible) {
@@ -2358,8 +2415,15 @@ var Maps = /** @class */ (function (_super) {
                         isHighlight = (!isNullOrUndefined(navigation.selectionSettings) && navigation.selectionSettings.enable) || isHighlight;
                     }
                 }
-                for (var _b = 0, markers_1 = markers; _b < markers_1.length; _b++) {
-                    var marker = markers_1[_b];
+                for (var _b = 0, _c = polygonSetting.polygons; _b < _c.length; _b++) {
+                    var polygon = _c[_b];
+                    if (polygon.points.length > 0) {
+                        isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
+                        isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
+                    }
+                }
+                for (var _d = 0, markers_1 = markers; _d < markers_1.length; _d++) {
+                    var marker = markers_1[_d];
                     if (marker.visible) {
                         istooltipVisible = marker.tooltipSettings.visible || istooltipVisible;
                         isSelection = marker.selectionSettings.enable || isSelection;
@@ -2369,8 +2433,8 @@ var Maps = /** @class */ (function (_super) {
                         break;
                     }
                 }
-                for (var _c = 0, bubbles_1 = bubbles; _c < bubbles_1.length; _c++) {
-                    var bubble = bubbles_1[_c];
+                for (var _e = 0, bubbles_1 = bubbles; _e < bubbles_1.length; _e++) {
+                    var bubble = bubbles_1[_e];
                     if (bubble.visible) {
                         istooltipVisible = bubble.tooltipSettings.visible || istooltipVisible;
                         isSelection = bubble.selectionSettings.enable || isSelection;
@@ -2454,7 +2518,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
         var latitude = 0;
         var longitude = 0;
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
             var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
             pageY = pageY + padding;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);