@syncfusion/ej2-maps 21.2.10 → 22.1.34

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

@@ -1,4 +1,4 @@
-import { Ajax, Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -775,7 +775,7 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     }
     else if (shape === 'Image') {
         x = location.x - (size.width / 2);
-        y = location.y - (size.height / 2);
+        y = location.y - (markerID.indexOf('cluster') > -1 ? (size.height / 2) : size.height);
         merge(pathOptions, { 'href': imageUrl, 'height': size.height, 'width': size.width, x: x, y: y });
         markerEle = maps.renderer.drawImage(pathOptions);
     }
@@ -2319,13 +2319,16 @@ function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let templateFn = null;
     try {
-        if (document.querySelectorAll(template).length) {
+        if (typeof template !== 'function' && document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         else if (maps.isVue || maps.isVue3) {
             templateFn = compile(template);
         }
+        else if (typeof template === 'function') {
+            templateFn = compile(template);
+        }
     }
     catch (e) {
         templateFn = compile(template);
@@ -3517,6 +3520,14 @@ function getShapeColor(theme) {
             themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
                 '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
             break;
+        case 'material3':
+            themePalette = ['#6200EE', '#E77A16', '#82C100', '#7107DC', '#05BB3D',
+                '#D21020', '#FAD200', '#0085FF', '#9204EA', '#08EE9B'];
+            break;
+        case 'material3dark':
+            themePalette = ['#4EAAFF', '#FA4EAB', '#FFF500', '#17EA58', '#38FFE7',
+                '#FF9E45', '#B3F32F', '#B93CE4', '#FC5664', '#9B55FF'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -3665,9 +3676,14 @@ function getThemeStyle(theme) {
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'highcontrast':
@@ -3684,10 +3700,15 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap4':
@@ -3703,6 +3724,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#5B6269',
                 fontFamily: 'HelveticaNeue-Medium',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '16px',
                 legendFontSize: '14px',
                 tooltipFillOpacity: 1,
@@ -3710,7 +3733,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'HelveticaNeue-Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'tailwind':
@@ -3726,6 +3752,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#111827',
                 zoomFillColor: '#6b7280',
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3733,7 +3761,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Inter',
                 titleFontWeight: '500',
                 zoomSelectionColor: '#374151',
-                shapeFill: '#E5E7EB'
+                shapeFill: '#E5E7EB',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'tailwinddark':
@@ -3749,6 +3780,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#F9FAFB',
                 zoomFillColor: '#D1D5DB',
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3756,7 +3789,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Inter',
                 titleFontWeight: '500',
                 zoomSelectionColor: '#F3F4F6',
-                shapeFill: '#374151'
+                shapeFill: '#374151',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap5':
@@ -3772,6 +3808,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#212529',
                 zoomFillColor: '#6C757D',
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3779,7 +3817,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue',
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#343A40',
-                shapeFill: '#E9ECEF'
+                shapeFill: '#E9ECEF',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap5dark':
@@ -3795,6 +3836,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#E9ECEF',
                 zoomFillColor: '#B5BABE',
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3802,7 +3845,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue',
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#DEE2E6',
-                shapeFill: '#495057'
+                shapeFill: '#495057',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'fluent':
@@ -3818,6 +3864,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#FFFFFF',
                 zoomFillColor: '#A19F9D',
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3825,7 +3873,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Segoe UI',
                 titleFontWeight: '600',
                 zoomSelectionColor: '#323130',
-                shapeFill: '#F3F2F1'
+                shapeFill: '#F3F2F1',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'fluentdark':
@@ -3841,6 +3892,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#252423',
                 zoomFillColor: '#484644',
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3848,7 +3901,68 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Segoe UI',
                 titleFontWeight: '600',
                 zoomSelectionColor: '#F3F2F1',
-                shapeFill: '#252423'
+                shapeFill: '#252423',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
+            };
+            break;
+        case 'material3':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#1C1B1F',
+                subTitleFontColor: '#1C1B1F',
+                legendTitleFontColor: '#1C1B1F',
+                legendTextColor: '#49454E',
+                dataLabelFontColor: '#1C1B1F',
+                tooltipFontColor: '#F4EFF4',
+                tooltipFillColor: '#313033',
+                zoomFillColor: '#49454E',
+                fontFamily: 'Roboto',
+                fontSize: '14px',
+                titleFontSize: '16px',
+                subTitleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Roboto',
+                titleFontWeight: '500',
+                fontWeight: '400',
+                zoomSelectionColor: '#49454E',
+                shapeFill: '#E7E0EC',
+                rectangleZoomFillColor: '#6750A4',
+                rectangleZoomFillOpacity: 0.24,
+                rectangleZoomBorderColor: "#6750A4"
+            };
+            break;
+        case 'material3dark':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#E6E1E5',
+                subTitleFontColor: '#E6E1E5',
+                legendTitleFontColor: '#E6E1E5',
+                legendTextColor: '#CAC4D0',
+                dataLabelFontColor: '#E6E1E5',
+                tooltipFontColor: '#313033',
+                tooltipFillColor: '#E6E1E5',
+                zoomFillColor: '#E6E1E5',
+                fontFamily: 'Roboto',
+                fontSize: '14px',
+                titleFontSize: '16px',
+                subTitleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Roboto',
+                titleFontWeight: '500',
+                fontWeight: '400',
+                zoomSelectionColor: '#E6E1E5',
+                shapeFill: '#49454F',
+                rectangleZoomFillColor: '#D0BCFF',
+                rectangleZoomFillOpacity: 0.24,
+                rectangleZoomBorderColor: "#D0BCFF"
             };
             break;
         default:
@@ -3866,9 +3980,14 @@ function getThemeStyle(theme) {
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
     }
@@ -4102,7 +4221,7 @@ __decorate$1([
     Complex({ color: 'transparent', width: 1 }, Border)
 ], TooltipSettings.prototype, "border", void 0);
 __decorate$1([
-    Complex(Theme.tooltipLabelFont, Font)
+    Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
 ], TooltipSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property(null)
@@ -4531,7 +4650,7 @@ __decorate$1([
     Property('')
 ], LegendSettings.prototype, "height", void 0);
 __decorate$1([
-    Complex({ fontFamily: null }, Font)
+    Complex({ fontFamily: null, fontWeight: null }, Font)
 ], LegendSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property(15)
@@ -4552,7 +4671,7 @@ __decorate$1([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
 __decorate$1([
-    Complex({ size: Theme.legendTitleFont.size, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: Theme.legendTitleFont.fontWeight, fontFamily: null }, Font)
+    Complex({ size: null, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: null, fontFamily: null }, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
 __decorate$1([
     Property('Bottom')
@@ -4611,7 +4730,7 @@ __decorate$1([
     Property(5)
 ], DataLabelSettings.prototype, "ry", void 0);
 __decorate$1([
-    Complex({}, Font)
+    Complex({ fontWeight: null }, Font)
 ], DataLabelSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('')
@@ -5841,7 +5960,7 @@ class LayerPanel {
         this.horizontalPan = false;
         this.horizontalPanXCount = 0;
         this.mapObject = map;
-        this.ajaxModule = new Ajax();
+        this.ajaxModule = new Fetch();
         this.ajaxResponse = [];
     }
     measureLayerPanel() {
@@ -6078,14 +6197,13 @@ class LayerPanel {
                         const bing = new BingMap(this.mapObject);
                         const bingType = layer.bingMapType === 'AerialWithLabel' ? 'AerialWithLabelsOnDemand' : layer.bingMapType;
                         const url = 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/' + bingType;
-                        const ajax = new Ajax({
+                        const ajax = new Fetch({
                             url: url + '?output=json&include=ImageryProviders&urischeme=https&key=' + layer.key
                         });
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         ajax.onSuccess = (json) => {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const jsonObject = JSON.parse(json);
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const resource = jsonObject['resourceSets'][0]['resources'][0];
+                            const resource = json['resourceSets'][0]['resources'][0];
                             const imageUrl = resource['imageUrl'];
                             const subDomains = resource['imageUrlSubdomains'];
                             const maxZoom = resource['zoomMax'];
@@ -7104,8 +7222,8 @@ class LayerPanel {
                         imgElement.setAttribute('height', '256px');
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
-                        imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                         imgElement.style.setProperty('user-select', 'none');
+                        imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                         const child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';
                         child.style.left = tile.left + 'px';
@@ -7717,11 +7835,11 @@ let Maps = class Maps extends Component {
     /* eslint-disable @typescript-eslint/no-explicit-any */
     processAjaxRequest(layer, localAjax, type) {
         this.serverProcess['request']++;
-        const ajaxModule = new Ajax(localAjax.dataOptions, localAjax.type, localAjax.async, localAjax.contentType);
-        ajaxModule.onSuccess = (args) => {
-            this.processResponseJsonData('Ajax', args, layer, type);
+        const fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
+        fetchApiModule.onSuccess = (args) => {
+            this.processResponseJsonData('Fetch', args, layer, type);
         };
-        ajaxModule.send(localAjax.sendData);
+        fetchApiModule.send(localAjax.sendData);
     }
     /**
      * This method is used to process the JSON data to render the maps.
@@ -7737,10 +7855,10 @@ let Maps = class Maps extends Component {
         this.serverProcess['response']++;
         if (processType) {
             if (dataType === 'ShapeData') {
-                layer.shapeData = (processType === 'DataManager') ? processResult(data) : JSON.parse(data);
+                layer.shapeData = (processType === 'DataManager') ? processResult(data) : data;
             }
             else {
-                layer.dataSource = (processType === 'DataManager') ? processResult(data) : JSON.parse('[' + data + ']')[0];
+                layer.dataSource = (processType === 'DataManager') ? processResult(data) : data;
             }
         }
         if (!isNullOrUndefined(processType) && this.serverProcess['request'] === this.serverProcess['response']) {
@@ -7972,8 +8090,8 @@ let Maps = class Maps extends Component {
         let element = getElementByID(this.element.id + '_Secondary_Element');
         let rect = this.element.getBoundingClientRect();
         let svgRect = getElementByID(this.element.id + '_svg').getBoundingClientRect();
-        element.style.marginLeft = Math.max(svgRect.left - rect.left, 0) + 'px';
-        element.style.marginTop = Math.max(svgRect.top - rect.top, 0) + 'px';
+        element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';
+        element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';
     }
     zoomingChange() {
         let left;
@@ -8195,8 +8313,8 @@ let Maps = class Maps extends Component {
         let height;
         const width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
         style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
-        style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
-        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || Theme.mapsSubTitleFont.size);
+        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);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
@@ -8921,7 +9039,7 @@ let Maps = class Maps extends Component {
      * @param e - Specifies the arguments of window resize event.
      */
     mapsOnResize(e) {
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !this.isExportInitialTileMap) {
             this.isResize = this.isReset = true;
             const args = {
                 cancel: false,
@@ -9656,17 +9774,15 @@ let Maps = class Maps extends Component {
         let promise;
         if (!this.isDestroyed) {
             promise = new Promise((resolve, reject) => {
-                const ajax = new Ajax({
+                const fetchApi = new Fetch({
                     url: url
                 });
-                ajax.onSuccess = (json) => {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const jsonObject = JSON.parse(json);
+                fetchApi.onSuccess = (json) => {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const resource = jsonObject['resourceSets'][0]['resources'][0];
+                    const resource = json['resourceSets'][0]['resources'][0];
                     resolve(resource['imageUrl']);
                 };
-                ajax.send();
+                fetchApi.send();
             });
         }
         return promise;
@@ -10332,6 +10448,7 @@ class DataLabel {
         let locationX;
         let locationY;
         style.fontFamily = this.maps.theme.toLowerCase() !== 'material' ? this.maps.themeStyle.labelFontFamily : style.fontFamily;
+        style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight || Theme.dataLabelFont.fontWeight;
         shape = shapes['property'];
         const properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
@@ -11318,6 +11435,7 @@ class Legend {
                 legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
                     this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
+                legendTextStyle.fontWeight = legendTextStyle.fontWeight || map.themeStyle.fontWeight;
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
@@ -12086,6 +12204,8 @@ class Legend {
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
             textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
+            textStyle.size = !isNullOrUndefined(textStyle.size) ? textStyle.size : this.maps.themeStyle.subTitleFontSize || Theme.legendTitleFont.size;
+            textStyle.fontWeight = !isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight : this.maps.themeStyle.titleFontWeight || Theme.legendTitleFont.fontWeight;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
             renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
         }
@@ -13692,7 +13812,7 @@ class MapsTooltip {
                         currentData = this.formatter(marker$$1.tooltipSettings.format, marker$$1.dataSource[dataIndex]);
                     }
                     else {
-                        if (marker$$1.template && !marker$$1.tooltipSettings.valuePath) {
+                        if (typeof marker$$1.template !== 'function' && marker$$1.template && !marker$$1.tooltipSettings.valuePath) {
                             currentData = marker$$1.template.split('>')[1].split('<')[0];
                         }
                         else {
@@ -13735,7 +13855,7 @@ class MapsTooltip {
                 tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                 document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
             }
-            if (option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
+            if (typeof option.template !== 'function' && option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
                 option.template = option.template[Object.keys(option.template)[0]];
             }
             templateData = this.setTooltipContent(option, templateData);
@@ -13760,10 +13880,14 @@ class MapsTooltip {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
                     (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
                     this.maps['isProtectedOnChange'] = true;
+                    tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
+                        || this.maps.themeStyle.fontSize;
                     tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
                         || this.maps.themeStyle.tooltipFontColor;
                     tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
                         || this.maps.themeStyle.fontFamily;
+                    tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
+                        || this.maps.themeStyle.fontWeight;
                     tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
                         || this.maps.themeStyle.tooltipTextOpacity;
                     if (tooltipArgs.cancel) {
@@ -14351,7 +14475,7 @@ class Zoom {
         const down = this.mouseDownPoints;
         const move = this.mouseMovePoints;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const border = { width: 1, color: '#009900' };
+        const border = { width: 1, color: this.maps.themeStyle.rectangleZoomBorderColor };
         const width = Math.abs(move.x - down.x);
         const height = Math.abs(move.y - down.y);
         const x = ((move.x > down.x) ? down.x : down.x - width);
@@ -14366,7 +14490,7 @@ class Zoom {
                 height: map.availableSize.height,
                 style: 'position: absolute;'
             });
-            const rectOption = new RectOption(map.element.id + '_ZoomRect', '#d3d3d3', border, 0.5, this.zoomingRect, 0, 0, '', '3');
+            const rectOption = new RectOption(map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3');
             rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
             getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
         }
@@ -14751,6 +14875,7 @@ class Zoom {
                     zoomtextSize = measureText(zoomtext, style);
                     const start = labelY - zoomtextSize['height'] / 4;
                     const end = labelY + zoomtextSize['height'] / 4;
+                    labelY = end;
                     const xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     const xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15398,7 +15523,7 @@ class Zoom {
                 map.markerCenterLatitude = null;
                 map.markerCenterLongitude = null;
                 this.isZoomSelection = false;
-                this.isPan = this.isPanning = map.zoomSettings.enablePanning;
+                this.isPan = map.zoomSettings.enablePanning;
                 this.toolBarZooming(map.zoomSettings.minZoom, 'Reset');
                 if ((this.isPan && !this.isZoomSelection) || (!this.isPan && this.isZoomSelection)) {
                     if (!this.maps.zoomSettings.enablePanning) {
@@ -16057,6 +16182,19 @@ class Print {
     getHTMLContent(maps, elements) {
         const div = createElement('div');
         const divElement = maps.element.cloneNode(true);
+        let backgroundElement = (!maps.isTileMap ? divElement.getElementsByTagName('svg')[0] : divElement.getElementsByTagName('svg')[1]);
+        if (!isNullOrUndefined(backgroundElement)) {
+            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') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
+                }
+                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
+            }
+        }
         if (maps.isTileMap) {
             for (let i = 0; i < divElement.childElementCount; i++) {
                 if (divElement.children[i].id === maps.element.id + '_tile_parent') {
@@ -16151,10 +16289,18 @@ class ImageExport {
             const svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             let svgDataElement;
             let tileSvg;
-            const svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
+            let svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
+            const backgroundElement = svgObject.childNodes[0];
+            const backgroundColor = backgroundElement.getAttribute('fill');
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
+            }
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+            }
             if (!maps.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                    maps.svgObject.outerHTML + '</svg>';
+                    svgObject.outerHTML + '</svg>';
             }
             else {
                 tileSvg = getElementByID(maps.element.id + '_Tile_SVG').cloneNode(true);
@@ -16193,6 +16339,7 @@ class ImageExport {
                     image.src = url;
                 }
                 else {
+                    maps.isExportInitialTileMap = true;
                     const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                     const top = parseFloat(svgParentElement.getAttribute('y'));
                     const left = parseFloat(svgParentElement.getAttribute('x'));
@@ -16202,7 +16349,9 @@ class ImageExport {
                         const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         const exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        ctxt.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                        let background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                            (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                        ctxt.fillStyle = background;
                         ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                         ctxt.font = maps.titleSettings.textStyle.size + ' Arial';
                         const titleElement = document.getElementById(maps.element.id + '_Map_title');
@@ -16232,8 +16381,10 @@ class ImageExport {
                                 if (allowDownload) {
                                     triggerDownload(fileName, type, localBase64, isDownload);
                                     localStorage.removeItem('local-canvasImage');
+                                    maps.isExportInitialTileMap = false;
                                 }
                                 else {
+                                    maps.isExportInitialTileMap = false;
                                     if (type === 'PNG') {
                                         resolve(localBase64);
                                     }
@@ -16308,6 +16459,9 @@ class PdfExport {
     export(maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
+            if (maps.isTileMap) {
+                maps.isExportInitialTileMap = true;
+            }
             const canvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
@@ -16321,10 +16475,12 @@ class PdfExport {
             const exportElement = maps.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             const backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5' || maps.theme === 'Bootstrap5Dark'
-                || maps.theme === 'Fluent' || maps.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+            }
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
                 [(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
             const pdfDocument = new PdfDocument();
@@ -16360,7 +16516,9 @@ class PdfExport {
                     const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     const tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                    let background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                        (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                    ctx.fillStyle = background;
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                     ctx.font = maps.titleSettings.textStyle.size + ' Arial';
                     const titleElement = document.getElementById(maps.element.id + '_Map_title');
@@ -16390,6 +16548,7 @@ class PdfExport {
                                 pdfDocument.pageSettings.orientation = orientation;
                                 x = x.slice(x.indexOf(',') + 1);
                                 pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
+                                maps.isExportInitialTileMap = false;
                                 if (allowDownload) {
                                     pdfDocument.save(fileName + '.pdf');
                                     pdfDocument.destroy();