@syncfusion/ej2-maps 23.2.7 → 24.1.47

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);

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

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';import { SmartLabelMode, IntersectAction } from '../../index';import { Theme } from './theme';import { Point, GeoLocation } from '../utils/helper';import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';
+import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';import { SmartLabelMode, IntersectAction } from '../../index';import { Theme } from './theme';import { Point, GeoLocation, Coordinate } from '../utils/helper';import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';
 
 /**
  * Interface for a class Annotation
@@ -7,7 +7,7 @@ export interface AnnotationModel {
 
     /**
      * Gets or sets the content for the annotation in maps.
-     * 
+     *
      * @default ''
      * @aspType string
      */
@@ -15,14 +15,14 @@ export interface AnnotationModel {
 
     /**
      * Gets or sets the x position of the annotation in pixel or percentage format.
-     * 
+     *
      * @default '0px'
      */
     x?: string;
 
     /**
      * Gets or sets the y position of the annotation in pixel or percentage format.
-     * 
+     *
      * @default '0px'
      */
     y?: string;
@@ -57,35 +57,35 @@ export interface ArrowModel {
 
     /**
      * Gets or sets the type of the position to place the arrow in navigation lines.
-     * 
+     *
      * @default 'Start'
      */
     position?: string;
 
     /**
      * Enables or disables the visibility of the arrow in navigation line.
-     * 
+     *
      * @default false
      */
     showArrow?: boolean;
 
     /**
      * Gets or sets the size of the arrow in navigation line in maps.
-     * 
+     *
      * @default 2
      */
     size?: number;
 
     /**
      * Gets or sets the color for the arrow in navigation line.
-     * 
+     *
      * @default 'black'
      */
     color?: string;
 
     /**
      * Gets or sets the offset value to position the arrow from the navigation line.
-     * 
+     *
      * @default 0
      */
     offSet?: number;
@@ -266,26 +266,26 @@ export interface ZoomToolbarTooltipSettingsModel {
      * Gets or sets the font family of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontFamily?: string;
 
     /**
      * Gets or sets the font style of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontStyle?: string;
 
     /**
      * Gets or sets the font weight of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontWeight?: string;
 
     /**
      * Gets or sets the size of the text in the tooltip of the zoom toolbar.
-     * 
+     *
      * @default ''
      */
     fontSize?: string;
@@ -294,7 +294,7 @@ export interface ZoomToolbarTooltipSettingsModel {
      * Gets or sets the font opacity of the text in the tooltip of the zoom toolbar.
      *
      * @default 1
-    */
+     */
     fontOpacity?: number;
 
 }
@@ -539,6 +539,15 @@ export interface MarkerClusterSettingsModel {
      */
     allowClustering?: boolean;
 
+    /**
+     * Enables or disables intense marker clustering for improved accuracy.
+     * The default value is true, and clustering logic will be executed twice for improved accuracy.
+     * If set to false, the clustering logic will only be executed once, increasing performance while maintaining decent accuracy.
+     * 
+     * @default true
+     */
+    allowDeepClustering?: boolean;
+
     /**
      * Gets or sets the options for customizing the style properties of the border of the clusters in maps.
      */
@@ -586,7 +595,7 @@ export interface MarkerClusterSettingsModel {
 
     /**
      * Gets or sets the URL path for the marker cluster when the cluster shape is set as image in maps.
-     * 
+     *
      * @default ''
      */
     imageUrl?: string;
@@ -804,6 +813,78 @@ export interface HighlightSettingsModel {
 
 }
 
+/**
+ * Interface for a class PolygonSetting
+ */
+export interface PolygonSettingModel {
+
+    /**
+     * Gets or sets the width of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderWidth?: number;
+
+    /**
+     * Gets or sets the opacity of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderOpacity?: number;
+
+    /**
+     * Gets or sets the opacity of the polygon shape.
+     *
+     * @default 1
+     */
+    opacity?: number;
+
+    /**
+     * Gets or sets the color to be used in the border of the polygon shape.
+     *
+     * @default 'black'
+     */
+    borderColor?: string;
+
+    /**
+     * Gets or sets the color to be filled in the polygon shape.
+     *
+     * @default 'black'
+     */
+    fill?: string;
+
+    /**
+     * Gets or sets the points that define the polygon shape.
+     * This property holds a collection of coordinates that define the polygon shape.
+     *
+     * @default []
+     */
+    points?: Coordinate[];
+
+}
+
+/**
+ * Interface for a class PolygonSettings
+ */
+export interface PolygonSettingsModel {
+
+    /**
+     * Gets or sets the properties of all the polygon shapes that will be displayed in a layer.
+     */
+    polygons?: PolygonSettingModel[];
+
+    /**
+     * Gets or sets the properties for selecting polygon shapes in a map layer.
+     */
+    selectionSettings?: SelectionSettingsModel;
+
+    /**
+     * Gets or sets the properties for highlighting polygon shapes in a map layer.
+     */
+    highlightSettings?: HighlightSettingsModel;
+
+}
+
 /**
  * Interface for a class NavigationLineSettings
  */
@@ -1098,7 +1179,7 @@ export interface ZoomSettingsModel {
 
     /**
      * Gets or sets the color for the toolbar in maps.
-     * 
+     *
      * @default null
 
      */
@@ -1106,7 +1187,7 @@ export interface ZoomSettingsModel {
 
     /**
      * Gets or sets the color for the zoom toolbar when the mouse has hovered on toolbar element in maps.
-     * 
+     *
      * @default null
 
      */
@@ -1114,7 +1195,7 @@ export interface ZoomSettingsModel {
 
     /**
      * Gets or sets the color for the zooming toolbar when clicking the zooming toolbar in maps.
-     * 
+     *
      * @default null
 
      */
@@ -1193,14 +1274,14 @@ export interface ZoomSettingsModel {
 
     /**
      * Enables or disables the ability to zoom based on the marker position while rendering the maps.
-     * 
+     *
      * @default false
      */
     shouldZoomInitially?: boolean;
 
     /**
      * Enables or disables the zoom to set to the initial State.
-     * 
+     *
      * @default true
      */
     resetToInitial?: boolean;
@@ -1294,7 +1375,7 @@ export interface LegendSettingsModel {
 
     /**
      * Enables or disables the visibility of the inverted pointer in interactive legend in maps.
-     * 
+     *
      * @default false
      */
     invertedPointer?: boolean;
@@ -1408,7 +1489,7 @@ export interface LegendSettingsModel {
 
     /**
      * Gets or sets the color of the legend in maps.
-     * 
+     *
      * @default null
      */
     fill?: string;
@@ -1474,14 +1555,14 @@ export interface DataLabelSettingsModel {
 
     /**
      * Gets or sets the background color for the data labels in maps.
-     * 
+     *
      * @default 'black'
      */
     fill?: string;
 
     /**
      * Gets or sets the opacity of the data labels in maps.
-     * 
+     *
      * @default 1
      */
     opacity?: number;
@@ -1962,6 +2043,12 @@ export interface LayerSettingsModel {
      */
     navigationLineSettings?: NavigationLineSettingsModel[];
 
+    /**
+     * Gets or sets the properties of the polygon shapes that will be rendered on a map layer.
+     * The selection and highlight settings for polygon shapes can also be defined.
+     */
+    polygonSettings?: PolygonSettingsModel;
+
     /**
      * Gets or sets the options for customizing the tooltip of the layers in maps.
      */
@@ -2004,7 +2091,7 @@ export interface MapsAreaSettingsModel {
 
     /**
      * Gets or sets the background color for the map area.
-     * 
+     *
      * @default null
      */
     background?: string;

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

@@ -5,12 +5,12 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';
 import { SmartLabelMode, IntersectAction } from '../../index';
-import { BorderModel, ColorMappingSettingsModel, FontModel, CommonTitleSettingsModel, NavigationLineSettingsModel, ZoomToolbarTooltipSettingsModel } from './base-model';
+import { BorderModel, ColorMappingSettingsModel, FontModel, CommonTitleSettingsModel, NavigationLineSettingsModel, PolygonSettingsModel, ZoomToolbarTooltipSettingsModel } from './base-model';
 import { MarkerSettingsModel, MarkerClusterSettingsModel, ShapeSettingsModel, BubbleSettingsModel, ArrowModel } from './base-model';
-import { DataLabelSettingsModel, TooltipSettingsModel, SubTitleSettingsModel, SelectionSettingsModel } from './base-model';
+import { DataLabelSettingsModel, TooltipSettingsModel, SubTitleSettingsModel, SelectionSettingsModel, PolygonSettingModel } from './base-model';
 import { HighlightSettingsModel, ToggleLegendSettingsModel, ConnectorLineSettingsModel } from './base-model';
 import { InitialShapeSelectionSettingsModel, InitialMarkerSelectionSettingsModel, ZoomToolbarSettingsModel, ZoomToolbarButtonSettingsModel } from './base-model';
-import { Point, GeoLocation } from '../utils/helper';
+import { Point, GeoLocation, Coordinate } from '../utils/helper';
 import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';
 import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';
 /**
@@ -236,19 +236,19 @@ export declare class ZoomToolbarTooltipSettings extends ChildProperty<ZoomToolba
      * Gets or sets the font family of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontFamily: string;
     /**
      * Gets or sets the font style of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontStyle: string;
     /**
      * Gets or sets the font weight of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontWeight: string;
     /**
      * Gets or sets the size of the text in the tooltip of the zoom toolbar.
@@ -260,7 +260,7 @@ export declare class ZoomToolbarTooltipSettings extends ChildProperty<ZoomToolba
      * Gets or sets the font opacity of the text in the tooltip of the zoom toolbar.
      *
      * @default 1
-    */
+     */
     fontOpacity: number;
 }
 /**
@@ -461,6 +461,14 @@ export declare class MarkerClusterSettings extends ChildProperty<MarkerClusterSe
      * @default false
      */
     allowClustering: boolean;
+    /**
+     * Enables or disables intense marker clustering for improved accuracy.
+     * The default value is true, and clustering logic will be executed twice for improved accuracy.
+     * If set to false, the clustering logic will only be executed once, increasing performance while maintaining decent accuracy.
+     *
+     * @default true
+     */
+    allowDeepClustering: boolean;
     /**
      * Gets or sets the options for customizing the style properties of the border of the clusters in maps.
      */
@@ -718,6 +726,66 @@ export declare class HighlightSettings extends ChildProperty<HighlightSettings>
      */
     border: BorderModel;
 }
+/**
+ * Defines the properties for a single polygon shape to render over the Maps, such as coordinates, fill, border, and opacity.
+ */
+export declare class PolygonSetting extends ChildProperty<PolygonSettings> {
+    /**
+     * Gets or sets the width of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderWidth: number;
+    /**
+     * Gets or sets the opacity of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderOpacity: number;
+    /**
+     * Gets or sets the opacity of the polygon shape.
+     *
+     * @default 1
+     */
+    opacity: number;
+    /**
+     * Gets or sets the color to be used in the border of the polygon shape.
+     *
+     * @default 'black'
+     */
+    borderColor: string;
+    /**
+     * Gets or sets the color to be filled in the polygon shape.
+     *
+     * @default 'black'
+     */
+    fill: string;
+    /**
+     * Gets or sets the points that define the polygon shape.
+     * This property holds a collection of coordinates that define the polygon shape.
+     *
+     * @default []
+     */
+    points: Coordinate[];
+}
+/**
+ * Defines the properties of the polygon shapes that will be rendered on a map layer.
+ * The selection and highlight settings for polygon shapes can also be defined.
+ */
+export declare class PolygonSettings extends ChildProperty<PolygonSettings> {
+    /**
+     * Gets or sets the properties of all the polygon shapes that will be displayed in a layer.
+     */
+    polygons: PolygonSettingModel[];
+    /**
+     * Gets or sets the properties for selecting polygon shapes in a map layer.
+     */
+    selectionSettings: SelectionSettingsModel;
+    /**
+     * Gets or sets the properties for highlighting polygon shapes in a map layer.
+     */
+    highlightSettings: HighlightSettingsModel;
+}
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
@@ -1693,6 +1761,11 @@ export declare class LayerSettings extends ChildProperty<LayerSettings> {
      * Gets or sets the options for customizing the navigation lines in maps.
      */
     navigationLineSettings: NavigationLineSettingsModel[];
+    /**
+     * Gets or sets the properties of the polygon shapes that will be rendered on a map layer.
+     * The selection and highlight settings for polygon shapes can also be defined.
+     */
+    polygonSettings: PolygonSettingsModel;
     /**
      * Gets or sets the options for customizing the tooltip of the layers in maps.
      */