@syncfusion/ej2-maps 26.2.10 → 27.1.50

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

@@ -22,7 +22,10 @@ class Size {
  * @private
  */
 function stringToNumber(value, containerSize) {
-    if (value !== null && value !== undefined) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    if (!isNullOrUndefined(value)) {
         return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
     }
     return null;
@@ -40,8 +43,10 @@ function calculateSize(maps) {
     maps.element.style.setProperty('display', 'block');
     const containerWidth = maps.element.clientWidth;
     const containerHeight = maps.element.clientHeight;
-    const containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
-    const containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    const containerElementWidth = (typeof maps.element.style.width === 'string') ?
+        stringToNumber(maps.element.style.width, containerWidth) : maps.element.style.width;
+    const containerElementHeight = (typeof maps.element.style.height === 'string') ?
+        stringToNumber(maps.element.style.height, containerHeight) : maps.element.style.height;
     let availableSize = new Size(0, 0);
     if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
         availableSize = new Size(0, 0);
@@ -134,7 +139,7 @@ function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
     const latitudeMinMax = mapModel.baseMapBounds.latitude;
     let latRadian = degreesToRadians(latitude);
     const lngRadian = degreesToRadians(longitude);
-    const type = mapModel.projectionType;
+    const type = !isNullOrUndefined(mapModel.projectionType) ? mapModel.projectionType : 'Mercator';
     const size = (mapModel.isTileMap) ? Math.pow(2, 1) * 256 : (isNullOrUndefined(factor)) ?
         Math.min(mapSize.width, mapSize.height) : (Math.min(mapSize.width, mapSize.height) * factor);
     if (layer.geometryType === 'Normal') {
@@ -866,26 +871,54 @@ function markerColorChoose(eventArgs, data) {
  */
 function markerShapeChoose(eventArgs, data) {
     if (!isNullOrUndefined(eventArgs.shapeValuePath) && !isNullOrUndefined(data[eventArgs.shapeValuePath])) {
-        const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
-            (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
-            data[eventArgs.shapeValuePath]);
-        eventArgs.shape = (shape.toString() !== '') ? shape : eventArgs.shape;
+        updateShape(eventArgs, data);
         if (data[eventArgs.shapeValuePath] === 'Image') {
-            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
-                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
-                    data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
+            updateImageUrl(eventArgs, data);
         }
     }
     else {
-        const shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = (shapes.toString() !== '') ? shapes : eventArgs.shape;
-        const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
-            ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
-                data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
-        eventArgs.imageUrl = shapeImage;
+        updateShape(eventArgs, data);
+        updateImageUrl(eventArgs, data);
     }
     return eventArgs;
 }
+/**
+ *
+ * @param {any} path - contains a dot, it implies that the desired property is nested within the object.
+ * @param {any} data - The data object from which the value is to be retrieved. This can be any object that contains the properties specified in the path.
+ * @returns {any} - Returns the value of the property specified in the path.
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getValue(path, data) {
+    return (path.indexOf('.') > -1) ? getValueFromObject(data, path).toString() : data[path];
+}
+/**
+ *
+ * @param {any} eventArgs - Specifies the event arguments
+ * @param {any} data - Specifies the data
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function updateShape(eventArgs, data) {
+    if (!isNullOrUndefined(eventArgs.shapeValuePath)) {
+        const shape = getValue(eventArgs.shapeValuePath, data);
+        eventArgs.shape = (!isNullOrUndefined(shape) && shape.toString() !== '') ? shape : eventArgs.shape;
+    }
+}
+/**
+ *
+ * @param {any} eventArgs - Specifies the event arguments
+ * @param {any} data - Specifies the data
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function updateImageUrl(eventArgs, data) {
+    if (!isNullOrUndefined(eventArgs.imageUrlValuePath)) {
+        const imageUrl = getValue(eventArgs.imageUrlValuePath, data);
+        eventArgs.imageUrl = (!isNullOrUndefined(imageUrl)) ? imageUrl : eventArgs.imageUrl;
+    }
+}
 /**
  *
  * @param {LayerSettings} currentLayer - Specifies the current layer
@@ -982,7 +1015,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         const longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
                             Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
                             !isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
-                                !isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
+                                !isNullOrUndefined(markerData['Longitude']) ? parseFloat(markerData['Longitude']) : 0;
                         const latitude = (!isNullOrUndefined(markerSetting.latitudeValuePath)) ?
                             Number(getValueFromObject(markerData, markerSetting.latitudeValuePath)) :
                             !isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
@@ -1314,8 +1347,8 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
     };
     removeElement(markerID);
     const ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
-    const x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + (!isNullOrUndefined(offset.x) ? offset.x : 0);
-    const y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + (!isNullOrUndefined(offset.y) ? offset.y : 0);
+    const x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + ((!isNullOrUndefined(offset) && !isNullOrUndefined(offset.x)) ? offset.x : 0);
+    const y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + ((!isNullOrUndefined(offset) && !isNullOrUndefined(offset.y)) ? offset.y : 0);
     ele.setAttribute('transform', 'translate( ' + x + ' ' + y + ' )');
     maintainSelection(maps.selectedMarkerElementId, maps.markerSelectionClass, ele, 'MarkerselectionMapStyle');
     if (maps.legendSettings.toggleLegendSettings.enable && maps.legendSettings.type === 'Markers') {
@@ -1682,9 +1715,9 @@ function drawVerticalLine(maps, options, size, location, element) {
  */
 function drawStar(maps, options, size, location, element) {
     options.d = 'M ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2)
-        + ' ' + (location.y - size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y - size.height / 6) + ' L '
-        + (location.x - size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + location.x + ' ' + (location.y - size.height / 2)
-        + ' L ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' Z';
+        + ' ' + (location.y - size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y - size.height / 6)
+        + ' L ' + (location.x - size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + location.x + ' ' +
+        (location.y - size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' Z';
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
@@ -1780,7 +1813,7 @@ function getFieldData(dataSource, fields) {
 function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 layer) {
-    if (!(isNullOrUndefined(properties)) && !isNullOrUndefined(dataSource)) {
+    if (!(isNullOrUndefined(properties)) && !isNullOrUndefined(dataSource) && !isNullOrUndefined(dataPath)) {
         for (let i = 0; i < dataSource.length; i++) {
             const shapeDataPath = ((dataPath.indexOf('.') > -1) ? getValueFromObject(dataSource[i], dataPath) :
                 dataSource[i][dataPath]);
@@ -2114,9 +2147,9 @@ function getTranslate(mapObject, layer, animate) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const max = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['max'] : null;
     const zoomFactor = animate ? 1 : mapObject.mapScaleValue;
-    if (isNullOrUndefined(mapObject.currentShapeDataLength)) {
+    if (isNullOrUndefined(mapObject.currentShapeDataLength) && !isNullOrUndefined(layer.shapeData)) {
         mapObject.currentShapeDataLength = !isNullOrUndefined(layer.shapeData['features'])
-            ? layer.shapeData['features'].length : layer.shapeData['geometries'].length;
+            ? layer.shapeData['features'].length : !isNullOrUndefined(layer.shapeData['geometries']) ? layer.shapeData['geometries'].length : 0;
     }
     const size = (mapObject.totalRect && mapObject.legendSettings.visible) ? mapObject.totalRect : mapObject.mapAreaRect;
     const availSize = mapObject.availableSize;
@@ -2196,7 +2229,8 @@ function getTranslate(mapObject, layer, animate) {
                         x = size.x + ((-(min['x']))
                             + ((size.width / 2) - (mapWidth / 2)));
                     }
-                    else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
+                    else if ((mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width)
+                        && !isNullOrUndefined(mapObject.translatePoint) && !isNullOrUndefined(mapObject.previousTranslate)) {
                         const cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                         let cmapWidth = mapWidth;
                         cmapWidth *= cscaleFactor;
@@ -2437,6 +2471,16 @@ function getClientElement(id) {
         return null;
     }
 }
+/**
+ * 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
+ */
+function getProcessedMarginValue(marginValue) {
+    return typeof marginValue === 'string' ? parseFloat(marginValue) : marginValue;
+}
 /**
  * To apply internalization.
  *
@@ -2625,8 +2669,8 @@ function createStyle(id, className, eventArgs) {
         id: id
     });
     styleEle.innerText = '.' + className + '{fill:'
-        + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
-        'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
+        + eventArgs['fill'] + ';' + 'fill-opacity:' + (!isNullOrUndefined(eventArgs['opacity']) ? (eventArgs['opacity']).toString() : '1') + ';' +
+        'stroke-opacity:' + (!isNullOrUndefined(eventArgs['border']['opacity']) ? (eventArgs['border']['opacity']).toString() : '1') + ';' +
         'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
         'stroke:' + eventArgs['border']['color'] + ';' + '}';
     return styleEle;
@@ -2645,9 +2689,9 @@ function customizeStyle(id, className, eventArgs) {
     const styleEle = getElement(id);
     if (!isNullOrUndefined(styleEle)) {
         styleEle.innerText = '.' + className + '{fill:'
-            + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
+            + eventArgs['fill'] + ';' + 'fill-opacity:' + (!isNullOrUndefined(eventArgs['opacity']) ? (eventArgs['opacity']).toString() : '1') + ';' +
             'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
-            'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
+            'stroke-opacity:' + (!isNullOrUndefined(eventArgs['border']['opacity']) ? (eventArgs['border']['opacity']).toString() : '1') + ';' +
             'stroke:' + eventArgs['border']['color'] + '}';
     }
 }
@@ -3666,14 +3710,6 @@ 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'];
@@ -3699,6 +3735,11 @@ 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'];
@@ -3995,68 +4036,72 @@ 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':
@@ -4285,8 +4330,8 @@ function getThemeStyle(theme) {
                 titleFontWeight: '600',
                 zoomSelectionColor: '#FFFFFF',
                 zoomBorderColor: '#FFFFFF',
-                shapeFill: '#292827',
-                shapeBorderColor: '#292827',
+                shapeFill: '#FFFFFF',
+                shapeBorderColor: '#FFFFFF',
                 rectangleZoomFillColor: '#1AEBFF',
                 rectangleZoomFillOpacity: 0.25,
                 rectangleZoomBorderColor: '#1AEBFF',
@@ -6127,7 +6172,7 @@ class LayerPanel {
         bing.imageUrl = layer.urlTemplate;
         bing.subDomains = ['t0', 't1', 't2', 't3'];
         bing.maxZoom = '21';
-        proxy.mapObject['bingMap'] = bing;
+        proxy.mapObject.bingMap = bing;
         proxy.renderTileLayer(proxy, layer, layerIndex, bing);
         this.mapObject.arrangeTemplate();
         if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
@@ -6143,17 +6188,19 @@ class LayerPanel {
                     Number(getValueFromObject(bubbleSettings.dataSource[i], bubbleSettings.valuePath)) :
                     parseFloat(bubbleSettings.dataSource[i][bubbleSettings.valuePath])) :
                     parseFloat(bubbleSettings.dataSource[i][bubbleSettings.valuePath]);
-                if (i !== 0) {
-                    if (bubbledata > range.max) {
-                        range.max = bubbledata;
+                if (!isNaN(bubbledata)) {
+                    if (i !== 0) {
+                        if (bubbledata > range.max) {
+                            range.max = bubbledata;
+                        }
+                        else if (bubbledata < range.min) {
+                            range.min = bubbledata;
+                        }
                     }
-                    else if (bubbledata < range.min) {
-                        range.min = bubbledata;
+                    else {
+                        range.max = range.min = bubbledata;
                     }
                 }
-                else {
-                    range.max = range.min = bubbledata;
-                }
             }
         }
     }
@@ -6183,7 +6230,8 @@ class LayerPanel {
         if (isNullOrUndefined(this.mapObject.baseMapRectBounds) && this.currentLayer.isBaseLayer) {
             this.mapObject.baseMapRectBounds = this.rectBounds;
         }
-        const colors = shapeSettings.palette.length > 1 ? shapeSettings.palette : getShapeColor(this.mapObject.theme);
+        const colors = (!isNullOrUndefined(shapeSettings.palette) && shapeSettings.palette.length > 1) ?
+            shapeSettings.palette : getShapeColor(this.mapObject.theme);
         const labelTemplateEle = createElement('div', {
             id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_Label_Template_Group',
             className: this.mapObject.element.id + '_template'
@@ -6954,7 +7002,7 @@ class LayerPanel {
         const endX = Math.min(xcount, ((-tileTranslatePoint.x + size.width + (xRight * 256)) / 256) + 1);
         const startX = (-((tileTranslatePoint.x + (xLeft * 256)) + 256) / 256);
         const startY = (-(tileTranslatePoint.y + 256) / 256);
-        bing = bing || this.bing || this.mapObject['bingMap'];
+        bing = bing || this.bing || this.mapObject.bingMap;
         for (let i = Math.round(startX); i < Math.round(endX); i++) {
             for (let j = Math.round(startY); j < Math.round(endY); j++) {
                 const x = 256 * i + tileTranslatePoint.x;
@@ -6968,10 +7016,11 @@ class LayerPanel {
                         const tile = new Tile(tileI % ycount, j);
                         tile.left = Math.round(x);
                         tile.top = Math.round(y);
-                        if ((bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
+                        if ((bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '' && baseLayer.urlTemplate.indexOf('quadkey') > -1)) {
                             tile.src = bing.getBingMap(tile, '', '', userLang, bing.imageUrl, bing.subDomains);
                         }
                         else {
+                            bing = null;
                             tile.src = this.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', tile.x.toString())
                                 .replace('tileY', tile.y.toString());
                         }
@@ -7157,63 +7206,6 @@ class LayerPanel {
             animatedTiles.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
         }
     }
-    /**
-     * Static map rendering.
-     *
-     * @param {string} apikey - Specifies the api key
-     * @param {number} zoom - Specifies the zoom value
-     * @returns {void}
-     * @private
-     */
-    renderGoogleMap(apikey, zoom) {
-        const map = this.mapObject;
-        // zoom = this.mapObject.zoomSettings.shouldZoomInitially ? this.mapObject.markerZoomFactor : zoom;
-        zoom = this.mapObject.tileZoomLevel;
-        const totalSize = Math.pow(2, zoom) * 256;
-        const x = (map.mapAreaRect.width / 2) - (totalSize / 2);
-        const y = (map.mapAreaRect.height / 2) - (totalSize / 2);
-        const centerPoint = new Point(null, null);
-        let diffX = 0;
-        let diffY = 0;
-        const position = convertTileLatLongToPoint(centerPoint, zoom, { x: x, y: y }, this.isMapCoordinates);
-        if (map.zoomModule && map.zoomSettings.enable) {
-            diffX = map.zoomModule.mouseDownLatLong['x'] - map.zoomModule.mouseMoveLatLong['x'];
-            diffY = map.zoomModule.mouseDownLatLong['y'] - map.zoomModule.mouseMoveLatLong['y'];
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const panLatLng = map.pointToLatLong(position.x - diffX, position.y - diffY);
-        map.centerPosition.latitude = panLatLng['latitude'];
-        map.centerPosition.longitude = panLatLng['longitude'];
-        let mapWidth;
-        let mapHeight;
-        if (isNullOrUndefined(parseInt(map.width, 10))) {
-            mapWidth = parseInt(map.width, 10) - 22;
-        }
-        else {
-            mapWidth = Math.round(map.mapAreaRect.width);
-        }
-        if (isNullOrUndefined(parseInt(map.height, 10))) {
-            mapHeight = parseInt(map.height, 10) - 22;
-        }
-        else {
-            mapHeight = Math.round(map.mapAreaRect.height);
-        }
-        const eleWidth = mapWidth > 640 ? (mapWidth - 640) / 2 : 0;
-        const eleHeight = mapHeight > 640 ? (mapHeight - 640) / 2 : 0;
-        let center;
-        const mapType = 'roadmap';
-        if (map.centerPosition.latitude && map.centerPosition.longitude) {
-            center = map.centerPosition.latitude.toString() + ',' + map.centerPosition.longitude.toString();
-        }
-        else {
-            center = '0,0';
-        }
-        const staticMapString = 'https://maps.googleapis.com/maps/api/staticmap?size=' + mapWidth + 'x' + mapHeight +
-            '&zoom=' + zoom + '&center=' + center + '&maptype=' + mapType + '&key=' + apikey;
-        document.getElementById(this.mapObject.element.id + '_tile_parent').innerHTML
-            = '<div id="' + this.mapObject.element.id + '_StaticGoogleMap"' + 'style="position:absolute; left:' + eleWidth + 'px; top:'
-                + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
-    }
     /**
      * To find the tile translate point.
      *
@@ -7365,10 +7357,12 @@ class Annotations {
         const bounds = map.svgObject.getBoundingClientRect();
         left = Math.abs(bounds.left - elementRect.left);
         top = Math.abs(bounds.top - elementRect.top);
-        const annotationXValue = (annotation.x.indexOf('%') > -1) ? (availSize.width / 100) * parseFloat(annotation.x) :
-            parseFloat(annotation.x);
-        const annotationYValue = (annotation.y.indexOf('%') > -1) ? (availSize.height / 100) * parseFloat(annotation.y) :
-            parseFloat(annotation.y);
+        const annotationX = !isNullOrUndefined(annotation.x) ? annotation.x : '0%';
+        const annotationY = !isNullOrUndefined(annotation.y) ? annotation.y : '0%';
+        const annotationXValue = (annotationX.indexOf('%') > -1) ? (availSize.width / 100) * parseFloat(annotationX) :
+            parseFloat(annotationX);
+        const 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) {
@@ -7471,8 +7465,6 @@ let Maps = class Maps extends Component {
         /** @private */
         this.centerPositionChanged = false;
         /** @private */
-        this.isTileMapSubLayer = false;
-        /** @private */
         this.markerNullCount = 0;
         /** @private */
         this.tileTranslatePoint = new Point(0, 0);
@@ -7823,37 +7815,11 @@ let Maps = class Maps extends Component {
             const tileElement = document.getElementById(this.element.id + '_tile_parent');
             const tileElement1 = document.getElementById(this.element.id + '_tiles');
             const tile = tileElement.getBoundingClientRect();
-            let bottom;
             let top;
             let left;
             left = parseFloat(tileElement.style.left);
-            const titleTextSize = measureText(this.titleSettings.text, this.titleSettings.textStyle);
-            const 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 = parseFloat(tileElement.style.top) + (subTitleTextSize.height / 2)
-                            - (this.legendModule.legendBorderRect.height / 2);
-                    }
-                    else {
-                        top = parseFloat(tileElement.style.top) - this.mapAreaRect.y;
-                    }
-                }
-                else {
-                    left = this.legendModule.legendBorderRect.x;
-                    if (titleTextSize.width !== 0 && titleTextSize.height !== 0) {
-                        top = parseFloat(tileElement.style.top) + (subTitleTextSize['height'] / 2)
-                            - this.legendModule.legendBorderRect.y;
-                    }
-                    else {
-                        top = parseFloat(tileElement.style.top) + (subTitleTextSize['height'] / 2);
-                    }
-                }
-            }
-            else {
-                bottom = svg.bottom - tile.bottom - element.offsetTop;
-                top = parseFloat(tileElement.style.top);
-            }
+            const bottom = svg.bottom - tile.bottom - element.offsetTop;
+            top = parseFloat(tileElement.style.top);
             top = (bottom <= 11) ? top : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top * 2);
             left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top + 'px';
@@ -8078,8 +8044,9 @@ let Maps = class Maps extends Component {
         const mapsElement = document.getElementById(this.element.id);
         if (!isNullOrUndefined(mapsElement)) {
             const element = mapsElement.getBoundingClientRect();
+            const marginLeft = getProcessedMarginValue(this.margin.left);
             const 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);
             const 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));
@@ -8145,8 +8112,9 @@ let Maps = class Maps extends Component {
             const ele = createElement('div', {
                 id: this.element.id + '_tile_parent'
             });
+            const 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;';
@@ -8154,7 +8122,7 @@ let Maps = class Maps extends Component {
                 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);
@@ -8244,7 +8212,11 @@ let Maps = class Maps extends Component {
             opacity: title.textStyle.opacity
         };
         let height;
-        const width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
+        const marginTop = getProcessedMarginValue(this.margin.top);
+        const marginBottom = getProcessedMarginValue(this.margin.bottom);
+        const marginLeft = getProcessedMarginValue(this.margin.left);
+        const marginRight = getProcessedMarginValue(this.margin.right);
+        const 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);
@@ -8254,16 +8226,16 @@ let Maps = class Maps extends Component {
             }
             const trimmedTitle = textTrim(width, title.text, style);
             const elementSize = measureText(trimmedTitle, style);
-            const rect = (isNullOrUndefined(bounds)) ? new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height) : bounds;
-            const location = findPosition(rect, title.alignment, elementSize, type);
+            const rect = (isNullOrUndefined(bounds)) ? new Rect(marginLeft, marginTop, this.availableSize.width, this.availableSize.height) : bounds;
+            const location = findPosition(rect, !isNullOrUndefined(title.alignment) ? title.alignment : 'Center', elementSize, type);
             const options = new TextOption(this.element.id + '_Map_' + type, location.x, location.y, 'start', trimmedTitle);
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const 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);
@@ -8273,8 +8245,8 @@ let Maps = class Maps extends Component {
             }
         }
         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);
         }
     }
     /**
@@ -8358,13 +8330,20 @@ let Maps = class Maps extends Component {
             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
+     */
     keyUpHandler(event) {
         const 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) {
@@ -8374,7 +8353,8 @@ let Maps = class Maps extends Component {
             }
         }
     }
-    keyboardHighlightSelection(id, key) {
+    keyboardHighlightSelection(id, event) {
+        const key = event.type;
         const layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
         const shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
         //eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8394,6 +8374,13 @@ let Maps = class Maps extends Component {
             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
+     */
     keyDownHandler(event) {
         const zoom = this.zoomModule;
         let id = event.target['id'];
@@ -8459,7 +8446,7 @@ let Maps = class Maps extends Component {
                 }
             }
             if (id.indexOf('shapeIndex') > -1) {
-                this.keyboardHighlightSelection(id, event.type);
+                this.keyboardHighlightSelection(id, event);
             }
         }
         if (this.zoomModule) {
@@ -9150,7 +9137,7 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     shapeSelection(layerIndex, propertyName, name, enable) {
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.layers[layerIndex])) {
             let targetEle;
             let subLayerIndex;
             const popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
@@ -9169,7 +9156,7 @@ let Maps = class Maps extends Component {
                     }
                 }
             }
-            if (selectionsettings.enable) {
+            if (!isNullOrUndefined(selectionsettings) && selectionsettings.enable) {
                 let targetId;
                 let dataIndex;
                 let shapeIndex;
@@ -9374,6 +9361,9 @@ let Maps = class Maps extends Component {
         if (!isNullOrUndefined(this.mapsTooltipModule)) {
             this.mapsTooltipModule.removeEventListener();
         }
+        if (!isNullOrUndefined(this.bingMap)) {
+            this.bingMap.destroy();
+        }
         super.destroy();
         this.shapeSelectionItem = [];
         this.toggledElementId = [];
@@ -9900,16 +9890,13 @@ let Maps = class Maps extends Component {
      * @returns {GeoPosition}- Returns the geographical coordinates.
      */
     getGeoLocation(layerIndex, x, y) {
-        let latitude = 0;
-        let longitude = 0;
-        if (!this.isDestroyed) {
+        let latitude = null;
+        let longitude = null;
+        if (!this.isDestroyed && !this.isTileMap) {
             const container = document.getElementById(this.element.id);
             const elementClientRect = this.element.getBoundingClientRect();
-            const bodyClientRect = document.body.getBoundingClientRect();
-            const pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft ||
-                (elementClientRect.left - bodyClientRect.left) : 0);
-            const pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop ||
-                (elementClientRect.top - bodyClientRect.top) : 0);
+            const pageX = x - container.offsetLeft - (elementClientRect.left - container.offsetLeft) - window.scrollX;
+            const pageY = y - container.offsetTop - (elementClientRect.top - container.offsetTop) - window.scrollY;
             const currentLayer = this.layersCollection[layerIndex];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const translate = getTranslate(this, currentLayer, false);
@@ -9936,15 +9923,16 @@ let Maps = class Maps extends Component {
      * @returns {GeoPosition} - Returns the geographical coordinates.
      */
     getTileGeoLocation(x, y) {
-        let latitude = 0;
-        let longitude = 0;
-        if (!this.isDestroyed) {
-            const container = document.getElementById(this.element.id);
-            const ele = document.getElementById(this.element.id + '_tile_parent');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const 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'];
+        let latitude = null;
+        let longitude = null;
+        if (this.isTileMap) {
+            const element = document.getElementById(this.element.id + '_tile_parent');
+            if (!this.isDestroyed && !isNullOrUndefined(element)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const 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 };
     }
@@ -9960,7 +9948,7 @@ let Maps = class Maps extends Component {
         let longitude = 0;
         if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
             const padding = 10;
-            pageY = pageY + padding;
+            pageY = !isNullOrUndefined(this.markerDragArgument) ? pageY + padding : pageY;
             const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             const x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
             const y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
@@ -10718,7 +10706,8 @@ class Marker {
                     && this.maps.mapScaleValue <= 1) {
                     this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
                         : this.maps.mapScaleValue;
-                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
+                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1 &&
+                        !isNullOrUndefined(this.maps.tileTranslatePoint)) {
                         this.maps.tileTranslatePoint.x = 0;
                         this.maps.tileTranslatePoint.y = 0;
                     }
@@ -11275,22 +11264,26 @@ class DataLabel {
                     labelTemplateElement.appendChild(labelElement);
                 }
                 else {
-                    if (dataLabelSettings.smartLabelMode === 'Trim') {
+                    const smartLabelMode = !isNullOrUndefined(dataLabelSettings.smartLabelMode) ? dataLabelSettings.smartLabelMode.toString() : 'None';
+                    if (smartLabelMode === 'Trim') {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const textType = typeof text === 'number' ? text.toString() : text;
                         trimmedLable = textTrim(width, textType, style, null, true);
                         elementSize = measureTextElement(trimmedLable, style);
                         options = new TextOption(labelId, textLocation.x, textLocation.y, 'middle', trimmedLable, '', '');
                     }
-                    if (dataLabelSettings.smartLabelMode === 'None') {
+                    if (smartLabelMode === 'None') {
                         options = new TextOption(labelId, (textLocation.x), textLocation.y, 'middle', text, '', '');
                     }
-                    if (dataLabelSettings.smartLabelMode === 'Hide') {
+                    if (smartLabelMode === 'Hide') {
                         text = (width >= textSize['width']) ? text : '';
                         options = new TextOption(labelId, (textLocation.x), (textLocation.y), 'middle', text, '', '');
                     }
-                    text = options['text'];
-                    if (dataLabelSettings.intersectionAction === 'Hide') {
+                    if (!isNullOrUndefined(options)) {
+                        text = options['text'];
+                    }
+                    const intersectionAction = !isNullOrUndefined(dataLabelSettings.intersectionAction) ? dataLabelSettings.intersectionAction.toString() : 'None';
+                    if (intersectionAction === 'Hide') {
                         for (let i = 0; i < intersect.length; i++) {
                             if (!isNullOrUndefined(intersect[i])) {
                                 if (!(this.value[index]['leftWidth'] > intersect[i]['rightWidth']
@@ -11306,7 +11299,7 @@ class DataLabel {
                         options = new TextOption(labelId, textLocation.x, textLocation.y, 'middle', text, '', '');
                     }
                     let difference;
-                    if (dataLabelSettings.intersectionAction === 'Trim') {
+                    if (intersectionAction === 'Trim') {
                         for (let j = 0; j < intersect.length; j++) {
                             if (!isNullOrUndefined(intersect[j])) {
                                 if (intersect[j]['rightWidth'] < this.value[index]['leftWidth']
@@ -11336,7 +11329,7 @@ class DataLabel {
                         intersect.push(this.value[index]);
                         options = new TextOption(labelId, textLocation.x, (textLocation.y), 'middle', trimmedLable, '', '');
                     }
-                    if (dataLabelSettings.intersectionAction === 'None') {
+                    if (intersectionAction === 'None') {
                         options = new TextOption(labelId, (textLocation.x), (textLocation.y), 'middle', text, '', '');
                     }
                     if (trimmedLable.length > 1) {
@@ -11549,7 +11542,7 @@ class NavigationLine {
                     }
                     if (showArrow) {
                         arrowColor = arrowSettings.color;
-                        arrowSize = arrowSettings.size;
+                        arrowSize = !isNullOrUndefined(arrowSettings.size) ? arrowSettings.size : 0;
                         offSetValue = !isNullOrUndefined(arrowSettings.offSet) ? arrowSettings.offSet : 0;
                         const divide = (Math.round(arrowSize / 2));
                         arrowPosition = arrowSettings.position;
@@ -11858,7 +11851,7 @@ class Legend {
                         shapeBorder: this.legendCollection[i]['shapeBorder']
                     });
                 }
-                if (this.legendCollection.length === 1) {
+                if (this.legendCollection.length === 1 && !(map.theme === 'Fluent2HighContrast' && legend.position === 'Bottom')) {
                     legendHeight = rectHeight;
                     legendWidth = rectWidth;
                 }
@@ -12057,7 +12050,7 @@ class Legend {
                 const rectOptions = new RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
                 textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
-                textFont.size = map.themeStyle.legendFontSize || textFont.size;
+                textFont.size = textFont.size || map.themeStyle.legendFontSize;
                 const textElement = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
                 textElement.setAttribute('aria-label', item['text']);
                 textElement.setAttribute('role', 'region');
@@ -12117,7 +12110,7 @@ class Legend {
                     this.maps.themeStyle.legendTextColor;
                 legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
                     this.maps.themeStyle.fontFamily;
-                legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
+                legendTextStyle.size = legendTextStyle.size || map.themeStyle.legendFontSize;
                 legendTextStyle.fontWeight = legendTextStyle.fontWeight || map.themeStyle.fontWeight;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -12634,7 +12627,7 @@ class Legend {
                     }
                     else {
                         this.removeShapeHighlightCollection();
-                        this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                        this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), !isNullOrUndefined(module.opacity) ? module.opacity.toString() : '1', module.border.color, module.border.width.toString(), 'highlight');
                     }
                 }
                 else if (getValue === 'selection') {
@@ -12699,7 +12692,7 @@ class Legend {
                         this.maps.legendSelectionClass = module;
                         this.removeLegend(this.shapeHighlightCollection);
                         if (!isNullOrUndefined(legendShape)) {
-                            this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
+                            this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), !isNullOrUndefined(module.opacity) ? module.opacity.toString() : '1', module.border.color, module.border.width.toString(), 'selection');
                             const legendSelectionIndex = this.getIndexofLegend(this.maps.legendSelectionCollection, legendShape);
                             this.maps.legendSelectionCollection[legendSelectionIndex]['MapShapeCollection']['Elements'].push(targetElement);
                         }
@@ -12772,10 +12765,10 @@ class Legend {
         const collection = this.maps.legendModule.legendCollection;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let currentCollection;
-        if (legendType === 'Default' && !isNullOrUndefined(this.maps.legendModule.totalPages)) {
+        if (legendType === 'Default' && !isNullOrUndefined(this.maps.legendModule.totalPages) && (this.maps.legendModule.totalPages.length > 0)) {
             currentCollection = this.maps.legendModule.totalPages[this.maps.legendModule.currentPage]['Collection'];
         }
-        const currentCollectionLength = legendType === 'Default' ? currentCollection['length'] : 1;
+        const currentCollectionLength = (legendType === 'Default' && !isNullOrUndefined(currentCollection)) ? currentCollection['length'] : 1;
         for (let i = 0; i < collection.length; i++) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const dataValue = collection[i]['data'];
@@ -12926,7 +12919,18 @@ class Legend {
         const spacing = 10;
         const trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         const textSize = measureText(trimTitle, textStyle);
-        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 +
+        let sameTextWidth = false;
+        for (let i = 0; i < this.legendRenderingCollections.length; i++) {
+            if (this.legendRenderingCollections[i].textWidth !== this.legendRenderingCollections[0].textWidth) {
+                sameTextWidth = false;
+                break;
+            }
+            else {
+                sameTextWidth = true;
+            }
+        }
+        this.legendBorderRect = new Rect((map.theme === 'Fluent2HighContrast' && !sameTextWidth && (legend.position === 'Left' || legend.position === 'Right') && legend.mode === 'Interactive')
+            ? (this.legendItemRect.x - (spacing * 3)) : (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));
         const legendBorder = {
             color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
@@ -13209,7 +13213,7 @@ class Legend {
                 if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(dataSource, (data, dataIndex) => {
-                        const equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                        const equalValue = ((colorValuePath && colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
                             (data[colorValuePath]));
                         if (equalValue === colorMap.value) {
                             eqaulColorProcess = true;
@@ -13301,7 +13305,8 @@ class Legend {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const newData = [];
                 const legendFill = (isNullOrUndefined(fill)) ? dataValue : fill;
-                if (!isNullOrUndefined(dataValue) && colorMapping.length === 0) {
+                if (!isNullOrUndefined(dataValue) && colorMapping.length === 0 &&
+                    (!isNullOrUndefined(valuePath) || !isNullOrUndefined(dataPath))) {
                     legendText = !isNullOrUndefined(data[valuePath]) ? ((valuePath.indexOf('.') > -1) ?
                         getValueFromObject(data, valuePath) : data[valuePath]) : ((dataPath.indexOf('.') > -1) ?
                         getValueFromObject(data, dataPath) : data[dataPath]);
@@ -13351,7 +13356,11 @@ class Legend {
                                 const arrowElement = querySelector(id, this.maps.element.id);
                                 if (this.maps.isDevice && !(isNullOrUndefined(arrowElement))) {
                                     clearTimeout(this.arrowTimer);
-                                    this.arrowTimer = setTimeout(() => { remove(arrowElement); }, 2000);
+                                    this.arrowTimer = setTimeout(() => {
+                                        if (!isNullOrUndefined(arrowElement.parentNode)) {
+                                            remove(arrowElement);
+                                        }
+                                    }, 2000);
                                 }
                                 break;
                             }
@@ -14633,7 +14642,7 @@ class MapsTooltip {
                     layer.shapePropertyPath : [layer.shapePropertyPath]);
                 if (!isNullOrUndefined(properties)) {
                     for (let k = 0; k < properties.length; k++) {
-                        if (!isNullOrUndefined(layer.dataSource)) {
+                        if (!isNullOrUndefined(layer.dataSource) && !isNullOrUndefined(layer.shapeDataPath)) {
                             for (let i = 0; i < layer['dataSource']['length']; i++) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 const data = layer.dataSource[i];
@@ -14679,7 +14688,7 @@ class MapsTooltip {
                             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];
                         }
@@ -14702,10 +14711,12 @@ class MapsTooltip {
                             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);
+                            }
                         }
                     }
                 }
@@ -14722,10 +14733,12 @@ class MapsTooltip {
                         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);
@@ -14775,7 +14788,8 @@ class MapsTooltip {
                     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
@@ -16140,6 +16154,7 @@ class Zoom {
         const layerY = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerY'] : event.touches[0].pageY;
         this.maps.mergeCluster();
         if (!map.isTileMap) {
+            const marginTop = getProcessedMarginValue(map.margin.top);
             const legendElement = document.getElementById(map.element.id + '_Legend_Group');
             const legendHeight = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
             x = translatePoint.x - xDifference / scale;
@@ -16149,7 +16164,7 @@ class Zoom {
             const panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                 ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             const 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
             const location = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, layerX, layerY);
             const minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
@@ -16741,7 +16756,7 @@ class Zoom {
      * @private
      */
     removeToolbarOpacity(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');
@@ -16992,6 +17007,9 @@ class Zoom {
             //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;
@@ -17343,7 +17361,8 @@ class Print {
             backgroundElement = backgroundElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const 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)');
                 }
@@ -17637,7 +17656,8 @@ class PdfExport {
             const exportElement = maps.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             const 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)');
             }
@@ -17763,5 +17783,5 @@ class PdfExport {
     destroy() { }
 }
 
-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 };
+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, getProcessedMarginValue, 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.es2015.js.map