@syncfusion/ej2-maps 25.2.5 → 26.1.41

package/dist/es6/ej2-maps.es5.js

@@ -1,9 +1,9 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, animationMode, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, createElement, merge, remove, animationMode, compile, Animation, SanitizeHtmlHelper, Property, ChildProperty, Complex, Collection, extend, Fetch, setValue, Browser, EventHandler, Internationalization, L10n, Event, NotifyPropertyChanges, Component, print } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
+import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
+var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -16,10 +16,6 @@ var __extends$1 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-/* eslint-disable max-len */
-/**
- * Helper functions for maps control
- */
 /**
  * Specifies the size information of an element.
  */
@@ -223,18 +219,20 @@ function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
  */
 function calculatePolygonPath(maps, factor, currentLayer, markerData) {
     var path = '';
-    Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-        var lat = data.latitude;
-        var lng = data.longitude;
-        var location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-        if (dataIndex === 0) {
-            path += 'M ' + location.x + ' ' + location.y;
-        }
-        else {
-            path += ' L ' + location.x + ' ' + location.y;
-        }
-    });
-    path += ' z ';
+    if (!isNullOrUndefined(markerData) && markerData.length > 1) {
+        Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+            var lat = data.latitude;
+            var lng = data.longitude;
+            var location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+            if (dataIndex === 0) {
+                path += 'M ' + location.x + ' ' + location.y;
+            }
+            else {
+                path += ' L ' + location.x + ' ' + location.y;
+            }
+        });
+        path += ' z ';
+    }
     return path;
 }
 /**
@@ -500,7 +498,7 @@ var ColorValue = /** @__PURE__ @class */ (function () {
  * @private
  */
 var RectOption = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(RectOption, _super);
+    __extends(RectOption, _super);
     function RectOption(id, fill, border, fillOpacity, rect, rx, ry, transform, dashArray) {
         var _this = _super.call(this, id, fill, border.width, border.color, fillOpacity, border.opacity) || this;
         _this.y = rect.y;
@@ -523,7 +521,7 @@ var RectOption = /** @__PURE__ @class */ (function (_super) {
  * @private
  */
 var CircleOption = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(CircleOption, _super);
+    __extends(CircleOption, _super);
     function CircleOption(id, fill, border, fillOpacity, cx, cy, r, dashArray) {
         var _this = _super.call(this, id, fill, border.width, border.color, fillOpacity, border.opacity, dashArray) || this;
         _this.cy = cy;
@@ -542,7 +540,7 @@ var CircleOption = /** @__PURE__ @class */ (function (_super) {
  * @private
  */
 var PolygonOption = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(PolygonOption, _super);
+    __extends(PolygonOption, _super);
     function PolygonOption(id, points, fill, width, color, fillOpacity, strokeOpacity, dashArray) {
         if (fillOpacity === void 0) { fillOpacity = 1; }
         if (strokeOpacity === void 0) { strokeOpacity = 1; }
@@ -559,7 +557,7 @@ var PolygonOption = /** @__PURE__ @class */ (function (_super) {
  * @private
  */
 var PolylineOption = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(PolylineOption, _super);
+    __extends(PolylineOption, _super);
     function PolylineOption(id, points, fill, width, color, fillOpacity, strokeOpacity, dashArray) {
         if (fillOpacity === void 0) { fillOpacity = 1; }
         if (strokeOpacity === void 0) { strokeOpacity = 1; }
@@ -574,7 +572,7 @@ var PolylineOption = /** @__PURE__ @class */ (function (_super) {
  * @private
  */
 var LineOption = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(LineOption, _super);
+    __extends(LineOption, _super);
     function LineOption(id, line, fill, width, color, fillOpacity, strokeOpacity, dashArray) {
         if (fillOpacity === void 0) { fillOpacity = 1; }
         if (strokeOpacity === void 0) { strokeOpacity = 1; }
@@ -1414,15 +1412,6 @@ function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, mark
         markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - maps.mapAreaRect.x + 'px';
         markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - maps.mapAreaRect.y + 'px';
         markerTemplate.appendChild(markerElement);
-        if (maps.layers[maps.baseLayerIndex].layerType === 'GoogleStaticMap') {
-            var staticMapOffset = getElementByID(maps.element.id + '_StaticGoogleMap').getBoundingClientRect();
-            var markerElementOffset = markerElement.getBoundingClientRect();
-            var staticMapOffsetWidth = 640;
-            if ((staticMapOffset['x'] > markerElementOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < markerElementOffset['x'] + markerElementOffset['width'])
-                && (staticMapOffset['y'] > markerElementOffset['y'] || staticMapOffset['y'] + staticMapOffset['height'] < markerElementOffset['y'] + markerElementOffset['height'])) {
-                markerElement.style.display = 'none';
-            }
-        }
     }
     return markerTemplate;
 }
@@ -1847,7 +1836,7 @@ function getFieldData(dataSource, fields) {
 function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 layer) {
-    if (!(isNullOrUndefined(properties))) {
+    if (!(isNullOrUndefined(properties)) && !isNullOrUndefined(dataSource)) {
         for (var i = 0; i < dataSource.length; i++) {
             var shapeDataPath = ((dataPath.indexOf('.') > -1) ? getValueFromObject(dataSource[i], dataPath) :
                 dataSource[i][dataPath]);
@@ -2471,8 +2460,7 @@ function getZoomTranslate(mapObject, layer, animate) {
  */
 function fixInitialScaleForTile(map) {
     map.tileZoomScale = map.tileZoomLevel = Math.floor(map.availableSize.height / 512) + 1;
-    var padding = map.layers[map.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
-        20 : 0;
+    var padding = 20;
     var totalSize = Math.pow(2, map.tileZoomLevel) * 256;
     map.tileTranslatePoint.x = (map.availableSize.width / 2) - (totalSize / 2);
     map.tileTranslatePoint.y = (map.availableSize.height / 2) - (totalSize / 2) + padding;
@@ -2576,7 +2564,7 @@ function getShapeData(targetId, map) {
     var data;
     if (layer.dataSource) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        data = layer.dataSource[checkShapeDataFields(layer.dataSource, shapeData, layer.shapeDataPath, layer.shapePropertyPath, layer)];
+        data = layer.dataSource[checkShapeDataFields(layer.dataSource, shapeData, layer.shapeDataPath, layer.shapePropertyPath)];
     }
     return { shapeData: shapeData, data: data };
 }
@@ -3608,7 +3596,7 @@ var Theme;
     };
     /** @private */
     Theme.dataLabelFont = {
-        size: '12px',
+        size: null,
         fontWeight: 'Medium',
         color: '#000000',
         fontStyle: 'Medium',
@@ -3761,6 +3749,15 @@ function getShapeColor(theme) {
             themePalette = ['#4EAAFF', '#FA4EAB', '#FFF500', '#17EA58', '#38FFE7',
                 '#FF9E45', '#B3F32F', '#B93CE4', '#FC5664', '#9B55FF'];
             break;
+        case 'fluent2':
+            themePalette = ['#6200EE', '#09AF74', '#0076E5', '#CB3587', '#E7910F',
+                '#0364DE', '#66CD15', '#F3A93C', '#107C10', '#C19C00'];
+            break;
+        case 'fluent2dark':
+        case 'fluent2highcontrast':
+            themePalette = ['#9BB449', '#2A72D5', '#43B786', '#3F579A', '#584EC6',
+                '#E85F9C', '#6E7A89', '#EA6266', '#0B6A0B', '#C19C00'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -3816,7 +3813,7 @@ var HighContrastTheme;
     };
     /** @private */
     HighContrastTheme.dataLabelFont = {
-        size: '12px',
+        size: null,
         fontWeight: 'Medium',
         color: '#000000',
         fontStyle: 'Medium',
@@ -3910,13 +3907,19 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 fontSize: '12px',
+                legendFontSize: '12px',
                 fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'highcontrast':
@@ -3934,14 +3937,20 @@ function getThemeStyle(theme) {
                 zoomFillColor: '#FFFFFF',
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 fontSize: '12px',
+                legendFontSize: '12px',
                 fontWeight: 'Medium',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'bootstrap4':
@@ -3967,9 +3976,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'tailwind':
@@ -3995,9 +4009,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: '500',
                 zoomSelectionColor: '#374151',
                 shapeFill: '#E5E7EB',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'tailwinddark':
@@ -4023,9 +4042,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: '500',
                 zoomSelectionColor: '#F3F4F6',
                 shapeFill: '#374151',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'bootstrap5':
@@ -4051,9 +4075,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#343A40',
                 shapeFill: '#E9ECEF',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'bootstrap5dark':
@@ -4079,9 +4108,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#DEE2E6',
                 shapeFill: '#495057',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'fluent':
@@ -4107,9 +4141,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: '600',
                 zoomSelectionColor: '#323130',
                 shapeFill: '#F3F2F1',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'fluentdark':
@@ -4135,9 +4174,14 @@ function getThemeStyle(theme) {
                 titleFontWeight: '600',
                 zoomSelectionColor: '#F3F2F1',
                 shapeFill: '#252423',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'material3':
@@ -4164,9 +4208,14 @@ function getThemeStyle(theme) {
                 fontWeight: '400',
                 zoomSelectionColor: '#49454E',
                 shapeFill: '#E7E0EC',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#6750A4',
                 rectangleZoomFillOpacity: 0.24,
-                rectangleZoomBorderColor: '#6750A4'
+                rectangleZoomBorderColor: '#6750A4',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'material3dark':
@@ -4193,9 +4242,117 @@ function getThemeStyle(theme) {
                 fontWeight: '400',
                 zoomSelectionColor: '#E6E1E5',
                 shapeFill: '#49454F',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#D0BCFF',
                 rectangleZoomFillOpacity: 0.24,
-                rectangleZoomBorderColor: '#D0BCFF'
+                rectangleZoomBorderColor: '#D0BCFF',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
+            };
+            break;
+        case 'fluent2':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#242424',
+                subTitleFontColor: '#242424',
+                legendTitleFontColor: '#242424',
+                legendTextColor: '#242424',
+                dataLabelFontColor: '#242424',
+                tooltipFontColor: '#242424',
+                tooltipFillColor: '#FFFFFF',
+                zoomFillColor: '#D1D1D1',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                subTitleFontSize: '12px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#242424',
+                shapeFill: '#E6E6E6',
+                shapeBorderColor: '#EBEBEB',
+                rectangleZoomFillColor: '#B4D6FA',
+                rectangleZoomFillOpacity: 0.25,
+                rectangleZoomBorderColor: '#0F6CBD',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 32
+            };
+            break;
+        case 'fluent2dark':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFillColor: '#292929',
+                zoomFillColor: '#666',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                subTitleFontSize: '12px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#FFFFFF',
+                shapeFill: '#333333',
+                shapeBorderColor: '#000000',
+                rectangleZoomFillColor: '#0E4775',
+                rectangleZoomFillOpacity: 0.25,
+                rectangleZoomBorderColor: '#0E4775',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 32
+            };
+            break;
+        case 'fluent2highcontrast':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFillColor: '#000000',
+                zoomFillColor: '#3FF23F',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                subTitleFontSize: '12px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#FFFFFF',
+                zoomBorderColor: '#FFFFFF',
+                shapeFill: '#292827',
+                shapeBorderColor: '#292827',
+                rectangleZoomFillColor: '#1AEBFF',
+                rectangleZoomFillOpacity: 0.25,
+                rectangleZoomBorderColor: '#1AEBFF',
+                legendBorderColor: '#FFFFFF',
+                legendBorderWidth: 1,
+                tooltipBorderColor: '#FFF',
+                zoomButtonRadius: 32
             };
             break;
         default:
@@ -4214,20 +4371,26 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 fontSize: '12px',
+                legendFontSize: '12px',
                 fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
     }
     return style;
 }
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
+var __extends$1 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -4240,40 +4403,36 @@ var __extends$2 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable max-len */
-/**
- * Maps base document
- */
 /**
  * Gets or sets the options for customizing the annotation element in maps.
  */
 var Annotation = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(Annotation, _super);
+    __extends$1(Annotation, _super);
     function Annotation() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('')
     ], Annotation.prototype, "content", void 0);
-    __decorate$1([
+    __decorate([
         Property('0px')
     ], Annotation.prototype, "x", void 0);
-    __decorate$1([
+    __decorate([
         Property('0px')
     ], Annotation.prototype, "y", void 0);
-    __decorate$1([
+    __decorate([
         Property('None')
     ], Annotation.prototype, "verticalAlignment", void 0);
-    __decorate$1([
+    __decorate([
         Property('None')
     ], Annotation.prototype, "horizontalAlignment", void 0);
-    __decorate$1([
+    __decorate([
         Property('-1')
     ], Annotation.prototype, "zIndex", void 0);
     return Annotation;
@@ -4282,23 +4441,23 @@ var Annotation = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the arrow in the navigation line.
  */
 var Arrow = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(Arrow, _super);
+    __extends$1(Arrow, _super);
     function Arrow() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('Start')
     ], Arrow.prototype, "position", void 0);
-    __decorate$1([
+    __decorate([
         Property('false')
     ], Arrow.prototype, "showArrow", void 0);
-    __decorate$1([
+    __decorate([
         Property(2)
     ], Arrow.prototype, "size", void 0);
-    __decorate$1([
+    __decorate([
         Property('black')
     ], Arrow.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], Arrow.prototype, "offSet", void 0);
     return Arrow;
@@ -4307,26 +4466,26 @@ var Arrow = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the style of the text in data label, legend and other texts in maps.
  */
 var Font = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(Font, _super);
+    __extends$1(Font, _super);
     function Font() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
-        Property('12px')
+    __decorate([
+        Property(null)
     ], Font.prototype, "size", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], Font.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property('Roboto, Noto, Sans-serif')
     ], Font.prototype, "fontFamily", void 0);
-    __decorate$1([
+    __decorate([
         Property('Medium')
     ], Font.prototype, "fontWeight", void 0);
-    __decorate$1([
+    __decorate([
         Property('Medium')
     ], Font.prototype, "fontStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], Font.prototype, "opacity", void 0);
     return Font;
@@ -4335,41 +4494,41 @@ var Font = /** @__PURE__ @class */ (function (_super) {
  * Specifies the options to customize the buttons in the zoom toolbar.
  */
 var ZoomToolbarButtonSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ZoomToolbarButtonSettings, _super);
+    __extends$1(ZoomToolbarButtonSettings, _super);
     function ZoomToolbarButtonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('transparent')
     ], ZoomToolbarButtonSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ZoomToolbarButtonSettings.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarButtonSettings.prototype, "borderOpacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarButtonSettings.prototype, "borderWidth", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ZoomToolbarButtonSettings.prototype, "borderColor", void 0);
-    __decorate$1([
-        Property(30)
+    __decorate([
+        Property(null)
     ], ZoomToolbarButtonSettings.prototype, "radius", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ZoomToolbarButtonSettings.prototype, "selectionColor", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ZoomToolbarButtonSettings.prototype, "highlightColor", void 0);
-    __decorate$1([
+    __decorate([
         Property(5)
     ], ZoomToolbarButtonSettings.prototype, "padding", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarButtonSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(['ZoomIn', 'ZoomOut', 'Reset'])
     ], ZoomToolbarButtonSettings.prototype, "toolbarItems", void 0);
     return ZoomToolbarButtonSettings;
@@ -4378,41 +4537,41 @@ var ZoomToolbarButtonSettings = /** @__PURE__ @class */ (function (_super) {
  * Specifies the options to customize the tooltip of the zoom toolbar.
  */
 var ZoomToolbarTooltipSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ZoomToolbarTooltipSettings, _super);
+    __extends$1(ZoomToolbarTooltipSettings, _super);
     function ZoomToolbarTooltipSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ZoomToolbarTooltipSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property('white')
     ], ZoomToolbarTooltipSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarTooltipSettings.prototype, "borderOpacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarTooltipSettings.prototype, "borderWidth", void 0);
-    __decorate$1([
+    __decorate([
         Property('#707070')
     ], ZoomToolbarTooltipSettings.prototype, "borderColor", void 0);
-    __decorate$1([
+    __decorate([
         Property('black')
     ], ZoomToolbarTooltipSettings.prototype, "fontColor", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], ZoomToolbarTooltipSettings.prototype, "fontFamily", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], ZoomToolbarTooltipSettings.prototype, "fontStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], ZoomToolbarTooltipSettings.prototype, "fontWeight", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], ZoomToolbarTooltipSettings.prototype, "fontSize", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarTooltipSettings.prototype, "fontOpacity", void 0);
     return ZoomToolbarTooltipSettings;
@@ -4421,35 +4580,35 @@ var ZoomToolbarTooltipSettings = /** @__PURE__ @class */ (function (_super) {
  * Sets and gets the options to customize the border of the zoom toolbar.
  */
 var ZoomToolbarSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ZoomToolbarSettings, _super);
+    __extends$1(ZoomToolbarSettings, _super);
     function ZoomToolbarSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('transparent')
     ], ZoomToolbarSettings.prototype, "backgroundColor", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarSettings.prototype, "borderOpacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomToolbarSettings.prototype, "borderWidth", void 0);
-    __decorate$1([
+    __decorate([
         Property('transparent')
     ], ZoomToolbarSettings.prototype, "borderColor", void 0);
-    __decorate$1([
+    __decorate([
         Property('Far')
     ], ZoomToolbarSettings.prototype, "horizontalAlignment", void 0);
-    __decorate$1([
+    __decorate([
         Property('Near')
     ], ZoomToolbarSettings.prototype, "verticalAlignment", void 0);
-    __decorate$1([
+    __decorate([
         Property('Horizontal')
     ], ZoomToolbarSettings.prototype, "orientation", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ZoomToolbarButtonSettings)
     ], ZoomToolbarSettings.prototype, "buttonSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ZoomToolbarTooltipSettings)
     ], ZoomToolbarSettings.prototype, "tooltipSettings", void 0);
     return ZoomToolbarSettings;
@@ -4458,17 +4617,17 @@ var ZoomToolbarSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the border of the maps.
  */
 var Border = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(Border, _super);
+    __extends$1(Border, _super);
     function Border() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('')
     ], Border.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], Border.prototype, "width", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], Border.prototype, "opacity", void 0);
     return Border;
@@ -4477,14 +4636,14 @@ var Border = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the values to change the center position of the maps.
  */
 var CenterPosition = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(CenterPosition, _super);
+    __extends$1(CenterPosition, _super);
     function CenterPosition() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], CenterPosition.prototype, "latitude", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], CenterPosition.prototype, "longitude", void 0);
     return CenterPosition;
@@ -4493,32 +4652,32 @@ var CenterPosition = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the tooltip of layers, markers, and bubble in maps.
  */
 var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(TooltipSettings, _super);
+    __extends$1(TooltipSettings, _super);
     function TooltipSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], TooltipSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], TooltipSettings.prototype, "template", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], TooltipSettings.prototype, "fill", void 0);
-    __decorate$1([
-        Complex({ color: 'transparent', width: 1 }, Border)
+    __decorate([
+        Complex({ color: null, width: 1 }, Border)
     ], TooltipSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], TooltipSettings.prototype, "textStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], TooltipSettings.prototype, "format", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], TooltipSettings.prototype, "valuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(2000)
     ], TooltipSettings.prototype, "duration", void 0);
     return TooltipSettings;
@@ -4527,23 +4686,23 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
  * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
  */
 var PolygonTooltipSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(PolygonTooltipSettings, _super);
+    __extends$1(PolygonTooltipSettings, _super);
     function PolygonTooltipSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], PolygonTooltipSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], PolygonTooltipSettings.prototype, "fill", void 0);
-    __decorate$1([
-        Complex({ color: 'transparent', width: 1 }, Border)
+    __decorate([
+        Complex({ color: null, width: 1 }, Border)
     ], PolygonTooltipSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], PolygonTooltipSettings.prototype, "textStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property(2000)
     ], PolygonTooltipSettings.prototype, "duration", void 0);
     return PolygonTooltipSettings;
@@ -4552,20 +4711,20 @@ var PolygonTooltipSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the margin of the maps.
  */
 var Margin = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(Margin, _super);
+    __extends$1(Margin, _super);
     function Margin() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(10)
     ], Margin.prototype, "left", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], Margin.prototype, "right", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], Margin.prototype, "top", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], Margin.prototype, "bottom", void 0);
     return Margin;
@@ -4574,17 +4733,17 @@ var Margin = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the lines that connect the markers in marker cluster of the maps.
  */
 var ConnectorLineSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ConnectorLineSettings, _super);
+    __extends$1(ConnectorLineSettings, _super);
     function ConnectorLineSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('#000000')
     ], ConnectorLineSettings.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ConnectorLineSettings.prototype, "width", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ConnectorLineSettings.prototype, "opacity", void 0);
     return ConnectorLineSettings;
@@ -4593,50 +4752,50 @@ var ConnectorLineSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the cluster of markers in maps.
  */
 var MarkerClusterSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(MarkerClusterSettings, _super);
+    __extends$1(MarkerClusterSettings, _super);
     function MarkerClusterSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], MarkerClusterSettings.prototype, "allowClustering", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], MarkerClusterSettings.prototype, "allowDeepClustering", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ color: 'transparent', width: 1 }, Border)
     ], MarkerClusterSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Property('#D2691E')
     ], MarkerClusterSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], MarkerClusterSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property('Rectangle')
     ], MarkerClusterSettings.prototype, "shape", void 0);
-    __decorate$1([
+    __decorate([
         Property(12)
     ], MarkerClusterSettings.prototype, "width", void 0);
-    __decorate$1([
+    __decorate([
         Property(12)
     ], MarkerClusterSettings.prototype, "height", void 0);
-    __decorate$1([
+    __decorate([
         Property(new Point(0, 0))
     ], MarkerClusterSettings.prototype, "offset", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], MarkerClusterSettings.prototype, "imageUrl", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], MarkerClusterSettings.prototype, "dashArray", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, Font)
     ], MarkerClusterSettings.prototype, "labelStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], MarkerClusterSettings.prototype, "allowClusterExpand", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ConnectorLineSettings)
     ], MarkerClusterSettings.prototype, "connectorLineSettings", void 0);
     return MarkerClusterSettings;
@@ -4645,7 +4804,7 @@ var MarkerClusterSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the data in the marker cluster.
  */
 var MarkerClusterData = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(MarkerClusterData, _super);
+    __extends$1(MarkerClusterData, _super);
     function MarkerClusterData() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -4655,32 +4814,32 @@ var MarkerClusterData = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the color-mapping in maps.
  */
 var ColorMappingSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ColorMappingSettings, _super);
+    __extends$1(ColorMappingSettings, _super);
     function ColorMappingSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "from", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "to", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "value", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "minOpacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "maxOpacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ColorMappingSettings.prototype, "label", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ColorMappingSettings.prototype, "showLegend", void 0);
     return ColorMappingSettings;
@@ -4690,14 +4849,14 @@ var ColorMappingSettings = /** @__PURE__ @class */ (function (_super) {
  * The initial selection of the markers will work only when the selection settings of marker is enabled.
  */
 var InitialMarkerSelectionSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(InitialMarkerSelectionSettings, _super);
+    __extends$1(InitialMarkerSelectionSettings, _super);
     function InitialMarkerSelectionSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], InitialMarkerSelectionSettings.prototype, "latitude", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], InitialMarkerSelectionSettings.prototype, "longitude", void 0);
     return InitialMarkerSelectionSettings;
@@ -4707,14 +4866,14 @@ var InitialMarkerSelectionSettings = /** @__PURE__ @class */ (function (_super)
  * The initial selection of the shapes will work only when the selection settings of layer is enabled.
  */
 var InitialShapeSelectionSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(InitialShapeSelectionSettings, _super);
+    __extends$1(InitialShapeSelectionSettings, _super);
     function InitialShapeSelectionSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], InitialShapeSelectionSettings.prototype, "shapePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], InitialShapeSelectionSettings.prototype, "shapeValue", void 0);
     return InitialShapeSelectionSettings;
@@ -4723,23 +4882,23 @@ var InitialShapeSelectionSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the maps on selecting the shapes.
  */
 var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(SelectionSettings, _super);
+    __extends$1(SelectionSettings, _super);
     function SelectionSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], SelectionSettings.prototype, "enable", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], SelectionSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], SelectionSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], SelectionSettings.prototype, "enableMultiSelect", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ color: 'transparent', width: 0 }, Border)
     ], SelectionSettings.prototype, "border", void 0);
     return SelectionSettings;
@@ -4748,20 +4907,20 @@ var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the shapes on which the mouse has hovered in maps.
  */
 var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(HighlightSettings, _super);
+    __extends$1(HighlightSettings, _super);
     function HighlightSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], HighlightSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], HighlightSettings.prototype, "enable", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], HighlightSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ color: 'transparent', width: 0 }, Border)
     ], HighlightSettings.prototype, "border", void 0);
     return HighlightSettings;
