@syncfusion/ej2-maps 25.2.5 → 26.1.35

package/src/maps/model/theme.js

@@ -46,7 +46,7 @@ export var Theme;
     };
     /** @private */
     Theme.dataLabelFont = {
-        size: '12px',
+        size: null,
         fontWeight: 'Medium',
         color: '#000000',
         fontStyle: 'Medium',
@@ -199,6 +199,15 @@ export 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'];
@@ -254,7 +263,7 @@ export var HighContrastTheme;
     };
     /** @private */
     HighContrastTheme.dataLabelFont = {
-        size: '12px',
+        size: null,
         fontWeight: 'Medium',
         color: '#000000',
         fontStyle: 'Medium',
@@ -348,13 +357,19 @@ export 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':
@@ -372,14 +387,20 @@ export 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':
@@ -405,9 +426,14 @@ export 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':
@@ -433,9 +459,14 @@ export 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':
@@ -461,9 +492,14 @@ export 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':
@@ -489,9 +525,14 @@ export 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':
@@ -517,9 +558,14 @@ export 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':
@@ -545,9 +591,14 @@ export 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':
@@ -573,9 +624,14 @@ export 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':
@@ -602,9 +658,14 @@ export 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':
@@ -631,9 +692,117 @@ export 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:
@@ -652,13 +821,19 @@ export 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;
     }

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

@@ -245,8 +245,17 @@ var MapsTooltip = /** @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'],
@@ -261,11 +270,12 @@ var MapsTooltip = /** @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'],
@@ -280,7 +290,7 @@ var MapsTooltip = /** @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

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

@@ -42,10 +42,8 @@ var Zoom = /** @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();
     }
     /**
@@ -547,7 +545,9 @@ var Zoom = /** @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 = '';
                                 }
@@ -1041,19 +1041,6 @@ var Zoom = /** @class */ (function () {
                     var templateOffset = element.getBoundingClientRect();
                     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';
-                    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';
-                            }
-                        }
-                    }
                 }
                 else {
                     location_2.x += marker.offset.x;
@@ -1336,44 +1323,44 @@ var Zoom = /** @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 + ' ) '

package/src/maps/utils/enum.d.ts

@@ -48,7 +48,13 @@ export declare type MapsTheme =
 /** Renders a map with material3 theme. */
 'Material3' | 
 /** Renders a map with material3dark theme. */
-'Material3Dark';
+'Material3Dark' | 
+/** Renders a map with fluent2 theme. */
+'Fluent2' | 
+/** Renders a map with fluent2 dark theme. */
+'Fluent2Dark' | 
+/** Renders a map with fluent2 high contrast theme. */
+'Fluent2HighContrast';
 /**
  * Defines the position of the legend.
  */
@@ -110,30 +116,6 @@ export declare type LegendMode =
 'Default' | 
 /** Set the legend as interactive, which is rectangular in shape with an indicator showcasing legend items. */
 'Interactive';
-/**
- * Defines the type of the layer to be rendered in the maps.
- */
-export declare type ShapeLayerType = 
-/**
- * Defines that the geometry shapes will be rendered as map layer.
- */
-'Geometry' | 
-/**
- * Defines that the OpenStreetMap will be rendered as map layer.
- */
-'OSM' | 
-/**
- * Defines that the Bing maps will be rendered as map layer.
- */
-'Bing' | 
-/**
- * Defines that the Google static map will be rendered as map layer.
- */
-'GoogleStaticMap' | 
-/**
- * Defines that Google map will be rendered as map layer.
- */
-'Google';
 /**
  * Defines the type of the layer in maps.
  */
@@ -194,34 +176,6 @@ export declare type ProjectionType =
 'AitOff' | 
 /** Specifies the maps to be rendered in Equirectangular projection type. */
 'Equirectangular';
-/**
- * Defines the type of Bing map to be rendered in the maps.
- */
-export declare type BingMapType = 
-/** Defines the maps to render Bing map layer with aerial type. */
-'Aerial' | 
-/** Defines the maps to render Bing map layer with aerial type with label over the regions. */
-'AerialWithLabel' | 
-/** Defines the maps to render Bing map layer with road maps. */
-'Road' | 
-/** Defines the maps to render a dark version of the road maps. */
-'CanvasDark' | 
-/** Defines the maps to render a lighter version of the road maps. */
-'CanvasLight' | 
-/** Defines the maps to render a grayscale version of the road maps. */
-'CanvasGray';
-/**
- * Defines the type of the Google static map to be rendered in the maps.
- */
-export declare type StaticMapType = 
-/** Specifies the maps to render Google static map layer with road map. */
-'RoadMap' | 
-/** Specifies the maps to render Google static map layer with terrain type. */
-'Terrain' | 
-/** Specifies the maps to render Google static map layer with satellite type. */
-'Satellite' | 
-/** Specifies the maps to render the Google static map with hybrid type. */
-'Hybrid';
 /**
  * Defines the zooming tool bar orientation.
  */

package/src/maps/utils/helper.js

@@ -225,18 +225,20 @@ export function convertGeoToPoint(latitude, longitude, factor, layer, mapModel)
  */
 export 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;
 }
 /**
@@ -1432,15 +1434,6 @@ export function markerTemplate(eventArgs, templateFn, markerID, data, markerInde
         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;
 }
@@ -1865,7 +1858,7 @@ export function getFieldData(dataSource, fields) {
 export 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]);
@@ -2489,8 +2482,7 @@ export function getZoomTranslate(mapObject, layer, animate) {
  */
 export 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;