@syncfusion/ej2-maps 21.2.5 → 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'];
@@ -7094,6 +7212,7 @@ class LayerPanel {
                             imgElement.setAttribute('width', '256px');
                             imgElement.setAttribute('src', tile.src);
                             imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                            imgElement.style.setProperty('user-select', 'none');
                             child.appendChild(imgElement);
                             animateElement.appendChild(child);
                         }
@@ -7103,6 +7222,7 @@ class LayerPanel {
                         imgElement.setAttribute('height', '256px');
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
+                        imgElement.style.setProperty('user-select', 'none');
                         imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                         const child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';
@@ -7715,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.
@@ -7735,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']) {
@@ -7970,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;
@@ -8193,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' });
@@ -8919,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,
@@ -9654,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;
@@ -10330,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]);
@@ -11316,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();
                 }
@@ -12084,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);
         }
@@ -13690,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 {
@@ -13733,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);
@@ -13758,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) {
@@ -14038,93 +14164,103 @@ class Zoom {
         const scale = map.previousScale = map.scale;
         const maxZoom = map.zoomSettings.maxZoom;
         const minZoom = map.zoomSettings.minZoom;
-        newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
-        const prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
-            || map.isReset)) {
-            const availSize = map.mapAreaRect;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const minBounds = map.baseMapRectBounds['min'];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const maxBounds = map.baseMapRectBounds['max'];
-            let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
-            let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            let translatePointX;
-            let translatePointY;
-            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
-                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
-                    mapTotalWidth = availSize.width / 2;
-                    mapTotalHeight = availSize.height;
+        let isToolbarPerform = true;
+        switch (type.toLowerCase()) {
+            case 'zoomin':
+                isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
+                break;
+            case 'zoomout':
+                isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
+                break;
+        }
+        if (isToolbarPerform) {
+            const prevTilePoint = map.tileTranslatePoint;
+            if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+                || map.isReset)) {
+                const availSize = map.mapAreaRect;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const minBounds = map.baseMapRectBounds['min'];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const maxBounds = map.baseMapRectBounds['max'];
+                let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+                let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+                let translatePointX;
+                let translatePointY;
+                if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                    if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                        mapTotalWidth = availSize.width / 2;
+                        mapTotalHeight = availSize.height;
+                    }
+                    newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                    newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
+                    map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+                }
+                else {
+                    const point = map.translatePoint;
+                    translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                    translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                    const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                    translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                    translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                    map.translatePoint = new Point(translatePointX, translatePointY);
+                }
+                map.scale = newZoomFactor;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.mapScaleValue = map.previousScale;
+                }
+                else {
+                    this.applyTransform(map);
                 }
-                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
-                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
-                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
-            }
-            else {
-                const point = map.translatePoint;
-                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-                map.translatePoint = new Point(translatePointX, translatePointY);
-            }
-            map.scale = newZoomFactor;
-            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
-                map.translatePoint = map.previousPoint;
-                map.scale = map.mapScaleValue = map.previousScale;
             }
-            else {
-                this.applyTransform(map);
-            }
-        }
-        else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
-            this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
-            map.tileZoomLevel = newZoomFactor;
-            map.zoomSettings.zoomFactor = newZoomFactor;
-            map.scale = Math.pow(2, newZoomFactor - 1);
-            if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+            else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
+                this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
+                map.tileZoomLevel = newZoomFactor;
+                map.zoomSettings.zoomFactor = newZoomFactor;
                 map.scale = Math.pow(2, newZoomFactor - 1);
-            }
-            map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
-            map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
-                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
-                map.scale = map.previousScale;
-                map.tileZoomLevel = prevLevel;
-                map.zoomSettings.zoomFactor = map.previousScale;
-            }
-            else {
-                if (document.querySelector('.GroupElement')) {
-                    document.querySelector('.GroupElement').style.display = 'none';
-                }
-                if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
-                }
-                this.markerLineAnimation(map);
-                map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-                const element1 = document.getElementById(this.maps.element.id + '_tiles');
-                const animationDuration = this.maps.layersCollection[0].animationDuration;
-                setTimeout(() => {
-                    // if (type === 'ZoomOut') {
-                    //     element1.removeChild(element1.children[element1.childElementCount - 1]);
-                    //     if (element1.childElementCount) {
-                    //         element1.removeChild(element1.children[element1.childElementCount - 1]);
-                    //     } else {
-                    //         element1 = element1;
-                    //     }
-                    // }
-                    this.applyTransform(this.maps);
+                if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                    map.scale = Math.pow(2, newZoomFactor - 1);
+                }
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.previousScale;
+                    map.tileZoomLevel = prevLevel;
+                    map.zoomSettings.zoomFactor = map.previousScale;
+                }
+                else {
+                    if (document.querySelector('.GroupElement')) {
+                        document.querySelector('.GroupElement').style.display = 'none';
+                    }
                     if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                     }
-                }, animationDuration);
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
+                    const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                    const animationDuration = this.maps.layersCollection[0].animationDuration;
+                    setTimeout(() => {
+                        // if (type === 'ZoomOut') {
+                        //     element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        //     if (element1.childElementCount) {
+                        //         element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        //     } else {
+                        //         element1 = element1;
+                        //     }
+                        // }
+                        this.applyTransform(this.maps);
+                        if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                            document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        }
+                    }, animationDuration);
+                }
             }
         }
         this.maps.zoomNotApplied = false;
@@ -14339,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);
@@ -14354,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);
         }
@@ -14739,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
@@ -15285,11 +15422,23 @@ class Zoom {
         e.stopImmediatePropagation();
         const isTouch = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
         const toolbar = target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
-        if (isTouch) {
+        let isToolbarPerform = true;
+        switch (toolbar.toLowerCase()) {
+            case 'zoomin':
+                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
+                break;
+            case 'zoomout':
+                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) - 1 >= this.maps.zoomSettings.minZoom;
+                break;
+            case 'reset':
+                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
+                break;
+        }
+        if (isTouch && isToolbarPerform) {
             this.handled = true;
             this.performZoomingByToolBar(toolbar);
         }
-        else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled) {
+        else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled && isToolbarPerform) {
             this.handled = false;
             this.performZoomingByToolBar(toolbar);
         }
@@ -15374,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) {
@@ -16033,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') {
@@ -16127,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);
@@ -16169,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'));
@@ -16178,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');
@@ -16208,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);
                                     }
@@ -16284,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: {
@@ -16297,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();
@@ -16336,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');
@@ -16366,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();