@@ -4770,32 +4929,32 @@ var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
  * Defines the properties for a single polygon shape to render over the Maps, such as coordinates, fill, border, and opacity.
  */
 var PolygonSetting = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(PolygonSetting, _super);
+    __extends$1(PolygonSetting, _super);
     function PolygonSetting() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(1)
     ], PolygonSetting.prototype, "borderWidth", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], PolygonSetting.prototype, "borderOpacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], PolygonSetting.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property('#FF471A')
     ], PolygonSetting.prototype, "borderColor", void 0);
-    __decorate$1([
+    __decorate([
         Property('#FF471A')
     ], PolygonSetting.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property([])
     ], PolygonSetting.prototype, "points", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], PolygonSetting.prototype, "tooltipText", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], PolygonSetting.prototype, "tooltipTemplate", void 0);
     return PolygonSetting;
@@ -4805,20 +4964,20 @@ var PolygonSetting = /** @__PURE__ @class */ (function (_super) {
  * The selection and highlight settings for polygon shapes can also be defined.
  */
 var PolygonSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(PolygonSettings, _super);
+    __extends$1(PolygonSettings, _super);
     function PolygonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Collection([], PolygonSetting)
     ], PolygonSettings.prototype, "polygons", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, SelectionSettings)
     ], PolygonSettings.prototype, "selectionSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, HighlightSettings)
     ], PolygonSettings.prototype, "highlightSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, PolygonTooltipSettings)
     ], PolygonSettings.prototype, "tooltipSettings", void 0);
     return PolygonSettings;
@@ -4827,38 +4986,38 @@ var PolygonSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
 var NavigationLineSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(NavigationLineSettings, _super);
+    __extends$1(NavigationLineSettings, _super);
     function NavigationLineSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], NavigationLineSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], NavigationLineSettings.prototype, "width", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], NavigationLineSettings.prototype, "longitude", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], NavigationLineSettings.prototype, "latitude", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], NavigationLineSettings.prototype, "dashArray", void 0);
-    __decorate$1([
+    __decorate([
         Property('black')
     ], NavigationLineSettings.prototype, "color", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], NavigationLineSettings.prototype, "angle", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ showArrow: false, position: 'Start', size: 5, color: 'black' }, Arrow)
     ], NavigationLineSettings.prototype, "arrowSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, SelectionSettings)
     ], NavigationLineSettings.prototype, "selectionSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, HighlightSettings)
     ], NavigationLineSettings.prototype, "highlightSettings", void 0);
     return NavigationLineSettings;
@@ -4867,59 +5026,59 @@ var NavigationLineSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the bubble elements in the maps.
  */
 var BubbleSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(BubbleSettings, _super);
+    __extends$1(BubbleSettings, _super);
     function BubbleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Complex({}, Border)
     ], BubbleSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], BubbleSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property([])
     ], BubbleSettings.prototype, "dataSource", void 0);
-    __decorate$1([
+    __decorate([
         Property()
     ], BubbleSettings.prototype, "query", void 0);
-    __decorate$1([
+    __decorate([
         Property(1000)
     ], BubbleSettings.prototype, "animationDuration", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], BubbleSettings.prototype, "animationDelay", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], BubbleSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], BubbleSettings.prototype, "minRadius", void 0);
-    __decorate$1([
+    __decorate([
         Property(20)
     ], BubbleSettings.prototype, "maxRadius", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], BubbleSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], BubbleSettings.prototype, "valuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property('Circle')
     ], BubbleSettings.prototype, "bubbleType", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], BubbleSettings.prototype, "colorValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], ColorMappingSettings)
     ], BubbleSettings.prototype, "colorMapping", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, TooltipSettings)
     ], BubbleSettings.prototype, "tooltipSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, SelectionSettings)
     ], BubbleSettings.prototype, "selectionSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, HighlightSettings)
     ], BubbleSettings.prototype, "highlightSettings", void 0);
     return BubbleSettings;
@@ -4928,14 +5087,14 @@ var BubbleSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the title of the maps.
  */
 var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(CommonTitleSettings, _super);
+    __extends$1(CommonTitleSettings, _super);
     function CommonTitleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property('')
     ], CommonTitleSettings.prototype, "text", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], CommonTitleSettings.prototype, "description", void 0);
     return CommonTitleSettings;
@@ -4944,14 +5103,14 @@ var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the subtitle of the maps.
  */
 var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(SubTitleSettings, _super);
