@syncfusion/ej2-maps 26.2.10 → 27.1.50

package/src/maps/maps.js

@@ -26,7 +26,7 @@ import { Event, remove, L10n, Collection, Internationalization, Complex } from '
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';
 import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';
-import { createStyle } from './utils/helper';
+import { createStyle, getProcessedMarginValue } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
 import { load, click, onclick, rightClick, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
@@ -90,8 +90,6 @@ var Maps = /** @class */ (function (_super) {
         /** @private */
         _this.centerPositionChanged = false;
         /** @private */
-        _this.isTileMapSubLayer = false;
-        /** @private */
         _this.markerNullCount = 0;
         /** @private */
         _this.tileTranslatePoint = new Point(0, 0);
@@ -456,37 +454,11 @@ var Maps = /** @class */ (function (_super) {
             var tileElement = document.getElementById(this.element.id + '_tile_parent');
             var tileElement1 = document.getElementById(this.element.id + '_tiles');
             var tile = tileElement.getBoundingClientRect();
-            var bottom = void 0;
             var top_1;
             var left = void 0;
             left = parseFloat(tileElement.style.left);
-            var titleTextSize = measureText(this.titleSettings.text, this.titleSettings.textStyle);
-            var subTitleTextSize = measureText(this.titleSettings.subtitleSettings.text, this.titleSettings.subtitleSettings.textStyle);
-            if (this.isTileMap && this.isTileMapSubLayer && this.legendSettings.position === 'Bottom' && this.legendSettings.visible) {
-                if (this.legendSettings.mode !== 'Default') {
-                    if (titleTextSize.width !== 0 && titleTextSize.height !== 0) {
-                        top_1 = parseFloat(tileElement.style.top) + (subTitleTextSize.height / 2)
-                            - (this.legendModule.legendBorderRect.height / 2);
-                    }
-                    else {
-                        top_1 = parseFloat(tileElement.style.top) - this.mapAreaRect.y;
-                    }
-                }
-                else {
-                    left = this.legendModule.legendBorderRect.x;
-                    if (titleTextSize.width !== 0 && titleTextSize.height !== 0) {
-                        top_1 = parseFloat(tileElement.style.top) + (subTitleTextSize['height'] / 2)
-                            - this.legendModule.legendBorderRect.y;
-                    }
-                    else {
-                        top_1 = parseFloat(tileElement.style.top) + (subTitleTextSize['height'] / 2);
-                    }
-                }
-            }
-            else {
-                bottom = svg.bottom - tile.bottom - element.offsetTop;
-                top_1 = parseFloat(tileElement.style.top);
-            }
+            var bottom = svg.bottom - tile.bottom - element.offsetTop;
+            top_1 = parseFloat(tileElement.style.top);
             top_1 = (bottom <= 11) ? top_1 : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top_1 * 2);
             left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top_1 + 'px';
@@ -711,8 +683,9 @@ var Maps = /** @class */ (function (_super) {
         var mapsElement = document.getElementById(this.element.id);
         if (!isNullOrUndefined(mapsElement)) {
             var element = mapsElement.getBoundingClientRect();
+            var marginLeft = getProcessedMarginValue(this.margin.left);
             var minPosition = this.isTileMap ?
-                this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) :
+                this.pointToLatLong((this.mapAreaRect.x - marginLeft), -this.mapAreaRect.y) :
                 this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
             var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
                 this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
@@ -779,8 +752,9 @@ var Maps = /** @class */ (function (_super) {
             var ele = createElement('div', {
                 id: this.element.id + '_tile_parent'
             });
+            var marginRight = getProcessedMarginValue(this.margin.right);
             ele.style.cssText = 'position: absolute; left: ' +
-                (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
+                (this.mapAreaRect.x) + 'px; right: ' + (marginRight) + 'px; top: '
                 + (this.mapAreaRect.y + padding) + 'px; height: ' +
                 (this.mapAreaRect.height) + 'px; width: '
                 + (this.mapAreaRect.width) + 'px; overflow: hidden;';
@@ -788,7 +762,7 @@ var Maps = /** @class */ (function (_super) {
                 id: this.element.id + '_tiles'
             });
             ele1.style.cssText = 'position: absolute; left: ' +
-                (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
+                (this.mapAreaRect.x) + 'px;  right: ' + (marginRight) + 'px; top: '
                 + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
                 + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             this.element.appendChild(ele);
@@ -879,7 +853,11 @@ var Maps = /** @class */ (function (_super) {
             opacity: title.textStyle.opacity
         };
         var height;
-        var width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
+        var marginTop = getProcessedMarginValue(this.margin.top);
+        var marginBottom = getProcessedMarginValue(this.margin.bottom);
+        var marginLeft = getProcessedMarginValue(this.margin.left);
+        var marginRight = getProcessedMarginValue(this.margin.right);
+        var width = Math.abs((marginLeft + marginRight) - this.availableSize.width);
         style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
         style.fontWeight = type === 'title' ? style.fontWeight || this.themeStyle.titleFontWeight : style.fontWeight || this.themeStyle.titleFontWeight;
         style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || this.themeStyle.subTitleFontSize || Theme.mapsSubTitleFont.size);
@@ -889,16 +867,16 @@ var Maps = /** @class */ (function (_super) {
             }
             var trimmedTitle = textTrim(width, title.text, style);
             var elementSize = measureText(trimmedTitle, style);
-            var rect = (isNullOrUndefined(bounds)) ? new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height) : bounds;
-            var location_1 = findPosition(rect, title.alignment, elementSize, type);
+            var rect = (isNullOrUndefined(bounds)) ? new Rect(marginLeft, marginTop, this.availableSize.width, this.availableSize.height) : bounds;
+            var location_1 = findPosition(rect, !isNullOrUndefined(title.alignment) ? title.alignment : 'Center', elementSize, type);
             var options = new TextOption(this.element.id + '_Map_' + type, location_1.x, location_1.y, 'start', trimmedTitle);
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', title.text);
             element.setAttribute('role', 'region');
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
-                height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
-                this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
+                height = Math.abs((titleBounds.y + marginBottom) - this.availableSize.height);
+                this.mapAreaRect = new Rect(marginLeft, titleBounds.y + 10, width, height - 10);
             }
             if (type !== 'subtitle' && title.subtitleSettings.text) {
                 this.renderTitle(title.subtitleSettings, 'subtitle', titleBounds, groupEle);
@@ -908,8 +886,8 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         else {
-            height = Math.abs((this.margin.top + this.margin.bottom) - this.availableSize.height);
-            this.mapAreaRect = new Rect(this.margin.left, this.margin.top, width, height);
+            height = Math.abs((marginTop + marginBottom) - this.availableSize.height);
+            this.mapAreaRect = new Rect(marginLeft, marginTop, width, height);
         }
     };
     /**
@@ -993,13 +971,20 @@ var Maps = /** @class */ (function (_super) {
             removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
         }
     };
+    /**
+     * This method is used to perform operations when keyboard key from maps.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on maps.
+     * @returns {void}
+     * @private
+     */
     Maps.prototype.keyUpHandler = function (event) {
         var id = event.target['id'];
         if (this.isTileMap) {
             this.removeTileMap();
         }
         if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
-            this.keyboardHighlightSelection(id, event.type);
+            this.keyboardHighlightSelection(id, event);
         }
         else if (id.indexOf('_LayerIndex_') === -1 && id.indexOf('shapeIndex') === -1 &&
             getElementsByClassName('highlightMapStyle').length > 0) {
@@ -1009,7 +994,8 @@ var Maps = /** @class */ (function (_super) {
             }
         }
     };
-    Maps.prototype.keyboardHighlightSelection = function (id, key) {
+    Maps.prototype.keyboardHighlightSelection = function (id, event) {
+        var key = event.type;
         var layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
         var shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
         //eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1029,6 +1015,13 @@ var Maps = /** @class */ (function (_super) {
             this.highlightModule.handleHighlight(event.target, layerIndex, data, shapeData);
         }
     };
+    /**
+     * This method is used to perform operations when keyboard down from maps.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on maps.
+     * @returns {void}
+     * @private
+     */
     Maps.prototype.keyDownHandler = function (event) {
         var zoom = this.zoomModule;
         var id = event.target['id'];
@@ -1094,7 +1087,7 @@ var Maps = /** @class */ (function (_super) {
                 }
             }
             if (id.indexOf('shapeIndex') > -1) {
-                this.keyboardHighlightSelection(id, event.type);
+                this.keyboardHighlightSelection(id, event);
             }
         }
         if (this.zoomModule) {
@@ -1788,7 +1781,7 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.shapeSelection = function (layerIndex, propertyName, name, enable) {
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.layers[layerIndex])) {
             var targetEle = void 0;
             var subLayerIndex = void 0;
             var popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
@@ -1807,7 +1800,7 @@ var Maps = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (selectionsettings.enable) {
+            if (!isNullOrUndefined(selectionsettings) && selectionsettings.enable) {
                 var targetId = void 0;
                 var dataIndex = void 0;
                 var shapeIndex = void 0;
@@ -2013,6 +2006,9 @@ var Maps = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.mapsTooltipModule)) {
             this.mapsTooltipModule.removeEventListener();
         }
+        if (!isNullOrUndefined(this.bingMap)) {
+            this.bingMap.destroy();
+        }
         _super.prototype.destroy.call(this);
         this.shapeSelectionItem = [];
         this.toggledElementId = [];
@@ -2554,16 +2550,13 @@ var Maps = /** @class */ (function (_super) {
      * @returns {GeoPosition}- Returns the geographical coordinates.
      */
     Maps.prototype.getGeoLocation = function (layerIndex, x, y) {
-        var latitude = 0;
-        var longitude = 0;
-        if (!this.isDestroyed) {
+        var latitude = null;
+        var longitude = null;
+        if (!this.isDestroyed && !this.isTileMap) {
             var container = document.getElementById(this.element.id);
             var elementClientRect = this.element.getBoundingClientRect();
-            var bodyClientRect = document.body.getBoundingClientRect();
-            var pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft ||
-                (elementClientRect.left - bodyClientRect.left) : 0);
-            var pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop ||
-                (elementClientRect.top - bodyClientRect.top) : 0);
+            var pageX = x - container.offsetLeft - (elementClientRect.left - container.offsetLeft) - window.scrollX;
+            var pageY = y - container.offsetTop - (elementClientRect.top - container.offsetTop) - window.scrollY;
             var currentLayer = this.layersCollection[layerIndex];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var translate = getTranslate(this, currentLayer, false);
@@ -2590,15 +2583,16 @@ var Maps = /** @class */ (function (_super) {
      * @returns {GeoPosition} - Returns the geographical coordinates.
      */
     Maps.prototype.getTileGeoLocation = function (x, y) {
-        var latitude = 0;
-        var longitude = 0;
-        if (!this.isDestroyed) {
-            var container = document.getElementById(this.element.id);
-            var ele = document.getElementById(this.element.id + '_tile_parent');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0)), y + this.mapAreaRect.y - (ele.offsetTop - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0)));
-            latitude = latLong['latitude'];
-            longitude = latLong['longitude'];
+        var latitude = null;
+        var longitude = null;
+        if (this.isTileMap) {
+            var element = document.getElementById(this.element.id + '_tile_parent');
+            if (!this.isDestroyed && !isNullOrUndefined(element)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var latLong = this.pointToLatLong(x + this.mapAreaRect.x - element.offsetLeft, y + this.mapAreaRect.y - element.offsetTop);
+                latitude = latLong['latitude'];
+                longitude = latLong['longitude'];
+            }
         }
         return { latitude: latitude, longitude: longitude };
     };
@@ -2614,7 +2608,7 @@ var Maps = /** @class */ (function (_super) {
         var longitude = 0;
         if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
             var padding = 10;
-            pageY = pageY + padding;
+            pageY = !isNullOrUndefined(this.markerDragArgument) ? pageY + padding : pageY;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
             var y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);

package/src/maps/model/export-pdf.js

@@ -43,7 +43,8 @@ var PdfExport = /** @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' || maps.theme === 'Fluent2')
+            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)');
             }

package/src/maps/model/print.js

@@ -54,7 +54,8 @@ var Print = /** @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' || maps.theme === 'Fluent2')
+                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)');
                 }

package/src/maps/model/theme.js

@@ -175,14 +175,6 @@ export function getShapeColor(theme) {
             themePalette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6',
                 '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
             break;
-        case 'bootstrap5':
-            themePalette = ['#262E0B', '#668E1F', '#AF6E10', '#862C0B', '#1F2D50',
-                '#64680B', '#311508', '#4C4C81', '#0C7DA0', '#862C0B'];
-            break;
-        case 'bootstrap5dark':
-            themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
-                '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
-            break;
         case 'fluent':
             themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
                 '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
@@ -208,6 +200,11 @@ export function getShapeColor(theme) {
             themePalette = ['#9BB449', '#2A72D5', '#43B786', '#3F579A', '#584EC6',
                 '#E85F9C', '#6E7A89', '#EA6266', '#0B6A0B', '#C19C00'];
             break;
+        case 'bootstrap5':
+        case 'bootstrap5dark':
+            themePalette = ['#6610F2', '#6f42C1', '#D63384', '#DC3545',
+                '#FD7E14', '#FFC107', '#198754', '#0DCAF0'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -504,68 +501,72 @@ export function getThemeStyle(theme) {
             break;
         case 'bootstrap5':
             style = {
-                backgroundColor: 'rgba(255,255,255, 0.0)',
-                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
                 titleFontColor: '#212529',
                 subTitleFontColor: '#212529',
                 legendTitleFontColor: '#212529',
                 legendTextColor: '#212529',
                 dataLabelFontColor: '#212529',
-                tooltipFontColor: '#F9FAFB',
-                tooltipFillColor: '#212529',
-                zoomFillColor: '#6C757D',
-                fontFamily: 'Helvetica Neue',
-                fontSize: '12px',
-                fontWeight: 'Medium',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFillColor: '#000000',
+                zoomFillColor: '#6E757D',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
                 titleFontSize: '14px',
-                legendFontSize: '12px',
-                tooltipFillOpacity: 1,
+                subTitleFontSize: '12px',
+                legendFontSize: '10px',
+                tooltipFillOpacity: 0.9,
                 tooltipTextOpacity: 1,
-                labelFontFamily: 'Helvetica Neue',
-                titleFontWeight: 'normal',
-                zoomSelectionColor: '#343A40',
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '400',
+                zoomSelectionColor: '#212529',
+                zoomBorderColor: '#DEE2E6',
                 shapeFill: '#E9ECEF',
-                shapeBorderColor: '#000000',
-                rectangleZoomFillColor: '#d3d3d3',
-                rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900',
+                shapeBorderColor: '#DEE2E6',
+                zoomButtonRadius: 32,
+                rectangleZoomBorderColor: '#0D6EFD',
+                rectangleZoomFillColor: '#86B7FE',
+                rectangleZoomFillOpacity: 0.30,
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0,
-                tooltipBorderColor: 'transparent',
-                zoomButtonRadius: 30
+                tooltipBorderColor: 'transparent'
             };
             break;
         case 'bootstrap5dark':
             style = {
-                backgroundColor: 'rgba(255,255,255, 0.0)',
-                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
-                titleFontColor: '#FFFFFF',
-                subTitleFontColor: '#FFFFFF',
-                legendTitleFontColor: '#FFFFFF',
-                legendTextColor: '#FFFFFF',
-                dataLabelFontColor: '#FFFFFF',
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#DEE2E6',
+                subTitleFontColor: '#DEE2E6',
+                legendTitleFontColor: '#DEE2E6',
+                legendTextColor: '#DEE2E6',
+                dataLabelFontColor: '#DEE2E6',
                 tooltipFontColor: '#212529',
-                tooltipFillColor: '#E9ECEF',
-                zoomFillColor: '#B5BABE',
-                fontFamily: 'Helvetica Neue',
-                fontSize: '12px',
-                fontWeight: 'Medium',
+                tooltipFillColor: '#FFFFFF',
+                zoomFillColor: '#ADB5BD',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
                 titleFontSize: '14px',
-                legendFontSize: '12px',
-                tooltipFillOpacity: 1,
+                subTitleFontSize: '12px',
+                legendFontSize: '10px',
+                tooltipFillOpacity: 0.9,
                 tooltipTextOpacity: 1,
-                labelFontFamily: 'Helvetica Neue',
-                titleFontWeight: 'normal',
-                zoomSelectionColor: '#DEE2E6',
-                shapeFill: '#495057',
-                shapeBorderColor: '#000000',
-                rectangleZoomFillColor: '#d3d3d3',
-                rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900',
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '400',
+                zoomSelectionColor: '#F8F9FA',
+                zoomBorderColor: '#495057',
+                shapeFill: '#343A40',
+                shapeBorderColor: '#495057',
+                zoomButtonRadius: 32,
+                rectangleZoomFillColor: '#86B7FE',
+                rectangleZoomBorderColor: '#0D6EFD',
+                rectangleZoomFillOpacity: 0.30,
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0,
-                tooltipBorderColor: 'transparent',
-                zoomButtonRadius: 30
+                tooltipBorderColor: 'transparent'
             };
             break;
         case 'fluent':
@@ -794,8 +795,8 @@ export function getThemeStyle(theme) {
                 titleFontWeight: '600',
                 zoomSelectionColor: '#FFFFFF',
                 zoomBorderColor: '#FFFFFF',
-                shapeFill: '#292827',
-                shapeBorderColor: '#292827',
+                shapeFill: '#FFFFFF',
+                shapeBorderColor: '#FFFFFF',
                 rectangleZoomFillColor: '#1AEBFF',
                 rectangleZoomFillOpacity: 0.25,
                 rectangleZoomBorderColor: '#1AEBFF',

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

@@ -76,10 +76,12 @@ var Annotations = /** @class */ (function () {
         var bounds = map.svgObject.getBoundingClientRect();
         left = Math.abs(bounds.left - elementRect.left);
         top = Math.abs(bounds.top - elementRect.top);
-        var annotationXValue = (annotation.x.indexOf('%') > -1) ? (availSize.width / 100) * parseFloat(annotation.x) :
-            parseFloat(annotation.x);
-        var annotationYValue = (annotation.y.indexOf('%') > -1) ? (availSize.height / 100) * parseFloat(annotation.y) :
-            parseFloat(annotation.y);
+        var annotationX = !isNullOrUndefined(annotation.x) ? annotation.x : '0%';
+        var annotationY = !isNullOrUndefined(annotation.y) ? annotation.y : '0%';
+        var annotationXValue = (annotationX.indexOf('%') > -1) ? (availSize.width / 100) * parseFloat(annotationX) :
+            parseFloat(annotationX);
+        var annotationYValue = (annotationY.indexOf('%') > -1) ? (availSize.height / 100) * parseFloat(annotationY) :
+            parseFloat(annotationY);
         left = (annotation.horizontalAlignment === 'None') ? (left + annotationXValue) : left;
         top = (annotation.verticalAlignment === 'None') ? (top + annotationYValue) : top;
         switch (annotation.verticalAlignment) {

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

@@ -92,7 +92,7 @@ var MapsTooltip = /** @class */ (function () {
                     layer.shapePropertyPath : [layer.shapePropertyPath]);
                 if (!isNullOrUndefined(properties)) {
                     for (var k = 0; k < properties.length; k++) {
-                        if (!isNullOrUndefined(layer.dataSource)) {
+                        if (!isNullOrUndefined(layer.dataSource) && !isNullOrUndefined(layer.shapeDataPath)) {
                             for (var i = 0; i < layer['dataSource']['length']; i++) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 var data = layer.dataSource[i];
@@ -138,7 +138,7 @@ var MapsTooltip = /** @class */ (function () {
                             formatValue(((option.valuePath.indexOf('.') > -1) ?
                                 (getValueFromObject(layer.dataSource[index], option.valuePath)) :
                                 layer.dataSource[index][option.valuePath]), this.maps) : value[shapePath];
-                        if (isNullOrUndefined(currentData)) {
+                        if (isNullOrUndefined(currentData) && !isNullOrUndefined(option.valuePath)) {
                             currentData = (option.valuePath.indexOf('.') > -1) ?
                                 (getValueFromObject(value, option.valuePath)) : value[option.valuePath];
                         }
@@ -161,10 +161,12 @@ var MapsTooltip = /** @class */ (function () {
                             currentData = marker.template.split('>')[1].split('<')[0];
                         }
                         else {
-                            currentData =
-                                formatValue(((marker.tooltipSettings.valuePath.indexOf('.') > -1) ?
-                                    (getValueFromObject(marker.dataSource[dataIndex], marker.tooltipSettings.valuePath)) :
-                                    marker.dataSource[dataIndex][marker.tooltipSettings.valuePath]), this.maps);
+                            if (!isNullOrUndefined(marker.tooltipSettings.valuePath)) {
+                                currentData =
+                                    formatValue(((marker.tooltipSettings.valuePath.indexOf('.') > -1) ?
+                                        (getValueFromObject(marker.dataSource[dataIndex], marker.tooltipSettings.valuePath)) :
+                                        marker.dataSource[dataIndex][marker.tooltipSettings.valuePath]), this.maps);
+                            }
                         }
                     }
                 }
@@ -181,10 +183,12 @@ var MapsTooltip = /** @class */ (function () {
                         currentData = this.formatter(bubble.tooltipSettings.format, bubble.dataSource[dataIndex]);
                     }
                     else {
-                        currentData =
-                            formatValue(((bubble.tooltipSettings.valuePath.indexOf('.') > -1) ?
-                                (getValueFromObject(bubble.dataSource[dataIndex], bubble.tooltipSettings.valuePath)) :
-                                bubble.dataSource[dataIndex][bubble.tooltipSettings.valuePath]), this.maps);
+                        if (!isNullOrUndefined(bubble.tooltipSettings.valuePath)) {
+                            currentData =
+                                formatValue(((bubble.tooltipSettings.valuePath.indexOf('.') > -1) ?
+                                    (getValueFromObject(bubble.dataSource[dataIndex], bubble.tooltipSettings.valuePath)) :
+                                    bubble.dataSource[dataIndex][bubble.tooltipSettings.valuePath]), this.maps);
+                        }
                     }
                 }
                 //location.y = this.template(option, location);
@@ -234,7 +238,8 @@ var MapsTooltip = /** @class */ (function () {
                     options: tooltipOption,
                     fill: isPolygon ? polygonFill : option.fill,
                     maps: this.maps, latitude: latitude, longitude: longitude,
-                    element: target, eventArgs: e, content: isPolygon ? polygon.tooltipText : !isNullOrUndefined(currentData) ? currentData.toString() : ''
+                    element: target, eventArgs: e, content: isPolygon ? (!isNullOrUndefined(polygon.tooltipText) ? polygon.tooltipText : '') :
+                        !isNullOrUndefined(currentData) ? currentData.toString() : ''
                 };
                 if (tooltipArgs.content !== '' || tooltipArgs.options['template'] !== '') {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -1,6 +1,6 @@
 import { Point, getElementByID, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint, measureTextElement } from '../utils/helper';
 import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches, targetTouches } from '../utils/helper';
-import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker } from '../utils/helper';
+import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker, getProcessedMarginValue } from '../utils/helper';
 import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose, calculatePolygonPath } from '../utils/helper';
 import { markerShapeChoose } from '../utils/helper';
 import { isNullOrUndefined, EventHandler, Browser, remove, createElement, animationMode } from '@syncfusion/ej2-base';
@@ -1124,6 +1124,7 @@ var Zoom = /** @class */ (function () {
         var layerY = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerY'] : event.touches[0].pageY;
         this.maps.mergeCluster();
         if (!map.isTileMap) {
+            var marginTop = getProcessedMarginValue(map.margin.top);
             var legendElement = document.getElementById(map.element.id + '_Legend_Group');
             var legendHeight = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
             x = translatePoint.x - xDifference / scale;
@@ -1133,7 +1134,7 @@ var Zoom = /** @class */ (function () {
             var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                 ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             var panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
-                ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
+                ((layerRect.top + layerRect.height + legendHeight + marginTop) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, layerX, layerY);
             var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
@@ -1730,7 +1731,7 @@ var Zoom = /** @class */ (function () {
      * @private
      */
     Zoom.prototype.removeToolbarOpacity = function (factor, id) {
-        if (this.maps.zoomModule && this.maps.zoomSettings.enable) {
+        if (!isNullOrUndefined(this.maps) && this.maps.zoomModule && this.maps.zoomSettings.enable) {
             if (getElementByID(this.maps.element.id + '_Zooming_KitCollection') && id.indexOf(this.maps.element.id + '_Zooming_') > -1) {
                 if (this.maps.isDevice) {
                     getElementByID(this.maps.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
@@ -1981,6 +1982,9 @@ var Zoom = /** @class */ (function () {
             //eslint-disable-next-line @typescript-eslint/no-unused-vars
             target = e.target;
         }
+        if (!this.isTouch) {
+            e.preventDefault();
+        }
         if (!this.maps.zoomSettings.enablePanning) {
             this.isPan = this.isPanModeEnabled = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
                 : this.zoomColor === this.selectionColor;

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

@@ -929,6 +929,14 @@ export declare function getElementByID(id: string): Element;
  * @private
  */
 export declare function getClientElement(id: string): ClientRect;
+/**
+ * Function to return the number value for the string value.
+ *
+ * @param {string | number} marginValue - Specifies the margin value.
+ * @returns {number} - Returns the number value.
+ * @private
+ */
+export declare function getProcessedMarginValue(marginValue: string | number): number;
 /**
  * To apply internalization.
  *