+    __extends$1(SubTitleSettings, _super);
     function SubTitleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
     ], SubTitleSettings.prototype, "textStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property('Center')
     ], SubTitleSettings.prototype, "alignment", void 0);
     return SubTitleSettings;
@@ -4960,17 +5119,17 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the title of the maps.
  */
 var TitleSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(TitleSettings, _super);
+    __extends$1(TitleSettings, _super);
     function TitleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
     ], TitleSettings.prototype, "textStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property('Center')
     ], TitleSettings.prototype, "alignment", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, SubTitleSettings)
     ], TitleSettings.prototype, "subtitleSettings", void 0);
     return TitleSettings;
@@ -4979,68 +5138,47 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to configure maps zooming operations.
  */
 var ZoomSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ZoomSettings, _super);
+    __extends$1(ZoomSettings, _super);
     function ZoomSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], ZoomSettings.prototype, "enable", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ZoomSettings.prototype, "enablePanning", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ZoomSettings.prototype, "enableSelectionZooming", void 0);
-    __decorate$1([
-        Property('Horizontal')
-    ], ZoomSettings.prototype, "toolBarOrientation", void 0);
-    __decorate$1([
-        Property(null)
-    ], ZoomSettings.prototype, "color", void 0);
-    __decorate$1([
-        Property(null)
-    ], ZoomSettings.prototype, "highlightColor", void 0);
-    __decorate$1([
-        Property(null)
-    ], ZoomSettings.prototype, "selectionColor", void 0);
-    __decorate$1([
-        Property('Far')
-    ], ZoomSettings.prototype, "horizontalAlignment", void 0);
-    __decorate$1([
-        Property('Near')
-    ], ZoomSettings.prototype, "verticalAlignment", void 0);
-    __decorate$1([
-        Property(['ZoomIn', 'ZoomOut', 'Reset'])
-    ], ZoomSettings.prototype, "toolbars", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ZoomSettings.prototype, "mouseWheelZoom", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], ZoomSettings.prototype, "doubleClickZoom", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ZoomSettings.prototype, "pinchZooming", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], ZoomSettings.prototype, "zoomOnClick", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomSettings.prototype, "zoomFactor", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], ZoomSettings.prototype, "maxZoom", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ZoomSettings.prototype, "minZoom", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], ZoomSettings.prototype, "shouldZoomInitially", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ZoomSettings.prototype, "resetToInitial", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ZoomToolbarSettings)
     ], ZoomSettings.prototype, "toolbarSettings", void 0);
     return ZoomSettings;
@@ -5049,23 +5187,23 @@ var ZoomSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the settings to customize the color-mapping visibility based on the legend visibility.
  */
 var ToggleLegendSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ToggleLegendSettings, _super);
+    __extends$1(ToggleLegendSettings, _super);
     function ToggleLegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], ToggleLegendSettings.prototype, "enable", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], ToggleLegendSettings.prototype, "applyShapeSettings", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ToggleLegendSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], ToggleLegendSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ color: '', width: 0 }, Border)
     ], ToggleLegendSettings.prototype, "border", void 0);
     return ToggleLegendSettings;
@@ -5074,98 +5212,98 @@ var ToggleLegendSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the legend of the maps.
  */
 var LegendSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(LegendSettings, _super);
+    __extends$1(LegendSettings, _super);
     function LegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], LegendSettings.prototype, "useMarkerShape", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], LegendSettings.prototype, "toggleVisibility", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], LegendSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property('transparent')
     ], LegendSettings.prototype, "background", void 0);
-    __decorate$1([
+    __decorate([
         Property('Layers')
     ], LegendSettings.prototype, "type", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], LegendSettings.prototype, "invertedPointer", void 0);
-    __decorate$1([
+    __decorate([
         Property('After')
     ], LegendSettings.prototype, "labelPosition", void 0);
-    __decorate$1([
+    __decorate([
         Property('None')
     ], LegendSettings.prototype, "labelDisplayMode", void 0);
-    __decorate$1([
+    __decorate([
         Property('Circle')
     ], LegendSettings.prototype, "shape", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], LegendSettings.prototype, "width", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], LegendSettings.prototype, "height", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ fontFamily: null, fontWeight: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property(15)
     ], LegendSettings.prototype, "shapeWidth", void 0);
-    __decorate$1([
+    __decorate([
         Property(15)
     ], LegendSettings.prototype, "shapeHeight", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], LegendSettings.prototype, "shapePadding", void 0);
-    __decorate$1([
-        Complex({ color: '#000000', width: 0 }, Border)
+    __decorate([
+        Complex({ color: null, width: 0 }, Border)
     ], LegendSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ color: '#000000', width: 0 }, Border)
     ], LegendSettings.prototype, "shapeBorder", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ size: null, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: null, fontFamily: null }, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property('Bottom')
     ], LegendSettings.prototype, "position", void 0);
-    __decorate$1([
+    __decorate([
         Property('Center')
     ], LegendSettings.prototype, "alignment", void 0);
-    __decorate$1([
+    __decorate([
         Property('None')
     ], LegendSettings.prototype, "orientation", void 0);
-    __decorate$1([
+    __decorate([
         Property({ x: 0, y: 0 })
     ], LegendSettings.prototype, "location", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], LegendSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], LegendSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property('Default')
     ], LegendSettings.prototype, "mode", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], LegendSettings.prototype, "showLegendPath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], LegendSettings.prototype, "valuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], LegendSettings.prototype, "removeDuplicateLegend", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ToggleLegendSettings)
     ], LegendSettings.prototype, "toggleLegendSettings", void 0);
     return LegendSettings;
@@ -5174,44 +5312,44 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the data labels in maps.
  */
 var DataLabelSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(DataLabelSettings, _super);
+    __extends$1(DataLabelSettings, _super);
     function DataLabelSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(false)
     ], DataLabelSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ width: 0, color: 'transparent' }, Border)
     ], DataLabelSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Property('black')
     ], DataLabelSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], DataLabelSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(5)
     ], DataLabelSettings.prototype, "rx", void 0);
-    __decorate$1([
+    __decorate([
         Property(5)
     ], DataLabelSettings.prototype, "ry", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ fontWeight: null }, Font)
     ], DataLabelSettings.prototype, "textStyle", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], DataLabelSettings.prototype, "labelPath", void 0);
-    __decorate$1([
+    __decorate([
         Property('None')
     ], DataLabelSettings.prototype, "smartLabelMode", void 0);
-    __decorate$1([
+    __decorate([
         Property('None')
     ], DataLabelSettings.prototype, "intersectionAction", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], DataLabelSettings.prototype, "template", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], DataLabelSettings.prototype, "animationDuration", void 0);
     return DataLabelSettings;
@@ -5220,44 +5358,44 @@ var DataLabelSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the shapes in the maps.
  */
 var ShapeSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(ShapeSettings, _super);
+    __extends$1(ShapeSettings, _super);
     function ShapeSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ShapeSettings.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property([])
     ], ShapeSettings.prototype, "palette", void 0);
-    __decorate$1([
+    __decorate([
         Property(5)
     ], ShapeSettings.prototype, "circleRadius", void 0);
-    __decorate$1([
-        Complex({ width: null, color: '#000000' }, Border)
+    __decorate([
+        Complex({ width: null, color: null }, Border)
     ], ShapeSettings.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], ShapeSettings.prototype, "dashArray", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], ShapeSettings.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ShapeSettings.prototype, "colorValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ShapeSettings.prototype, "borderColorValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ShapeSettings.prototype, "borderWidthValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], ShapeSettings.prototype, "valuePath", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], ColorMappingSettings)
     ], ShapeSettings.prototype, "colorMapping", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], ShapeSettings.prototype, "autofill", void 0);
     return ShapeSettings;
@@ -5266,86 +5404,86 @@ var ShapeSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the markers in the maps.
  */
 var MarkerBase = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(MarkerBase, _super);
+    __extends$1(MarkerBase, _super);
     function MarkerBase() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Complex({ color: 'transparent', width: 1 }, Border)
     ], MarkerBase.prototype, "border", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "dashArray", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], MarkerBase.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property(false)
     ], MarkerBase.prototype, "enableDrag", void 0);
-    __decorate$1([
+    __decorate([
         Property('#FF471A')
     ], MarkerBase.prototype, "fill", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], MarkerBase.prototype, "height", void 0);
-    __decorate$1([
+    __decorate([
         Property(10)
     ], MarkerBase.prototype, "width", void 0);
-    __decorate$1([
+    __decorate([
         Property(1)
     ], MarkerBase.prototype, "opacity", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "colorValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "shapeValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "imageUrlValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property('Balloon')
     ], MarkerBase.prototype, "shape", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], MarkerBase.prototype, "legendText", void 0);
-    __decorate$1([
+    __decorate([
         Property(new Point(0, 0))
     ], MarkerBase.prototype, "offset", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], MarkerBase.prototype, "imageUrl", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "template", void 0);
-    __decorate$1([
+    __decorate([
         Property([])
     ], MarkerBase.prototype, "dataSource", void 0);
-    __decorate$1([
+    __decorate([
         Property()
     ], MarkerBase.prototype, "query", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, TooltipSettings)
     ], MarkerBase.prototype, "tooltipSettings", void 0);
-    __decorate$1([
+    __decorate([
         Property(1000)
     ], MarkerBase.prototype, "animationDuration", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], MarkerBase.prototype, "animationDelay", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, SelectionSettings)
     ], MarkerBase.prototype, "selectionSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, HighlightSettings)
     ], MarkerBase.prototype, "highlightSettings", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "latitudeValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MarkerBase.prototype, "longitudeValuePath", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], InitialMarkerSelectionSettings)
     ], MarkerBase.prototype, "initialMarkerSelection", void 0);
     return MarkerBase;
@@ -5354,7 +5492,7 @@ var MarkerBase = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the markers in the maps.
  */
 var MarkerSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(MarkerSettings, _super);
+    __extends$1(MarkerSettings, _super);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function MarkerSettings(parent, propName, defaultValue, isArray) {
         return _super.call(this, parent, propName, defaultValue, isArray) || this;
@@ -5365,7 +5503,7 @@ var MarkerSettings = /** @__PURE__ @class */ (function (_super) {
  * Gets or sets the options to customize the layers of the maps.
  */
 var LayerSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(LayerSettings, _super);
+    __extends$1(LayerSettings, _super);
     function LayerSettings() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         /**
@@ -5374,82 +5512,70 @@ var LayerSettings = /** @__PURE__ @class */ (function (_super) {
         _this.isBaseLayer = false;
         return _this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], LayerSettings.prototype, "shapeData", void 0);
-    __decorate$1([
+    __decorate([
         Property()
     ], LayerSettings.prototype, "query", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ShapeSettings)
     ], LayerSettings.prototype, "shapeSettings", void 0);
-    __decorate$1([
+    __decorate([
         Property([])
     ], LayerSettings.prototype, "dataSource", void 0);
-    __decorate$1([
+    __decorate([
         Property('Layer')
     ], LayerSettings.prototype, "type", void 0);
-    __decorate$1([
+    __decorate([
         Property('Geographic')
     ], LayerSettings.prototype, "geometryType", void 0);
-    __decorate$1([
-        Property('Aerial')
-    ], LayerSettings.prototype, "bingMapType", void 0);
-    __decorate$1([
-        Property('RoadMap')
-    ], LayerSettings.prototype, "staticMapType", void 0);
-    __decorate$1([
-        Property('')
-    ], LayerSettings.prototype, "key", void 0);
-    __decorate$1([
-        Property('Geometry')
-    ], LayerSettings.prototype, "layerType", void 0);
-    __decorate$1([
+    __decorate([
         Property('')
     ], LayerSettings.prototype, "urlTemplate", void 0);
-    __decorate$1([
+    __decorate([
         Property(true)
     ], LayerSettings.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         Property('name')
     ], LayerSettings.prototype, "shapeDataPath", void 0);
-    __decorate$1([
+    __decorate([
         Property('name')
     ], LayerSettings.prototype, "shapePropertyPath", void 0);
-    __decorate$1([
+    __decorate([
         Property(0)
     ], LayerSettings.prototype, "animationDuration", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], MarkerSettings)
     ], LayerSettings.prototype, "markerSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, MarkerClusterSettings)
     ], LayerSettings.prototype, "markerClusterSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, DataLabelSettings)
     ], LayerSettings.prototype, "dataLabelSettings", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], BubbleSettings)
     ], LayerSettings.prototype, "bubbleSettings", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], NavigationLineSettings)
     ], LayerSettings.prototype, "navigationLineSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, PolygonSettings)
     ], LayerSettings.prototype, "polygonSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, TooltipSettings)
     ], LayerSettings.prototype, "tooltipSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, SelectionSettings)
     ], LayerSettings.prototype, "selectionSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, HighlightSettings)
     ], LayerSettings.prototype, "highlightSettings", void 0);
-    __decorate$1([
+    __decorate([
         Complex({}, ToggleLegendSettings)
     ], LayerSettings.prototype, "toggleLegendSettings", void 0);
-    __decorate$1([
+    __decorate([
         Collection([], InitialShapeSelectionSettings)
     ], LayerSettings.prototype, "initialShapeSelection", void 0);
     return LayerSettings;
@@ -5478,14 +5604,14 @@ var Tile = /** @__PURE__ @class */ (function () {
  * Gets or sets the options to customize the area around the shapes in the map layer.
  */
 var MapsAreaSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(MapsAreaSettings, _super);
+    __extends$1(MapsAreaSettings, _super);
     function MapsAreaSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$1([
+    __decorate([
         Property(null)
     ], MapsAreaSettings.prototype, "background", void 0);
-    __decorate$1([
+    __decorate([
         Complex({ color: 'transparent', width: 1 }, Border)
     ], MapsAreaSettings.prototype, "border", void 0);
     return MapsAreaSettings;
@@ -6016,19 +6142,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             id: this.mapObject.element.id + '_Layer_Collections',
             'clip-path': 'url(#' + this.mapObject.element.id + '_MapArea_ClipRect)'
         }));
-        if (this.mapObject.layers[this.mapObject.baseLayerIndex].layerType === 'GoogleStaticMap') {
-            var staticMapSize = 640;
-            this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
-                x: ((areaRect.width - staticMapSize) / 2), y: 0,
-                width: staticMapSize, height: areaRect.height
-            }));
-        }
-        else {
-            this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
-                x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: areaRect.height
-            }));
-        }
+        this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
+            x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
+            width: areaRect.width, height: areaRect.height
+        }));
         this.layerGroup.appendChild(this.clipRectElement);
         this.mapObject.baseMapBounds = null;
         this.mapObject.baseMapRectBounds = null;
@@ -6162,8 +6279,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             && this.mapObject.availableSize.height > 512) {
             this.mapObject.applyZoomReset = true;
             this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
-            var padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
-                20 : 0;
+            var padding = 20;
             var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
             if (!isNullOrUndefined(this.mapObject.initialTileTranslate)) {
                 this.mapObject.initialTileTranslate.x = (this.mapObject.availableSize.width / 2) - (totalSize / 2);
@@ -6221,55 +6337,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.mapObject.trigger('layerRendering', eventArgs, function (observedArgs) {
             if (!eventArgs.cancel && eventArgs.visible) {
-                if (layer.layerType === 'OSM') {
-                    layer.urlTemplate = 'https://a.tile.openstreetmap.org/level/tileX/tileY.png';
-                }
-                if (layer.layerType === 'Google') {
-                    layer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
-                }
-                if (layer.layerType !== 'Geometry' || (isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
-                    if (layer.layerType !== 'Bing' || _this.bing) {
-                        if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
-                            var bing = new BingMap(_this.mapObject);
-                            _this.bingMapCalculation(layer, layerIndex, _this, bing);
-                        }
-                        else {
-                            _this.renderTileLayer(_this, layer, layerIndex);
-                        }
+                if ((isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
+                    if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
+                        var bing = new BingMap(_this.mapObject);
+                        _this.bingMapCalculation(layer, layerIndex, _this, bing);
                     }
-                    else if (layer.key && layer.key.length > 1) {
-                        // eslint-disable-next-line @typescript-eslint/no-this-alias
-                        var proxy_1 = _this;
-                        var bing_1 = new BingMap(_this.mapObject);
-                        var bingType = layer.bingMapType === 'AerialWithLabel' ? 'AerialWithLabelsOnDemand' : layer.bingMapType;
-                        var url = 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/' + bingType;
-                        var ajax = new Fetch({
-                            url: url + '?output=json&include=ImageryProviders&urischeme=https&key=' + layer.key
-                        });
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        ajax.onSuccess = function (json) {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            var resource = json['resourceSets'][0]['resources'][0];
-                            var imageUrl = resource['imageUrl'];
-                            var subDomains = resource['imageUrlSubdomains'];
-                            var maxZoom = resource['zoomMax'];
-                            if (imageUrl !== null && imageUrl !== undefined && imageUrl !== bing_1.imageUrl) {
-                                bing_1.imageUrl = imageUrl;
-                            }
-                            if (subDomains !== null && subDomains !== undefined && subDomains !== bing_1.subDomains) {
-                                bing_1.subDomains = subDomains;
-                            }
-                            if (maxZoom !== null && maxZoom !== undefined && maxZoom !== bing_1.maxZoom) {
-                                bing_1.maxZoom = maxZoom;
-                            }
-                            proxy_1.mapObject['bingMap'] = bing_1;
-                            proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
-                            _this.mapObject.arrangeTemplate();
-                            if (_this.mapObject.zoomModule && (_this.mapObject.previousScale !== _this.mapObject.scale)) {
-                                _this.mapObject.zoomModule.applyTransform(_this.mapObject, true);
-                            }
-                        };
-                        ajax.send();
+                    else {
+                        _this.renderTileLayer(_this, layer, layerIndex);
                     }
                 }
                 else {
@@ -6377,7 +6451,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             var _loop_1 = function (i) {
                 var k = void 0;
                 var borderValue = {
-                    color: shapeSettings.border.color,
+                    color: shapeSettings.border.color || this_1.mapObject.themeStyle.shapeBorderColor,
                     width: shapeSettings.border.width,
                     opacity: shapeSettings.border.opacity
                 };
@@ -6442,21 +6516,20 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     if (!eventArgs.cancel) {
                         eventArgs.fill = eventArgs.fill === '#A6A6A6' ? eventArgs.shape.fill ||
                             _this.mapObject.themeStyle.shapeFill : eventArgs.fill;
-                        eventArgs.border.color = eventArgs.border.color === '#000000' ?
+                        eventArgs.border.color = eventArgs.border.color === 'transparent' ?
                             eventArgs.shape.border.color : eventArgs.border.color;
                         eventArgs.border.width = eventArgs.border.width === 0 ? eventArgs.shape.border.width : eventArgs.border.width;
                         if (isNullOrUndefined(shapeSettings.borderColorValuePath)) {
-                            _this.mapObject.layers[layerIndex].shapeSettings.border.color = eventArgs.border.color;
+                            borderValue.color = eventArgs.border.color;
                         }
                         if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
-                            _this.mapObject.layers[layerIndex].shapeSettings.border.width = eventArgs.border.width;
+                            borderValue.width = eventArgs.border.width;
                         }
                     }
                     else {
                         eventArgs.fill = fill;
-                        eventArgs.border.color = shapeSettings.border.color;
+                        eventArgs.border.color = shapeSettings.border.color || _this.mapObject.themeStyle.shapeBorderColor;
                         eventArgs.border.width = shapeSettings.border.width;
-                        _this.mapObject.layers[layerIndex].shapeSettings.border = shapeSettings.border;
                     }
                     eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
                     if (_this.groupElements.length < 1) {
@@ -6653,10 +6726,12 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var bubbleDataSource = bubble_1.dataSource;
                 this_2.mapObject.bubbleModule.bubbleCollection = [];
-                bubbleDataSource.map(function (bubbleData, i) {
-                    _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
-                });
-                this_2.groupElements.push(bubbleG);
+                if (!isNullOrUndefined(bubbleDataSource) && bubbleDataSource.length > 0) {
+                    bubbleDataSource.map(function (bubbleData, i) {
+                        _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
+                    });
+                    this_2.groupElements.push(bubbleG);
+                }
             };
             var this_2 = this;
             for (var j = 0; j < length_1; j++) {
@@ -6682,9 +6757,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         if (this.mapObject.navigationLineModule) {
             this.groupElements.push(this.mapObject.navigationLineModule.renderNavigation(this.currentLayer, this.currentFactor, layerIndex));
         }
-        this.groupElements.map(function (element) {
-            _this.layerObject.appendChild(element);
-        });
+        if (!isNullOrUndefined(this.groupElements) && !isNullOrUndefined(this.layerObject)) {
+            this.groupElements.map(function (element) {
+                if (!isNullOrUndefined(element)) {
+                    _this.layerObject.appendChild(element);
+                }
+            });
+        }
         if (this.mapObject.markerModule) {
             this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) :
                 this.currentFactor), null);
@@ -6773,9 +6852,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             return color;
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var index = checkShapeDataFields(layer.dataSource, shape, layer.shapeDataPath, layer.shapePropertyPath, layer);
+        var index = checkShapeDataFields(layer.dataSource, shape, layer.shapeDataPath, layer.shapePropertyPath);
         var colorMapping = new ColorMapping(this.mapObject);
-        if (isNullOrUndefined(layer.dataSource[index])) {
+        if (isNullOrUndefined(layer.dataSource) || isNullOrUndefined(layer.dataSource[index])) {
             return color;
         }
         return colorMapping.getShapeColorMapping(layer.shapeSettings, layer.dataSource[index], color);
@@ -6954,15 +7033,15 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         if (!isNullOrUndefined(this.mapObject.baseMapRectBounds)) {
             var duration = animationMode === 'Disable' ? 0 : (this.currentLayer.animationDuration === 0 && animationMode === 'Enable') ?
                 1000 : this.currentLayer.animationDuration;
-            var animate$$1 = duration !== 0 || isNullOrUndefined(this.mapObject.zoomModule);
+            var animate = duration !== 0 || isNullOrUndefined(this.mapObject.zoomModule);
             this.mapObject.baseTranslatePoint = this.mapObject.zoomTranslatePoint;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var translate = void 0;
             if (this.mapObject.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(this.mapObject.zoomModule)) {
-                translate = getZoomTranslate(this.mapObject, this.currentLayer, animate$$1);
+                translate = getZoomTranslate(this.mapObject, this.currentLayer, animate);
             }
             else {
-                translate = getTranslate(this.mapObject, this.currentLayer, animate$$1);
+                translate = getTranslate(this.mapObject, this.currentLayer, animate);
             }
             var scale = this.mapObject.previousScale = translate['scale'];
             var location_1 = this.mapObject.previousPoint = translate['location'];
@@ -7156,9 +7235,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         var tile = new Tile(tileI % ycount, j);
                         tile.left = Math.round(x);
                         tile.top = Math.round(y);
-                        if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
-                            var key = baseLayer.key;
-                            tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
+                        if ((bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
+                            tile.src = bing.getBingMap(tile, '', '', userLang, bing.imageUrl, bing.subDomains);
                         }
                         else {
                             tile.src = this.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', tile.x.toString())
@@ -7185,14 +7263,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             if (!(layer.type === 'SubLayer' && layer.visible)) {
                 continue;
             }
-            if ((layer.layerType !== 'Geometry' && layer.layerType !== 'GoogleStaticMap') || (layer.layerType === 'Geometry' &&
-                isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
+            if (isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '') {
                 for (var _b = 0, proxTiles_1 = proxTiles; _b < proxTiles_1.length; _b++) {
                     var baseTile = proxTiles_1[_b];
                     var subtile = extend({}, baseTile, {}, true);
-                    if (layer.layerType === 'Bing') {
+                    if (layer.urlTemplate.indexOf('quadkey')) {
                         bing = new BingMap(this.mapObject);
-                        subtile.src = bing.getBingMap(subtile, layer.key, layer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
+                        subtile.src = bing.getBingMap(subtile, '', '', userLang, bing.imageUrl, bing.subDomains);
                     }
                     else {
                         subtile.src = layer.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', baseTile.x.toString())
@@ -7220,111 +7297,106 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         else {
             timeOut = 0;
         }
-        if (this.mapObject.layers[this.mapObject.baseLayerIndex].layerType === 'GoogleStaticMap') {
-            this.renderGoogleMap(this.mapObject.layers[0].key, this.mapObject.staticMapZoom);
-        }
-        else {
-            setTimeout(function () {
-                if (element) {
-                    element.style.zIndex = '1';
-                }
-                if (element1) {
-                    element1.style.zIndex = '0';
-                }
-                var animateElement;
-                if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
+        setTimeout(function () {
+            if (element) {
+                element.style.zIndex = '1';
+            }
+            if (element1) {
+                element1.style.zIndex = '0';
+            }
+            var animateElement;
+            if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
+                animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
+                element.appendChild(animateElement);
+            }
+            else {
+                if (type !== 'Pan' && element1 && element) {
+                    element1.appendChild(element.children[0]);
+                    if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
+                        document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
+                            _this.mapObject.element.id + '_animated_tiles_old';
+                    }
                     animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
                     element.appendChild(animateElement);
                 }
                 else {
-                    if (type !== 'Pan' && element1 && element) {
-                        element1.appendChild(element.children[0]);
-                        if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
-                            document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
-                                _this.mapObject.element.id + '_animated_tiles_old';
-                        }
-                        animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
-                        element.appendChild(animateElement);
+                    animateElement = element ? element.children[0] : null;
+                }
+            }
+            for (var id = 0; id < _this.tiles.length; id++) {
+                var tile = _this.tiles[id];
+                var imgElement = null;
+                var mapId = _this.mapObject.element.id;
+                if (type === 'Pan') {
+                    var child = document.getElementById(mapId + '_tile_' + id);
+                    var isNewTile = false;
+                    if (isNullOrUndefined(child)) {
+                        isNewTile = true;
+                        child = createElement('div', { id: mapId + '_tile_' + id });
+                        imgElement = createElement('img');
                     }
                     else {
-                        animateElement = element ? element.children[0] : null;
+                        child.style.removeProperty('display');
+                        imgElement = child.children[0];
                     }
-                }
-                for (var id = 0; id < _this.tiles.length; id++) {
-                    var tile = _this.tiles[id];
-                    var imgElement = null;
-                    var mapId = _this.mapObject.element.id;
-                    if (type === 'Pan') {
-                        var child = document.getElementById(mapId + '_tile_' + id);
-                        var isNewTile = false;
-                        if (isNullOrUndefined(child)) {
-                            isNewTile = true;
-                            child = createElement('div', { id: mapId + '_tile_' + id });
-                            imgElement = createElement('img');
-                        }
-                        else {
-                            child.style.removeProperty('display');
-                            imgElement = child.children[0];
-                        }
-                        if (!isNewTile && imgElement && imgElement.src !== tile.src) {
-                            imgElement.src = tile.src;
-                        }
-                        child.style.position = 'absolute';
-                        child.style.left = tile.left + 'px';
-                        child.style.top = tile.top + 'px';
-                        child.style.height = tile.height + 'px';
-                        child.style.width = tile.width + 'px';
-                        if (isNewTile) {
-                            imgElement.setAttribute('height', '256px');
-                            imgElement.setAttribute('width', '256px');
-                            imgElement.setAttribute('src', tile.src);
-                            imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
-                            imgElement.style.setProperty('user-select', 'none');
-                            child.appendChild(imgElement);
-                            animateElement.appendChild(child);
-                        }
+                    if (!isNewTile && imgElement && imgElement.src !== tile.src) {
+                        imgElement.src = tile.src;
                     }
-                    else {
-                        imgElement = createElement('img');
+                    child.style.position = 'absolute';
+                    child.style.left = tile.left + 'px';
+                    child.style.top = tile.top + 'px';
+                    child.style.height = tile.height + 'px';
+                    child.style.width = tile.width + 'px';
+                    if (isNewTile) {
                         imgElement.setAttribute('height', '256px');
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
-                        imgElement.style.setProperty('user-select', 'none');
                         imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
-                        var child = createElement('div', { id: mapId + '_tile_' + id });
-                        child.style.position = 'absolute';
-                        child.style.left = tile.left + 'px';
-                        child.style.top = tile.top + 'px';
-                        child.style.height = tile.height + 'px';
-                        child.style.width = tile.width + 'px';
+                        imgElement.style.setProperty('user-select', 'none');
                         child.appendChild(imgElement);
-                        if (animateElement) {
-                            animateElement.appendChild(child);
-                        }
+                        animateElement.appendChild(child);
                     }
-                    if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
-                        removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                }
+                else {
+                    imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
+                    imgElement.setAttribute('src', tile.src);
+                    imgElement.style.setProperty('user-select', 'none');
+                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
+                    var child = createElement('div', { id: mapId + '_tile_' + id });
+                    child.style.position = 'absolute';
+                    child.style.left = tile.left + 'px';
+                    child.style.top = tile.top + 'px';
+                    child.style.height = tile.height + 'px';
+                    child.style.width = tile.width + 'px';
+                    child.appendChild(imgElement);
+                    if (animateElement) {
+                        animateElement.appendChild(child);
                     }
                 }
-                if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
-                    for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
-                        var isExistingElement = false;
-                        for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
-                            if (!isExistingElement &&
-                                _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
-                                isExistingElement = true;
-                            }
-                        }
-                        if (isExistingElement) {
-                            animateElement.children[l].style.display = 'none';
-                        }
-                        else {
-                            animateElement.removeChild(animateElement.children[l]);
+                if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
+                    removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                }
+            }
+            if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
+                for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
+                    var isExistingElement = false;
+                    for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
+                        if (!isExistingElement &&
+                            _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
+                            isExistingElement = true;
                         }
                     }
+                    if (isExistingElement) {
+                        animateElement.children[l].style.display = 'none';
+                    }
+                    else {
+                        animateElement.removeChild(animateElement.children[l]);
+                    }
                 }
-            }, timeOut);
-        }
+            }
+        }, timeOut);
     };
     /**
      * Animation for tile layers and hide the group element until the tile layer rendering.
@@ -7399,7 +7471,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         var eleWidth = mapWidth > 640 ? (mapWidth - 640) / 2 : 0;
         var eleHeight = mapHeight > 640 ? (mapHeight - 640) / 2 : 0;
         var center;
-        var mapType = (map.layers[map.layers.length - 1].staticMapType).toString().toLowerCase();
+        var mapType = 'roadmap';
         if (map.centerPosition.latitude && map.centerPosition.longitude) {
             center = map.centerPosition.latitude.toString() + ',' + map.centerPosition.longitude.toString();
         }
@@ -7425,8 +7497,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             this.mapObject.tileZoomLevel = this.mapObject.tileZoomScale;
         }
         var level = this.mapObject.tileZoomLevel;
-        var padding = this.mapObject.layers[this.mapObject.layers.length - 1].layerType !== 'GoogleStaticMap' ?
-            20 : 0;
+        var padding = 20;
         var x;
         var y;
         var totalSize = Math.pow(2, level) * 256;
@@ -7617,7 +7688,7 @@ var Annotations = /** @__PURE__ @class */ (function () {
     return Annotations;
 }());
 
-var __extends = (undefined && undefined.__extends) || (function () {
+var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -7630,15 +7701,12 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/**
- * Maps Component file
- */
 /**
  * Represents the maps control. It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that
  * has rich feature set that includes markers, labels, bubbles and much more.
@@ -7651,7 +7719,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  * ```
  */
 var Maps = /** @__PURE__ @class */ (function (_super) {
-    __extends(Maps, _super);
+    __extends$2(Maps, _super);
     /**
      * Constructor for creating the widget.
      *
@@ -7933,7 +8001,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     _loop_2(i);
                 }
             }
-            if (layer.dataSource instanceof MapAjax || !isNullOrUndefined(layer.dataSource['dataOptions'])) {
+            if (layer.dataSource instanceof MapAjax || (!isNullOrUndefined(layer.dataSource) && !isNullOrUndefined(layer.dataSource['dataOptions']))) {
                 _this.processAjaxRequest(layer, layer.dataSource, 'DataSource');
             }
             if (_this.serverProcess['request'] === _this.serverProcess['response'] && length === layerIndex) {
@@ -8373,8 +8441,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.createTile = function () {
         var mainLayer = this.layersCollection[0];
         var padding = 0;
-        if (mainLayer.isBaseLayer && (mainLayer.layerType === 'OSM' || mainLayer.layerType === 'Bing' ||
-            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google' || (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== ''))) {
+        if (mainLayer.isBaseLayer && (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== '' && isNullOrUndefined(mainLayer.shapeData))) {
             removeElement(this.element.id + '_tile_parent');
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
@@ -8425,7 +8492,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var baseLayer = mainLayers[i];
             if (baseLayer.visible && baseIndex === i) {
                 baseLayer.isBaseLayer = true;
-                this.isTileMap = (baseLayer.layerType === 'Geometry' && !isNullOrUndefined(baseLayer.shapeData)) ? false : true;
+                this.isTileMap = !isNullOrUndefined(baseLayer.shapeData) ? false : true;
                 this.layersCollection.push(baseLayer);
                 break;
             }
@@ -8794,11 +8861,11 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Maps.prototype.getMarkerClickLocation = function (pageX, pageY, x, y, marker$$1, isDragEnd) {
+    Maps.prototype.getMarkerClickLocation = function (pageX, pageY, x, y, marker, isDragEnd) {
         document.getElementById(this.element.id + '_svg').style.cursor = 'grabbing';
-        var targetElement = getElement(marker$$1.targetId);
-        var latLongValue = this.getClickLocation(marker$$1.targetId, pageX, pageY, targetElement, x, y);
-        var location = (this.isTileMap) ? convertTileLatLongToPoint(new MapLocation(latLongValue.longitude, latLongValue.latitude), this.tileZoomLevel, this.tileTranslatePoint, true) : convertGeoToPoint(latLongValue.latitude, latLongValue.longitude, this.mapLayerPanel.currentFactor, this.layersCollection[marker$$1.layerIndex], this);
+        var targetElement = getElement(marker.targetId);
+        var latLongValue = this.getClickLocation(marker.targetId, pageX, pageY, targetElement, x, y);
+        var location = (this.isTileMap) ? convertTileLatLongToPoint(new MapLocation(latLongValue.longitude, latLongValue.latitude), this.tileZoomLevel, this.tileTranslatePoint, true) : convertGeoToPoint(latLongValue.latitude, latLongValue.longitude, this.mapLayerPanel.currentFactor, this.layersCollection[marker.layerIndex], this);
         var transPoint = this.translatePoint;
         var translateX = (this.isTileMap ? location.x : (location.x + transPoint.x) * this.scale);
         var translateY = (this.isTileMap ? location.y : (location.y + transPoint.y) * this.scale);
@@ -8809,8 +8876,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             targetElement.parentElement.setAttribute('transform', 'translate( ' + translateX + ' ' + translateY + ' )');
         }
         if (isDragEnd) {
-            var markerSettings = this.layers[marker$$1.layerIndex].markerSettings[marker$$1.markerIndex];
-            latLongValue = this.getClickLocation(marker$$1.targetId, (pageX - markerSettings.offset.x), (pageY - markerSettings.offset.y), targetElement, (x - markerSettings.offset.x), (y - markerSettings.offset.y));
+            var markerSettings = this.layers[marker.layerIndex].markerSettings[marker.markerIndex];
+            latLongValue = this.getClickLocation(marker.targetId, (pageX - markerSettings.offset.x), (pageY - markerSettings.offset.y), targetElement, (x - markerSettings.offset.x), (y - markerSettings.offset.y));
         }
         return latLongValue;
     };
@@ -8959,32 +9026,32 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         if (!isNullOrUndefined(this.markerDragArgument)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var marker$$1 = this.markerDragArgument;
+            var marker = this.markerDragArgument;
             this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
             this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
             var latLongValue = this.getMarkerClickLocation(pageX, pageY, layerX, layerY, this.markerDragArgument, true);
-            var markerObject = this.layers[marker$$1.layerIndex].markerSettings[marker$$1.markerIndex];
+            var markerObject = this.layers[marker.layerIndex].markerSettings[marker.markerIndex];
             document.getElementById(this.element.id + '_svg').style.cursor = markerObject.enableDrag ? 'pointer' : 'grabbing';
             var dragEventArgs = {
                 name: 'markerDragEnd', x: pageX, y: pageY,
                 latitude: latLongValue.latitude, longitude: latLongValue.longitude,
-                layerIndex: marker$$1.layerIndex, markerIndex: marker$$1.markerIndex,
-                dataIndex: marker$$1.dataIndex
+                layerIndex: marker.layerIndex, markerIndex: marker.markerIndex,
+                dataIndex: marker.dataIndex
             };
             if (isNullOrUndefined(markerObject.latitudeValuePath) && isNullOrUndefined(markerObject.longitudeValuePath)) {
-                var data = markerObject.dataSource[marker$$1.dataIndex];
+                var data = markerObject.dataSource[marker.dataIndex];
                 if (!isNullOrUndefined(data['Longitude']) && !isNullOrUndefined(data['Latitude'])) {
-                    markerObject.dataSource[marker$$1.dataIndex].Latitude = dragEventArgs.latitude;
-                    markerObject.dataSource[marker$$1.dataIndex].Longitude = dragEventArgs.longitude;
+                    markerObject.dataSource[marker.dataIndex].Latitude = dragEventArgs.latitude;
+                    markerObject.dataSource[marker.dataIndex].Longitude = dragEventArgs.longitude;
                 }
                 else {
-                    markerObject.dataSource[marker$$1.dataIndex].latitude = dragEventArgs.latitude;
-                    markerObject.dataSource[marker$$1.dataIndex].longitude = dragEventArgs.longitude;
+                    markerObject.dataSource[marker.dataIndex].latitude = dragEventArgs.latitude;
+                    markerObject.dataSource[marker.dataIndex].longitude = dragEventArgs.longitude;
                 }
             }
             else {
-                markerObject.dataSource[marker$$1.dataIndex][markerObject.latitudeValuePath] = dragEventArgs.latitude;
-                markerObject.dataSource[marker$$1.dataIndex][markerObject.longitudeValuePath] = dragEventArgs.longitude;
+                markerObject.dataSource[marker.dataIndex][markerObject.latitudeValuePath] = dragEventArgs.latitude;
+                markerObject.dataSource[marker.dataIndex][markerObject.longitudeValuePath] = dragEventArgs.longitude;
             }
             this.markerDragId = '';
             this.markerDragArgument = null;
@@ -9171,10 +9238,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         if (!isNullOrUndefined(this.markerDragArgument)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var marker$$1 = this.markerDragArgument;
+            var marker = this.markerDragArgument;
             this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
             this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
-            this.getMarkerClickLocation(pageX, pageY, layerX, layerY, marker$$1, false);
+            this.getMarkerClickLocation(pageX, pageY, layerX, layerY, marker, false);
         }
         if (this.zoomModule) {
             this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.scale, e.target.id);
@@ -9711,7 +9778,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var render = false;
             var isMarker = false;
             var isLayer = false;
-            var isStaticMapType = false;
             for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                 var prop = _a[_i];
                 switch (prop) {
@@ -9733,17 +9799,13 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                                     var collection = Object.keys(newProp.layers[x]);
                                     for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
                                         var collectionProp = collection_1[_b];
-                                        if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') ||
-                                            (isNullOrUndefined(this.layers[x].shapeData)
-                                                && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
+                                        if ((isNullOrUndefined(this.layers[x].shapeData)
+                                            && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
                                             this.isReset = true;
                                         }
                                         else if (collectionProp === 'markerSettings') {
                                             isMarker = true;
                                         }
-                                        else if (collectionProp === 'staticMapType') {
-                                            isStaticMapType = true;
-                                        }
                                     }
                                 }
                             }
@@ -9787,9 +9849,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                         this.render();
                     }
                 }
-                else if (newProp.layers && isStaticMapType) {
-                    this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
-                }
                 else {
                     this.createSVG();
                     this.renderElements();
@@ -10114,18 +10173,18 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 }
                 for (var _b = 0, _c = polygonSetting.polygons; _b < _c.length; _b++) {
                     var polygon = _c[_b];
-                    if (polygon.points.length > 0) {
+                    if (!isNullOrUndefined(polygon.points) && polygon.points.length > 0) {
                         isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
                         isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
                         istooltipVisible = layer.polygonSettings.tooltipSettings.visible || istooltipVisible;
                     }
                 }
                 for (var _d = 0, markers_1 = markers; _d < markers_1.length; _d++) {
-                    var marker$$1 = markers_1[_d];
-                    if (marker$$1.visible) {
-                        istooltipVisible = marker$$1.tooltipSettings.visible || istooltipVisible;
-                        isSelection = marker$$1.selectionSettings.enable || isSelection;
-                        isHighlight = marker$$1.highlightSettings.enable || isHighlight;
+                    var marker = markers_1[_d];
+                    if (marker.visible) {
+                        istooltipVisible = marker.tooltipSettings.visible || istooltipVisible;
+                        isSelection = marker.selectionSettings.enable || isSelection;
+                        isHighlight = marker.highlightSettings.enable || isHighlight;
                     }
                     if (istooltipVisible) {
                         break;
@@ -10223,7 +10282,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         var latitude = 0;
         var longitude = 0;
         if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
-            var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
+            var padding = 10;
             pageY = pageY + padding;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
@@ -10233,181 +10292,181 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         return { latitude: latitude, longitude: longitude };
     };
-    __decorate([
+    __decorate$1([
         Property(null)
     ], Maps.prototype, "background", void 0);
-    __decorate([
+    __decorate$1([
         Property(false)
     ], Maps.prototype, "useGroupingSeparator", void 0);
-    __decorate([
+    __decorate$1([
         Property(null)
     ], Maps.prototype, "format", void 0);
-    __decorate([
+    __decorate$1([
         Property(null)
     ], Maps.prototype, "width", void 0);
-    __decorate([
+    __decorate$1([
         Property(null)
     ], Maps.prototype, "height", void 0);
-    __decorate([
+    __decorate$1([
         Property('MouseMove')
     ], Maps.prototype, "tooltipDisplayMode", void 0);
-    __decorate([
+    __decorate$1([
         Property(false)
     ], Maps.prototype, "allowPrint", void 0);
-    __decorate([
+    __decorate$1([
         Property(false)
     ], Maps.prototype, "allowImageExport", void 0);
-    __decorate([
+    __decorate$1([
         Property(false)
     ], Maps.prototype, "allowPdfExport", void 0);
-    __decorate([
+    __decorate$1([
         Complex({}, TitleSettings)
     ], Maps.prototype, "titleSettings", void 0);
-    __decorate([
+    __decorate$1([
         Complex({}, ZoomSettings)
     ], Maps.prototype, "zoomSettings", void 0);
-    __decorate([
+    __decorate$1([
         Complex({}, LegendSettings)
     ], Maps.prototype, "legendSettings", void 0);
-    __decorate([
+    __decorate$1([
         Collection([], LayerSettings)
     ], Maps.prototype, "layers", void 0);
-    __decorate([
+    __decorate$1([
         Collection([], Annotation)
     ], Maps.prototype, "annotations", void 0);
-    __decorate([
+    __decorate$1([
         Complex({}, Margin)
     ], Maps.prototype, "margin", void 0);
-    __decorate([
+    __decorate$1([
         Complex({ color: '#DDDDDD', width: 0 }, Border)
     ], Maps.prototype, "border", void 0);
-    __decorate([
+    __decorate$1([
         Property('Material')
     ], Maps.prototype, "theme", void 0);
-    __decorate([
+    __decorate$1([
         Property('Mercator')
     ], Maps.prototype, "projectionType", void 0);
-    __decorate([
+    __decorate$1([
         Property(0)
     ], Maps.prototype, "baseLayerIndex", void 0);
-    __decorate([
+    __decorate$1([
         Property(null)
     ], Maps.prototype, "description", void 0);
-    __decorate([
+    __decorate$1([
         Property(0)
     ], Maps.prototype, "tabIndex", void 0);
-    __decorate([
+    __decorate$1([
         Complex({ latitude: null, longitude: null }, CenterPosition)
     ], Maps.prototype, "centerPosition", void 0);
-    __decorate([
+    __decorate$1([
         Complex({}, MapsAreaSettings)
     ], Maps.prototype, "mapsArea", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "load", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "beforePrint", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "loaded", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "click", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "onclick", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "doubleClick", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "rightClick", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "resize", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "tooltipRender", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "legendRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "tooltipRenderComplete", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "shapeSelected", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "itemSelection", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "itemHighlight", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "shapeHighlight", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "layerRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "shapeRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerClusterRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerClick", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerDragStart", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerDragEnd", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerClusterClick", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerClusterMouseMove", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "markerMouseMove", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "dataLabelRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "bubbleRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "bubbleClick", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "bubbleMouseMove", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "animationComplete", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "annotationRendering", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "zoom", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "pan", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "panComplete", void 0);
-    __decorate([
+    __decorate$1([
         Event()
     ], Maps.prototype, "zoomComplete", void 0);
-    Maps = __decorate([
+    Maps = __decorate$1([
         NotifyPropertyChanges
     ], Maps);
     return Maps;
@@ -10573,12 +10632,12 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var translate;
-                var animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(_this.maps.zoomModule);
+                var animate = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(_this.maps.zoomModule);
                 if (_this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(_this.maps.zoomModule) && !_this.maps.isTileMap) {
-                    translate = getZoomTranslate(_this.maps, layer, animate$$1);
+                    translate = getZoomTranslate(_this.maps, layer, animate);
                 }
                 else {
-                    translate = getTranslate(_this.maps, layer, animate$$1);
+                    translate = getTranslate(_this.maps, layer, animate);
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var bubbleDataSource = bubbleSettings.dataSource;
@@ -10758,83 +10817,85 @@ var Marker = /** @__PURE__ @class */ (function () {
         Array.prototype.forEach.call(currentLayer.markerSettings, function (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) {
-                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
-                var eventArgs = {
-                    cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
-                    width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
-                    template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
-                    border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
-                    shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
-                };
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
-                    eventArgs = markerColorChoose(eventArgs, data);
-                    eventArgs = markerShapeChoose(eventArgs, data);
-                    var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                    var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                    var offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        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);
-                        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);
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
-                        }
-                        else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, maps, _this.markerSVGObject);
-                        }
-                    }
-                    nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
-                    markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
-                    markerCount += (eventArgs.cancel) ? 1 : 0;
-                    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) {
-                            maps.svgObject.appendChild(_this.markerSVGObject);
-                            maps.element.appendChild(maps.svgObject);
-                            if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
-                                && maps.zoomSettings.enable) {
-                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
-                                layerElement.appendChild(_this.markerSVGObject);
+            if (!isNullOrUndefined(markerSettings.dataSource)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                    maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
+                    var eventArgs = {
+                        cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
+                        width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
+                        template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
+                        border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
+                        shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
+                    };
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
+                        eventArgs = markerColorChoose(eventArgs, data);
+                        eventArgs = markerShapeChoose(eventArgs, data);
+                        var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                            parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                        var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                            parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                        var offset = markerSettings.offset;
+                        if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
+                            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);
+                            if (maps.isTileMap) {
+                                translatePoint = (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object();
                             }
-                            else {
-                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                            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);
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                maps.renderReactTemplates();
+                            }
+                            else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerCount++;
+                                marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, maps, _this.markerSVGObject);
                             }
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
                         }
-                    }
-                    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 && !isMarkersClustered) {
-                                clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
+                        nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
+                        markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
+                        markerCount += (eventArgs.cancel) ? 1 : 0;
+                        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) {
+                                maps.svgObject.appendChild(_this.markerSVGObject);
+                                maps.element.appendChild(maps.svgObject);
+                                if ((currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData))
+                                    && maps.zoomSettings.enable) {
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                    layerElement.appendChild(_this.markerSVGObject);
+                                }
+                                else {
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                }
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                         }
-                    }
+                        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 && !isMarkersClustered) {
+                                    clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    maps.renderReactTemplates();
+                                }
+                            }
+                        }
+                    });
                 });
-            });
+            }
         });
     };
     /**
@@ -10891,35 +10952,37 @@ var Marker = /** @__PURE__ @class */ (function () {
                         Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting) {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var markerData = markerSetting.dataSource;
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                                var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                                var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                                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;
+                            if (!isNullOrUndefined(markerData) && markerData.length > 0) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                                    var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                        !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                    var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                        !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                    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;
+                                        }
                                     }
-                                }
-                            });
+                                });
+                            }
                         });
                     }
                 });
@@ -11107,19 +11170,19 @@ var Marker = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var markCollection = [];
         var clusterCollection = [];
-        var marker$$1;
+        var marker;
         this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
         if (target.indexOf('_MarkerIndex_') > -1) {
             var markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
             var dataIndex = parseInt(id[1].split('_dataIndex_')[1].split('_')[0], 10);
-            marker$$1 = layer.markerSettings[markerIndex];
+            marker = layer.markerSettings[markerIndex];
             if (!isNaN(markerIndex)) {
-                data = marker$$1.dataSource[dataIndex];
+                data = marker.dataSource[dataIndex];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection_1 = [];
-                if (!marker$$1.template && (target.indexOf('_cluster_') > -1) && (this.maps.layers[index].markerClusterSettings.allowClusterExpand)) {
+                if (!marker.template && (target.indexOf('_cluster_') > -1) && (this.maps.layers[index].markerClusterSettings.allowClusterExpand)) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    Array.prototype.forEach.call(marker$$1.dataSource, function (location, index) {
+                    Array.prototype.forEach.call(marker.dataSource, function (location, index) {
                         if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
                             collection_1.push({ data: data, index: index });
                         }
@@ -11132,8 +11195,8 @@ var Marker = /** @__PURE__ @class */ (function () {
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
-                        collection_1.push({ data: marker$$1.dataSource[i], index: i });
-                        markCollection.push(marker$$1.dataSource[i]);
+                        collection_1.push({ data: marker.dataSource[i], index: i });
+                        markCollection.push(marker.dataSource[i]);
                     }
                     isClusterSame = false;
                     clusterCollection.push({
@@ -11142,7 +11205,7 @@ var Marker = /** @__PURE__ @class */ (function () {
                         isClusterSame: isClusterSame
                     });
                 }
-                return { marker: marker$$1, data: data, clusterCollection: clusterCollection, markCollection: markCollection };
+                return { marker: marker, data: data, clusterCollection: clusterCollection, markCollection: markCollection };
             }
         }
         return null;
@@ -11262,12 +11325,14 @@ var Polygon = /** @__PURE__ @class */ (function () {
                 id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
             });
             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(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
-            polygonSVGObject.appendChild(polygonEle);
-            polygonsSVGObject.appendChild(polygonSVGObject);
+            if (!isNullOrUndefined(polygonSetting.points) && polygonSetting.points.length > 0) {
+                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(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
+                polygonSVGObject.appendChild(polygonEle);
+                polygonsSVGObject.appendChild(polygonSVGObject);
+            }
         });
         return polygonsSVGObject;
     };
@@ -11306,7 +11371,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var text;
         var shapeNameValue;
-        for (var i = 0; i < dataSource.length; i++) {
+        for (var i = 0; i < (isNullOrUndefined(dataSource) ? 0 : dataSource.length); i++) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var data = dataSource[i];
             var dataShapePathValue = !isNullOrUndefined(data[shapeDataPath]) && isNaN(data[shapeDataPath]) &&
@@ -11369,17 +11434,17 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         var locationX;
         var locationY;
         style.fontFamily = this.maps.theme.toLowerCase() !== 'material' ? this.maps.themeStyle.labelFontFamily : style.fontFamily;
-        style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight || Theme.dataLabelFont.fontWeight;
+        style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight;
+        style.size = style.size || this.maps.themeStyle.fontSize;
         shape = !isNullOrUndefined(shapes) ? shapes['property'] : null;
         var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         var propertyPath;
-        var isPoint = false;
-        var animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
+        var animate = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var translate = (this.maps.isTileMap) ? new Object() : ((this.maps.zoomSettings.zoomFactor > 1 &&
-            !isNullOrUndefined(this.maps.zoomModule)) ? getZoomTranslate(this.maps, layer, animate$$1) :
-            getTranslate(this.maps, layer, animate$$1));
+            !isNullOrUndefined(this.maps.zoomModule)) ? getZoomTranslate(this.maps, layer, animate) :
+            getTranslate(this.maps, layer, animate));
         var scale = (this.maps.isTileMap) ? this.maps.scale : translate['scale'];
         var transPoint = (this.maps.isTileMap) ? this.maps.translatePoint : translate['location'];
         var zoomTransPoint = this.maps.zoomTranslatePoint;
@@ -11430,7 +11495,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         text = (!isNullOrUndefined(datasrcObj)) ? !isNullOrUndefined(datasrcObj[labelpath]) ?
             datasrcObj[labelpath].toString() : datasrcObj[layer.shapeDataPath] : shapeData['properties'][labelpath];
         if ((Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]') &&
-            (isNullOrUndefined(text) && layer.dataSource['length'] === 0)) {
+            (isNullOrUndefined(text) && (!isNullOrUndefined(layer.dataSource) && layer.dataSource['length'] === 0))) {
             for (var l = 0; l < layer.shapePropertyPath.length; l++) {
                 if (shapeData['properties'][layer.shapePropertyPath[l]]) {
                     text = shapeData['properties'][layer.shapePropertyPath[l]];
@@ -11441,20 +11506,12 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(text) && (layer.dataLabelSettings.template !== '' && layer.dataSource['length'] === 0)) {
             text = shapeData['properties'][layer.shapePropertyPath];
         }
-        if (isNullOrUndefined(text) && layer.dataSource['length'] > 0) {
+        if (isNullOrUndefined(text) && (!isNullOrUndefined(layer.dataSource) && layer.dataSource['length'] > 0)) {
             text = '';
         }
         var dataLabelText = text;
         var projectionType = this.maps.projectionType;
-        if (isPoint) {
-            location = {
-                x: shapePoint[midIndex][index]['x'], y: shapePoint[midIndex][index]['y'],
-                rightMin: 0, rightMax: 0, leftMin: 0, leftMax: 0,
-                points: shapePoint[midIndex][index], topMax: 0, topMin: 0,
-                bottomMax: 0, bottomMin: 0, height: 0
-            };
-        }
-        else {
+        {
             location = findMidPointOfPolygon(shapePoint[midIndex], projectionType, layer.geometryType);
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11513,7 +11570,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 var start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                 var end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 2;
                 position = filter(shapePoint[midIndex], startY, endY);
-                if (!isPoint && position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&
+                if ( position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&
                     (shapeData['type'] !== 'MultiPolygon')) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var location1 = findMidPointOfPolygon(position, projectionType, layer.geometryType);
@@ -11796,7 +11853,7 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                 dashArray = navigation[i].dashArray;
                 arrowSettings = navigation[i].arrowSettings;
                 showArrow = !isNullOrUndefined(arrowSettings) ? arrowSettings.showArrow : false;
-                if (longitude.length === latitude.length && visible) {
+                if (!isNullOrUndefined(longitude) && !isNullOrUndefined(latitude) && longitude.length === latitude.length && visible) {
                     for (var i_1 = 0; i_1 < longitude.length; i_1++) {
                         var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
                         point.push(location_1);
@@ -12402,8 +12459,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                 }
                 if (legend.type === 'Markers' && legend.useMarkerShape) {
                     var legendShapeData = this.legendCollection[collection['idIndex']].data[0];
-                    var marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
-                    legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
+                    var marker = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
+                    legendShape = !isNullOrUndefined(marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']]) && marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] !== '' ? marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] : marker.shape;
                 }
                 if (legendShape === 'Balloon') {
                     legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
@@ -12529,7 +12586,9 @@ var Legend = /** @__PURE__ @class */ (function () {
             }
             else {
                 var layerIndex = currentItem[currentItem.length - 1].layerIndex;
-                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, this.maps.layers[layerIndex].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
+                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, 
+                /* eslint-disable-next-line max-len */
+                this.maps.layers[layerIndex].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
                     ? 0 : this.maps.layers[layerIndex].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.opacity)
                     ? this.maps.layers[layerIndex].shapeSettings.opacity
                     : this.maps.layers[layerIndex].shapeSettings.border.opacity, this.maps.layers[layerIndex].shapeSettings.fill);
@@ -12728,7 +12787,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         collection.push({
             legendElement: targetElement, legendOldFill: oldElement['fill'], legendOldOpacity: oldElement['opacity'],
             legendOldBorderColor: oldElement['borderColor'], legendOldBorderWidth: oldElement['borderWidth'],
-            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color,
+            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
             shapeOldBorderWidth: shapeSettings.border.width
         });
         var length = collection.length;
@@ -13205,7 +13264,8 @@ var Legend = /** @__PURE__ @class */ (function () {
         this.legendBorderRect = new Rect((this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
             (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
         var legendBorder = {
-            color: legend.border.color, width: legend.border.width, opacity: legend.border.opacity
+            color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
+            width: legend.border.width || this.maps.themeStyle.legendBorderWidth
         };
         legendBorder.opacity = isNullOrUndefined(legendBorder.opacity) ? 1 : legendBorder.opacity;
         var renderOptions = new RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
@@ -13321,10 +13381,10 @@ var Legend = /** @__PURE__ @class */ (function () {
     };
     Legend.prototype.getMarkersLegendCollections = function (layerIndex, markers) {
         var _this = this;
-        Array.prototype.forEach.call(markers, function (marker$$1, markerIndex) {
+        Array.prototype.forEach.call(markers, function (marker, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var dataSource = marker$$1.dataSource;
-            var field = marker$$1.legendText;
+            var dataSource = marker.dataSource;
+            var field = marker.legendText;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var templateFn;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13332,9 +13392,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                 var imageSrc = null;
                 var showLegend = isNullOrUndefined(data[_this.maps.legendSettings.showLegendPath]) ? true :
                     data[_this.maps.legendSettings.showLegendPath];
-                if (marker$$1.visible && showLegend && (!isNullOrUndefined(data['latitude'])) && (!isNullOrUndefined(data['longitude']))) {
-                    if (marker$$1.template) {
-                        templateFn = getTemplateFunction(marker$$1.template, _this.maps);
+                if (marker.visible && showLegend && (!isNullOrUndefined(data['latitude'])) && (!isNullOrUndefined(data['longitude']))) {
+                    if (marker.template) {
+                        templateFn = getTemplateFunction(marker.template, _this.maps);
                         var templateElement = templateFn(_this.maps);
                         var markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                             templateElement;
@@ -13342,7 +13402,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                         imageSrc = markerEle.querySelector('img').src;
                     }
                     var text = isNullOrUndefined(data[field]) ? '' : data[field];
-                    var legendFill = !isNullOrUndefined(marker$$1.colorValuePath) ? data[marker$$1.colorValuePath] : marker$$1.fill;
+                    var legendFill = !isNullOrUndefined(marker.colorValuePath) ? data[marker.colorValuePath] : marker.fill;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var newData = [];
                     if (_this.maps.legendSettings.removeDuplicateLegend) {
@@ -13352,7 +13412,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                     else {
                         newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill,
                             name: text,
-                            shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (_this.maps.legendSettings.useMarkerShape ? marker$$1.shape : _this.maps.legendSettings.shape) });
+                            shape: (!isNullOrUndefined(marker.shapeValuePath) && !isNullOrUndefined(data[marker.shapeValuePath]) && data[marker.shapeValuePath] !== '') ? data[marker.shapeValuePath] : (_this.maps.legendSettings.useMarkerShape ? marker.shape : _this.maps.legendSettings.shape) });
                         _this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                 }
@@ -13369,10 +13429,10 @@ var Legend = /** @__PURE__ @class */ (function () {
             var markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                var marker$$1 = _this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker$$1.legendText] || text === '') && legendFill === (data[marker$$1.colorValuePath] || marker$$1.fill)) {
+                var marker = _this.maps.layers[layerIndex].markerSettings[markerIndex];
+                if ((text === data[marker.legendText] || text === '') && legendFill === (data[marker.colorValuePath] || marker.fill)) {
                     legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
-                        shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
+                        shape: !isNullOrUndefined(marker.shapeValuePath) ? data[marker.shapeValuePath] : marker.shape });
                 }
             });
         });
@@ -13392,15 +13452,17 @@ var Legend = /** @__PURE__ @class */ (function () {
                 legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
                 rangeData = [];
                 var colorMapProcess_1 = false;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
-                    var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
-                        parseFloat(data[colorValuePath]);
-                    if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
-                        colorMapProcess_1 = true;
-                        rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
-                    }
-                });
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
+                        var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
+                            parseFloat(data[colorValuePath]);
+                        if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
+                            colorMapProcess_1 = true;
+                            rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
+                        }
+                    });
+                }
                 if (!colorMapProcess_1) {
                     rangeData.push({
                         layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
@@ -13488,23 +13550,25 @@ var Legend = /** @__PURE__ @class */ (function () {
                 legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value;
                 equalData = [];
                 var eqaulColorProcess_1 = false;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
-                    var equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
-                        (data[colorValuePath]));
-                    if (equalValue === colorMap.value) {
-                        eqaulColorProcess_1 = true;
-                        if (equalValues.indexOf(equalValue) === -1) {
-                            equalValues.push(equalValue);
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
+                        var equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                            (data[colorValuePath]));
+                        if (equalValue === colorMap.value) {
+                            eqaulColorProcess_1 = true;
+                            if (equalValues.indexOf(equalValue) === -1) {
+                                equalValues.push(equalValue);
+                            }
+                            equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
                         }
-                        equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
-                    }
-                    else {
-                        if (outOfRangeValues.indexOf(equalValue) === -1) {
-                            outOfRangeValues.push(equalValue);
+                        else {
+                            if (outOfRangeValues.indexOf(equalValue) === -1) {
+                                outOfRangeValues.push(equalValue);
+                            }
                         }
-                    }
-                });
+                    });
+                }
                 for (var x = 0; x < equalValues.length; x++) {
                     for (var y = 0; y < outOfRangeValues.length; y++) {
                         if (equalValues[x] === outOfRangeValues[y]) {
@@ -13771,7 +13835,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                             if (isVisible && mapElement !== null) {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                    mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                    mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                     mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
@@ -13801,7 +13865,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0 : this.maps.layers[k].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
                                         isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
@@ -13858,7 +13924,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
                                     layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
-                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
+                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                     layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                         this.maps.layers[j].shapeSettings.opacity :
@@ -13878,7 +13944,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
                                             ? 0 : this.maps.layers[j].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
                                         isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity)
@@ -13900,7 +13968,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
                                 layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                 layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
-                                layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
+                                layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
@@ -13950,7 +14018,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                    LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                    LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
@@ -13971,7 +14039,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, 
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, 
                                         /* eslint-disable-next-line max-len */
                                         (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0
@@ -14032,7 +14102,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
-                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
+                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                     mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
@@ -14053,7 +14123,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0
                                             : this.maps.layers[k].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
@@ -14073,7 +14145,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                 mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :
                                     this.maps.layers[k].shapeSettings.border.width).toString());
-                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
+                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                     this.maps.layers[k].shapeSettings.opacity :
                                     this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -14320,10 +14392,10 @@ var Highlight = /** @__PURE__ @class */ (function () {
                 this.highlightSettings = this.maps.layers[layerIndex].bubbleSettings[bubble].highlightSettings;
             }
             else if (targetEle.id.indexOf('MarkerIndex') > -1) {
-                var marker$$1 = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
+                var marker = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
                 dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
-                data = this.maps.layers[layerIndex].markerSettings[marker$$1].dataSource[dataIndex];
-                this.highlightSettings = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings;
+                data = this.maps.layers[layerIndex].markerSettings[marker].dataSource[dataIndex];
+                this.highlightSettings = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings;
             }
             else if (targetEle.id.indexOf('_PolygonIndex_') > -1) {
                 dataIndex = parseInt(targetEle.id.split('_PolygonIndex_')[1].split('_')[0], 10);
@@ -14407,8 +14479,8 @@ var Highlight = /** @__PURE__ @class */ (function () {
         var layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
         var isMarkerSelect = false;
         if (targetEle.id.indexOf('MarkerIndex') > -1) {
-            var marker$$1 = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
-            isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
+            var marker = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
+            isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
         }
         var borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
         var borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
@@ -14973,22 +15045,22 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             else if (targetId.indexOf('_MarkerIndex_') > -1) {
                 var markerIdex = parseInt(targetId.split('_MarkerIndex_')[1].split('_')[0], 10);
                 var dataIndex = parseInt(targetId.split('_MarkerIndex_')[1].split('_')[2], 10);
-                var marker$$1 = layer.markerSettings[markerIdex];
-                option = marker$$1.tooltipSettings;
-                templateData = marker$$1.dataSource[dataIndex];
+                var marker = layer.markerSettings[markerIdex];
+                option = marker.tooltipSettings;
+                templateData = marker.dataSource[dataIndex];
                 if (option.visible && !isNaN(markerIdex)) {
-                    if (marker$$1.tooltipSettings.format) {
-                        currentData = this.formatter(marker$$1.tooltipSettings.format, marker$$1.dataSource[dataIndex]);
+                    if (marker.tooltipSettings.format) {
+                        currentData = this.formatter(marker.tooltipSettings.format, marker.dataSource[dataIndex]);
                     }
                     else {
-                        if (typeof marker$$1.template !== 'function' && marker$$1.template && !marker$$1.tooltipSettings.valuePath) {
-                            currentData = marker$$1.template.split('>')[1].split('<')[0];
+                        if (typeof marker.template !== 'function' && marker.template && !marker.tooltipSettings.valuePath) {
+                            currentData = marker.template.split('>')[1].split('<')[0];
                         }
                         else {
                             currentData =
-                                formatValue(((marker$$1.tooltipSettings.valuePath.indexOf('.') > -1) ?
-                                    (getValueFromObject(marker$$1.dataSource[dataIndex], marker$$1.tooltipSettings.valuePath)) :
-                                    marker$$1.dataSource[dataIndex][marker$$1.tooltipSettings.valuePath]), this.maps);
+                                formatValue(((marker.tooltipSettings.valuePath.indexOf('.') > -1) ?
+                                    (getValueFromObject(marker.dataSource[dataIndex], marker.tooltipSettings.valuePath)) :
+                                    marker.dataSource[dataIndex][marker.tooltipSettings.valuePath]), this.maps);
                         }
                     }
                 }
@@ -15076,8 +15148,17 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                                 || _this.maps.themeStyle.fontWeight;
                             tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
                                 || _this.maps.themeStyle.tooltipTextOpacity;
+                            var borderObject = isPolygon ? {
+                                color: polygonTooltipOption.border.color ||
+                                    _this.maps.themeStyle.tooltipBorderColor, width: polygonTooltipOption.border.width,
+                                opacity: polygonTooltipOption.border.opacity
+                            } : {
+                                color: option.border.color ||
+                                    _this.maps.themeStyle.tooltipBorderColor, width: option.border.width, opacity: option.border.opacity
+                            };
                             if (tooltipArgs.cancel) {
                                 _this.svgTooltip = new Tooltip({
+                                    theme: _this.maps.theme,
                                     enable: true,
                                     header: '',
                                     data: option['data'],
@@ -15092,11 +15173,12 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                                     availableSize: _this.maps.availableSize,
                                     fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
                                     enableShadow: true,
-                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                    border: borderObject
                                 });
                             }
                             else {
                                 _this.svgTooltip = new Tooltip({
+                                    theme: _this.maps.theme,
                                     enable: true,
                                     header: '',
                                     data: tooltipArgs.options['data'],
@@ -15111,7 +15193,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                                     availableSize: _this.maps.availableSize,
                                     fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
                                     enableShadow: true,
-                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                    border: borderObject
                                 });
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15346,10 +15428,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.maps = maps;
         this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';
         this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';
-        this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor == null ?
-            this.maps.zoomSettings.selectionColor : this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
-        this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color == null ? this.maps.zoomSettings.color :
-            this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
+        this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
+        this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
         this.addEventListener();
     }
     /**
@@ -15790,9 +15870,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @param {number} scale - Specifies the scale value
      * @returns {void}
      */
-    Zoom.prototype.animateTransform = function (element, animate$$1, x, y, scale) {
+    Zoom.prototype.animateTransform = function (element, animate, x, y, scale) {
         var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-        if (!animate$$1 || duration === 0 || this.maps.isTileMap) {
+        if (!animate || duration === 0 || this.maps.isTileMap) {
             if (!(this.maps.isTileMap && element.id.indexOf('_Polygons_Group') > -1)) {
                 element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             }
@@ -15809,7 +15889,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
-    Zoom.prototype.applyTransform = function (maps, animate$$1, isPanning) {
+    Zoom.prototype.applyTransform = function (maps, animate, isPanning) {
         var _this = this;
         var layerIndex;
         this.templateCount = 0;
@@ -15851,7 +15931,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         var markerData = polygonSettings.points;
                                         var path = calculatePolygonPath(maps, maps.tileZoomLevel, _this.currentLayer, markerData);
                                         var element = document.getElementById(maps.element.id + '_LayerIndex_' + _this.index + '_PolygonIndex_' + polygonIndex);
-                                        element.setAttribute('d', path);
+                                        if (!isNullOrUndefined(element)) {
+                                            element.setAttribute('d', path);
+                                        }
                                     });
                                     document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Polygons_Group').style.visibility = '';
                                 }
@@ -15859,7 +15941,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             else if (currentEle.id.indexOf('Legend') === -1) {
                                 changeBorderWidth(currentEle, this_1.index, scale, maps);
                                 maps.zoomTranslatePoint = maps.translatePoint;
-                                this_1.animateTransform(currentEle, animate$$1, x, y, scale);
+                                this_1.animateTransform(currentEle, animate, x, y, scale);
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
@@ -15870,7 +15952,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             var markerAnimation_1;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
-                                    _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate$$1);
+                                    _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
                                     var dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                                     markerAnimation_1 = _this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
@@ -15948,7 +16030,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         var currentX = ((centerX + x) * scale);
                                         var currentY = ((centerY + y) * scale);
                                         var duration = this_1.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this_1.currentLayer.animationDuration;
-                                        if (!animate$$1 || duration === 0) {
+                                        if (!animate || duration === 0) {
                                             childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                         }
                                         else {
@@ -15962,7 +16044,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this_1.index])) {
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
-                            var labelAnimate_1 = !maps.isTileMap && animate$$1;
+                            var labelAnimate_1 = !maps.isTileMap && animate;
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var intersect_1 = [];
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16005,7 +16087,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 _loop_1(i);
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate$$1 || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
+                if (!animate || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
                     this.processTemplate(x, y, scale, maps);
                 }
             }
@@ -16170,8 +16252,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate$$1, currentLabelIndex, isPanning, intersect) {
-        if (animate$$1 === void 0) { animate$$1 = false; }
+    Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate, currentLabelIndex, isPanning, intersect) {
+        if (animate === void 0) { animate = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var labelCollection = this.maps.dataLabelModule.dataLabelCollections;
         var text;
@@ -16219,7 +16301,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 labelX = ((labelX + x) * scale);
                 labelY = ((labelY + y) * scale);
                 zoomtext = label['dataLabelText'];
-                if (!animate$$1 || duration === 0) {
+                if (!animate || duration === 0) {
                     element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
                 }
                 if ((isNullOrUndefined(isPanning) || !isPanning) && (this.maps.layers[this.index].dataLabelSettings.smartLabelMode !== 'None' ||
@@ -16316,52 +16398,39 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         }
                     }
                 }
-                if (animate$$1 || duration > 0) {
+                if (animate || duration > 0) {
                     smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                 }
             }
         }
     };
-    Zoom.prototype.markerTranslate = function (element, factor, x, y, scale, type, animate$$1) {
-        if (animate$$1 === void 0) { animate$$1 = false; }
+    Zoom.prototype.markerTranslate = function (element, factor, x, y, scale, type, animate) {
+        if (animate === void 0) { animate = false; }
         var layerIndex = parseInt(element.id.split('_LayerIndex_')[1].split('_')[0], 10);
         var markerIndex = parseInt(element.id.split('_MarkerIndex_')[1].split('_')[0], 10);
         var dataIndex = parseInt(element.id.split('_dataIndex_')[1].split('_')[0], 10);
         var layer = this.maps.layersCollection[layerIndex];
-        var marker$$1 = layer.markerSettings[markerIndex];
-        if (!isNullOrUndefined(marker$$1) && !isNullOrUndefined(marker$$1.dataSource) && !isNullOrUndefined(marker$$1.dataSource[dataIndex])) {
-            var lng = (!isNullOrUndefined(marker$$1.longitudeValuePath)) ?
-                Number(getValueFromObject(marker$$1.dataSource[dataIndex], marker$$1.longitudeValuePath)) :
-                !isNullOrUndefined(marker$$1.dataSource[dataIndex]['longitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['longitude']) :
-                    !isNullOrUndefined(marker$$1.dataSource[dataIndex]['Longitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['Longitude']) : 0;
-            var lat = (!isNullOrUndefined(marker$$1.latitudeValuePath)) ?
-                Number(getValueFromObject(marker$$1.dataSource[dataIndex], marker$$1.latitudeValuePath)) :
-                !isNullOrUndefined(marker$$1.dataSource[dataIndex]['latitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['latitude']) :
-                    !isNullOrUndefined(marker$$1.dataSource[dataIndex]['Latitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['Latitude']) : 0;
+        var marker = layer.markerSettings[markerIndex];
+        if (!isNullOrUndefined(marker) && !isNullOrUndefined(marker.dataSource) && !isNullOrUndefined(marker.dataSource[dataIndex])) {
+            var lng = (!isNullOrUndefined(marker.longitudeValuePath)) ?
+                Number(getValueFromObject(marker.dataSource[dataIndex], marker.longitudeValuePath)) :
+                !isNullOrUndefined(marker.dataSource[dataIndex]['longitude']) ? parseFloat(marker.dataSource[dataIndex]['longitude']) :
+                    !isNullOrUndefined(marker.dataSource[dataIndex]['Longitude']) ? parseFloat(marker.dataSource[dataIndex]['Longitude']) : 0;
+            var lat = (!isNullOrUndefined(marker.latitudeValuePath)) ?
+                Number(getValueFromObject(marker.dataSource[dataIndex], marker.latitudeValuePath)) :
+                !isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? parseFloat(marker.dataSource[dataIndex]['latitude']) :
+                    !isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? parseFloat(marker.dataSource[dataIndex]['Latitude']) : 0;
             var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
             var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
                     var templateOffset = element.getBoundingClientRect();
-                    element.style.left = ((location_2.x - (templateOffset.width / 2)) + marker$$1.offset.x) + 'px';
-                    element.style.top = ((location_2.y - (templateOffset.height / 2)) + marker$$1.offset.y) + 'px';
-                    if (this.maps.layers[this.maps.baseLayerIndex].layerType === 'GoogleStaticMap') {
-                        var staticMapOffset = getElementByID(this.maps.element.id + '_StaticGoogleMap').getBoundingClientRect();
-                        var staticMapOffsetWidth = 640;
-                        if (element['style']['display'] !== 'none') {
-                            if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])
-                                && (staticMapOffset['y'] > templateOffset['y'] || staticMapOffset['y'] + staticMapOffset['height'] < templateOffset['y'] + templateOffset['height'])) {
-                                element.style.display = 'none';
-                            }
-                            else if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])) {
-                                element.style.display = 'none';
-                            }
-                        }
-                    }
+                    element.style.left = ((location_2.x - (templateOffset.width / 2)) + marker.offset.x) + 'px';
+                    element.style.top = ((location_2.y - (templateOffset.height / 2)) + marker.offset.y) + 'px';
                 }
                 else {
-                    location_2.x += marker$$1.offset.x;
-                    location_2.y += marker$$1.offset.y;
+                    location_2.x += marker.offset.x;
+                    location_2.y += marker.offset.y;
                     element.setAttribute('transform', 'translate( ' + location_2.x + ' ' + location_2.y + ' )');
                 }
             }
@@ -16372,20 +16441,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         location_2.y = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location_2.y)) * scale);
                         var layerOffset = getElementByID(this.maps.element.id + '_Layer_Collections').getBoundingClientRect();
                         var elementOffset = element.parentElement.getBoundingClientRect();
-                        element.style.left = (((location_2.x) + (layerOffset.left - elementOffset.left)) + marker$$1.offset.x) + 'px';
-                        element.style.top = (((location_2.y) + (layerOffset.top - elementOffset.top)) + marker$$1.offset.y) + 'px';
+                        element.style.left = (((location_2.x) + (layerOffset.left - elementOffset.left)) + marker.offset.x) + 'px';
+                        element.style.top = (((location_2.y) + (layerOffset.top - elementOffset.top)) + marker.offset.y) + 'px';
                         element.style.transform = 'translate(-50%, -50%)';
                     }
                     else {
                         var elementOffset = element.getBoundingClientRect();
-                        element.style.left = ((location_2.x + x) * scale) + marker$$1.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                        element.style.top = ((location_2.y + y) * scale) + marker$$1.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                        element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
+                        element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
                     }
                 }
                 else {
-                    location_2.x = (((location_2.x + x) * scale) + marker$$1.offset.x);
-                    location_2.y = (((location_2.y + y) * scale) + marker$$1.offset.y);
-                    if (!animate$$1 || duration === 0) {
+                    location_2.x = (((location_2.x + x) * scale) + marker.offset.x);
+                    location_2.y = (((location_2.y + y) * scale) + marker.offset.y);
+                    if (!animate || duration === 0) {
                         element.setAttribute('transform', 'translate( ' + location_2.x + ' ' + location_2.y + ' )');
                     }
                     else {
@@ -16636,44 +16705,44 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var toolbar = map.zoomSettings.toolbarSettings;
         var button = map.zoomSettings.toolbarSettings.buttonSettings;
         this.maps.toolbarProperties = {
-            toolBarOrientation: toolbar.orientation === 'Horizontal' ? map.zoomSettings.toolBarOrientation : toolbar.orientation,
-            highlightColor: button.highlightColor == null ? map.zoomSettings.highlightColor : button.highlightColor,
-            selectionColor: button.selectionColor == null ? map.zoomSettings.selectionColor : button.selectionColor,
-            horizontalAlignment: toolbar.horizontalAlignment === 'Far' ? map.zoomSettings.horizontalAlignment : toolbar.horizontalAlignment,
-            verticalAlignment: toolbar.verticalAlignment === 'Near' ? map.zoomSettings.verticalAlignment : toolbar.verticalAlignment,
-            color: button.color == null ? map.zoomSettings.color : button.color,
-            shapeOpacity: button.opacity !== 1 ? button.opacity : 1,
-            borderOpacity: button.borderOpacity !== 1 ? button.borderOpacity : 1
+            toolBarOrientation: toolbar.orientation,
+            highlightColor: button.highlightColor,
+            selectionColor: button.selectionColor,
+            horizontalAlignment: toolbar.horizontalAlignment,
+            verticalAlignment: toolbar.verticalAlignment,
+            color: button.color,
+            shapeOpacity: button.opacity,
+            borderOpacity: button.borderOpacity
         };
-        var cx = button.radius / 4;
-        var cy = button.radius / 4;
-        var radius = button.radius / 2;
+        var buttonRadius = button.radius || map.themeStyle.zoomButtonRadius;
+        var cx = buttonRadius / 4;
+        var cy = buttonRadius / 4;
+        var radius = buttonRadius / 2;
         var padding = button.padding;
         var orientation = this.maps.toolbarProperties.toolBarOrientation;
         var toolbarCollection = map.zoomSettings.toolbarSettings.buttonSettings.toolbarItems.map(function (value) { return value; });
-        var toolbarsCollection = toolbarCollection.length === 3 ? map.zoomSettings.toolbars : toolbarCollection;
-        xSpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
-        ySpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
+        xSpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
+        ySpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
         var shadowElement = '<filter id="chart_shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="5"/>';
         shadowElement += '<feOffset dx="-3" dy="4" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1"/>';
         shadowElement += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
         var toolBarLength = toolbarCollection.length;
-        var toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (button.radius + button.borderWidth + (2 * padding));
-        var toolHeight = (orientation === 'Horizontal') ? (button.radius + button.borderWidth + (2 * padding)) : ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
+        var toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (buttonRadius + button.borderWidth + (2 * padding));
+        var toolHeight = (orientation === 'Horizontal') ? (buttonRadius + button.borderWidth + (2 * padding)) : ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
         var defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
         var outerElement = map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', toolbar.backgroundColor, { color: toolbar.borderColor, width: toolbar.borderWidth, opacity: toolbar.borderOpacity }, toolbar.borderOpacity, new Rect((toolbar.borderWidth / 2), (toolbar.borderWidth / 2), (toolWidth - toolbar.borderWidth), (toolHeight - toolbar.borderWidth)), 0, 0));
         this.toolBarGroup.appendChild(outerElement);
-        var scaleX = (button.radius - (button.borderWidth / 2)) / 30;
-        for (var i = 0; i < toolbarsCollection.length; i++) {
+        var scaleX = (buttonRadius - (button.borderWidth / 2)) / 30;
+        for (var i = 0; i < toolbarCollection.length; i++) {
             if (i !== 0) {
-                xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (button.radius + padding) + button.borderWidth) : xSpacing;
-                ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (button.radius + padding) + button.borderWidth);
+                xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (buttonRadius + padding) + button.borderWidth) : xSpacing;
+                ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (buttonRadius + padding) + button.borderWidth);
             }
-            var toolbar_1 = toolbarsCollection[i];
+            var toolbar_1 = toolbarCollection[i];
             var pathStroke = !isNullOrUndefined(this.maps.toolbarProperties.color) ? this.maps.toolbarProperties.color : this.maps.themeStyle.zoomFillColor;
-            var borderColor = button.borderColor || this.maps.themeStyle.zoomFillColor;
+            var borderColor = button.borderColor || (this.maps.themeStyle.zoomBorderColor || this.maps.themeStyle.zoomFillColor);
             this.currentToolbarEle = map.renderer.createGroup({
                 id: map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Group',
                 transform: 'translate( ' + xSpacing + ' ' + ySpacing + ' ) '
@@ -17321,7 +17390,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var pageX;
         var pageY;
         var map = this.maps;
-        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         var target;
         var touches = null;
         var zoom = this.maps.zoomSettings;
@@ -17648,10 +17716,13 @@ var Print = /** @__PURE__ @class */ (function () {
             backgroundElement = backgroundElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                    maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
                 }
             }
@@ -17754,10 +17825,13 @@ var ImageExport = /** @__PURE__ @class */ (function () {
             var svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             var backgroundElement = svgObject.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
             }
             if (!maps.isTileMap) {
@@ -17942,10 +18016,13 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -18069,13 +18146,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
     return PdfExport;
 }());
 
-/**
- * export all modules from maps component
- */
-
-/**
- * exporting all modules from maps index
- */
-
-export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, panComplete, zoomComplete, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, PolygonTooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, PolygonSetting, PolygonSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, calculatePolygonPath, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, Coordinate, MinMax, GeoLocation, measureText, measureTextElement, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, markerClusterListHandler, markerBoundsComparer, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainToggleSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, getHexColor, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, Polygon, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Annotation, Annotations, Arrow, BingMap, Border, Bubble, BubbleSettings, CenterPosition, CircleOption, ColorMapping, ColorMappingSettings, ColorValue, CommonTitleSettings, ConnectorLineSettings, Coordinate, DataLabel, DataLabelSettings, Font, GeoLocation, Highlight, HighlightSettings, ImageExport, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, Internalize, LayerPanel, LayerSettings, Legend, LegendSettings, Line, LineOption, MapAjax, MapLocation, Maps, MapsAreaSettings, MapsTooltip, Margin, Marker, MarkerBase, MarkerClusterData, MarkerClusterSettings, MarkerSettings, MinMax, NavigationLine, NavigationLineSettings, PathOption, PatternOptions, PdfExport, Point, Polygon, PolygonOption, PolygonSetting, PolygonSettings, PolygonTooltipSettings, PolylineOption, Print, Rect, RectOption, Selection, SelectionSettings, ShapeSettings, Size, SubTitleSettings, TextOption, Tile, TitleSettings, ToggleLegendSettings, TooltipSettings, Zoom, ZoomSettings, ZoomToolbarButtonSettings, ZoomToolbarSettings, ZoomToolbarTooltipSettings, acos, aitoff, animate, animationComplete, annotationRendering, appendShape, beforePrint, bubbleClick, bubbleMouseMove, bubbleRendering, calculateBound, calculateCenterFromPixel, calculatePolygonPath, calculateScale, calculateShapes, calculateSize, calculateZoomLevel, changeBorderWidth, changeNavaigationLineWidth, checkPropertyPath, checkShapeDataFields, click, clusterSeparate, clusterTemplate, compareZoomFactor, convertElement, convertElementFromLabel, convertGeoToPoint, convertStringToValue, convertTileLatLongToPoint, createStyle, createSvg, createTooltip, customizeStyle, dataLabelRendering, degreesToRadians, doubleClick, drawBalloon, drawCircle, drawCross, drawDiamond, drawHorizontalLine, drawLine, drawPath, drawPattern, drawPolygon, drawPolyline, drawRectangle, drawStar, drawSymbol, drawSymbols, drawTriangle, drawVerticalLine, elementAnimate, filter, findMidPointOfPolygon, findPosition, fixInitialScaleForTile, formatValue, getClientElement, getDistance, getElement, getElementByID, getElementOffset, getElementsByClassName, getFieldData, getHexColor, getMousePosition, getRatioOfBubble, getShapeData, getTargetElement, getTemplateFunction, getTouchCenter, getTouches, getTranslate, getValueFromObject, getZoomTranslate, isCustomPath, itemHighlight, itemSelection, layerRendering, legendRendering, load, loaded, maintainSelection, maintainStyleClass, maintainToggleSelection, marker, markerBoundsComparer, markerClick, markerClusterClick, markerClusterListHandler, markerClusterMouseMove, markerClusterRendering, markerColorChoose, markerDragEnd, markerDragStart, markerMouseMove, markerRendering, markerShapeChoose, markerTemplate, measureText, measureTextElement, mergeSeparateCluster, mousedown, mousemove, mouseup, onclick, pan, panComplete, processResult, querySelector, radiansToDegrees, removeClass, removeElement, renderLegendShape, renderTextElement, resize, rightClick, roundTo, shapeHighlight, shapeRendering, shapeSelected, showTooltip, sinci, smoothTranslate, stringToNumber, sum, targetTouches, textTrim, timeout, tooltipRender, triggerDownload, triggerItemSelectionEvent, triggerShapeEvent, wordWrap, xToCoordinate, yToCoordinate, zoomAnimate, zoomComplete, zoomIn, zoomOut };
 //# sourceMappingURL=ej2-maps.es5.js.map