@syncfusion/ej2-maps 19.2.60 → 19.3.53

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

@@ -1,4 +1,4 @@
-import { Ajax, Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, compile, createElement, extend, isBlazor, isNullOrUndefined, merge, print, remove, resetBlazorTemplate, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Ajax, Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, 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';
@@ -624,7 +624,7 @@ function renderTextElement(option, style, color, parent, isMinus) {
         'opacity': style.opacity,
         'dominant-baseline': option.baseLine
     };
-    var text = typeof option.text === 'string' ? option.text : isMinus ? option.text[option.text.length - 1] : option.text[0];
+    var text = typeof option.text === 'string' || typeof option.text === 'number' ? option.text : isMinus ? option.text[option.text.length - 1] : option.text[0];
     var tspanElement;
     var renderer = new SvgRenderer('');
     var height;
@@ -1742,7 +1742,7 @@ function getRatioOfBubble(min, max, value, minValue, maxValue) {
  * @returns {any} - Specifies the object
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function findMidPointOfPolygon(points, type) {
+function findMidPointOfPolygon(points, type, geometryType) {
     if (!points.length) {
         return null;
     }
@@ -1757,14 +1757,14 @@ function findMidPointOfPolygon(points, type) {
     var ySum = 0;
     for (var i = min; i <= max - 1; i++) {
         startX = points[i].x;
-        startY = type === 'Mercator' ? points[i].y : -(points[i].y);
+        startY = type === 'Mercator' || geometryType === 'Normal' ? points[i].y : -(points[i].y);
         if (i === max - 1) {
             startX1 = points[0].x;
-            startY1 = type === 'Mercator' ? points[0].y : -(points[0].y);
+            startY1 = type === 'Mercator' || geometryType === 'Normal' ? points[0].y : -(points[0].y);
         }
         else {
             startX1 = points[i + 1].x;
-            startY1 = type === 'Mercator' ? points[i + 1].y : -(points[i + 1].y);
+            startY1 = type === 'Mercator' || geometryType === 'Normal' ? points[i + 1].y : -(points[i + 1].y);
         }
         sum = sum + Math.abs(((startX * startY1)) - (startX1 * startY));
         xSum = xSum + Math.abs(((startX + startX1) * (((startX * startY1) - (startX1 * startY)))));
@@ -1785,7 +1785,7 @@ function findMidPointOfPolygon(points, type) {
     var height = 0;
     for (var i = min; i <= max - 1; i++) {
         var point = points[i];
-        point.y = type === 'Mercator' ? point.y : -(point.y);
+        point.y = type === 'Mercator' || geometryType === 'Normal' ? point.y : -(point.y);
         if (point.y > ySum) {
             if (point.x < xSum && xSum - point.x < xSum - bottomMinPoint.x) {
                 bottomMinPoint = { x: point.x, y: point.y };
@@ -3362,7 +3362,6 @@ var BootstrapTheme;
  * @param {MapsTheme} theme Specifies the theme of the maps
  * @returns {string[]} Returns the shape color
  */
-// eslint-disable-next-line @typescript-eslint/no-namespace
 function getShapeColor(theme) {
     var themePalette;
     switch (theme.toLowerCase()) {
@@ -3374,6 +3373,14 @@ 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;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -3611,6 +3618,52 @@ function getThemeStyle(theme) {
                 shapeFill: '#374151'
             };
             break;
+        case 'bootstrap5':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#212529',
+                subTitleFontColor: '#212529',
+                legendTitleFontColor: '#212529',
+                legendTextColor: '#212529',
+                dataLabelFontColor: '#212529',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFillColor: '#212529',
+                zoomFillColor: '#6C757D',
+                fontFamily: 'Helvetica Neue',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Helvetica Neue',
+                titleFontWeight: 'normal',
+                zoomSelectionColor: '#343A40',
+                shapeFill: '#E9ECEF'
+            };
+            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',
+                tooltipFontColor: '#212529',
+                tooltipFillColor: '#E9ECEF',
+                zoomFillColor: '#B5BABE',
+                fontFamily: 'Helvetica Neue',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Helvetica Neue',
+                titleFontWeight: 'normal',
+                zoomSelectionColor: '#DEE2E6',
+                shapeFill: '#495057'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
@@ -4663,15 +4716,6 @@ var MapsAreaSettings = /** @__PURE__ @class */ (function (_super) {
     return MapsAreaSettings;
 }(ChildProperty));
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Marker class
  */
@@ -4952,10 +4996,6 @@ var Marker = /** @__PURE__ @class */ (function () {
             longitude: options.data['longitude'] || options.data['Longitude'],
             value: options.data['name']
         };
-        if (this.maps.isBlazor) {
-            var maps = eventArgs.maps, marker_1 = eventArgs.marker, blazorEventArgs = __rest(eventArgs, ["maps", "marker"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(markerClick, eventArgs);
     };
     /**
@@ -5035,9 +5075,6 @@ var Marker = /** @__PURE__ @class */ (function () {
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
                         collection_1.push({ data: marker$$1.dataSource[i], index: i });
-                        if (this.maps.isBlazor) {
-                            marker$$1.dataSource[i]['text'] = '';
-                        }
                         markCollection.push(marker$$1.dataSource[i]);
                     }
                     isClusterSame = false;
@@ -5556,15 +5593,6 @@ var ColorMapping = /** @__PURE__ @class */ (function () {
     return ColorMapping;
 }());
 
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable no-case-declarations */
@@ -5781,10 +5809,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             cancel: false, name: layerRendering, index: layerIndex,
             layer: layer, maps: this.mapObject, visible: layer.visible
         };
-        if (this.mapObject.isBlazor) {
-            var maps = eventArgs.maps, layer_1 = eventArgs.layer, blazorEventArgs = __rest$1(eventArgs, ["maps", "layer"]);
-            eventArgs = blazorEventArgs;
-        }
         this.mapObject.trigger('layerRendering', eventArgs, function (observedArgs) {
             if (!eventArgs.cancel && eventArgs.visible) {
                 if (layer.layerType !== 'Geometry') {
@@ -5819,11 +5843,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                                 bing_1.maxZoom = maxZoom;
                             }
                             proxy_1.mapObject['bingMap'] = bing_1;
-                            if (_this.mapObject.isBlazor) {
-                                if (!isNullOrUndefined(markerGroupElement)) {
-                                    removeElement(_this.mapObject.element.id + '_Markers_Group');
-                                }
-                            }
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _this.mapObject.arrangeTemplate();
                         };
@@ -5988,10 +6007,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     shape: shapeSettings, fill: fill,
                     border: { width: borderValue.width, color: borderValue.color, opacity: borderValue.opacity }
                 };
-                if (this_1.mapObject.isBlazor) {
-                    var maps = eventArgs.maps, blazorEventArgs = __rest$1(eventArgs, ["maps"]);
-                    eventArgs = blazorEventArgs;
-                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var shapeRenderingSuccess = function (eventArgs) {
                     var drawingType = !isNullOrUndefined(currentShapeData['_isMultiPolygon'])
@@ -6856,9 +6871,6 @@ var Annotations = /** @__PURE__ @class */ (function () {
         });
         if (annotationGroup.childElementCount > 0 && !(isNullOrUndefined(getElementByID(secondaryID)))) {
             getElementByID(secondaryID).appendChild(annotationGroup);
-            for (var i = 0; i < this.map.annotations.length; i++) {
-                updateBlazorTemplate(this.map.element.id + '_ContentTemplate_' + i, 'ContentTemplate', this.map.annotations[i]);
-            }
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.map.renderReactTemplates();
@@ -6888,10 +6900,9 @@ var Annotations = /** @__PURE__ @class */ (function () {
             if (argsData.cancel) {
                 return;
             }
-            var blazor = 'Blazor';
             templateFn = getTemplateFunction(argsData.content);
-            if (templateFn && (!window[blazor] ? templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex).length : {})) {
-                templateElement = Array.prototype.slice.call(templateFn(!window[blazor] ? _this.map : {}, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex));
+            if (templateFn && templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
+                templateElement = Array.prototype.slice.call(templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex));
                 var length_1 = templateElement.length;
                 for (var i = 0; i < length_1; i++) {
                     childElement.appendChild(templateElement[i]);
@@ -7155,20 +7166,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.preRender = function () {
         this.isDevice = Browser.isDevice;
-        this.isBlazor = isBlazor();
         this.initPrivateVariable();
         this.allowServerDataBinding = false;
         this.unWireEVents();
         this.wireEVents();
         this.setCulture();
     };
-    /**
-     * To Initialize the control rendering.
-     *
-     * @returns {void}
-     */
-    Maps.prototype.render = function () {
-        this.trigger(load, this.isBlazor ? {} : { maps: this });
+    Maps.prototype.renderElements = function () {
+        this.trigger(load, { maps: this });
         this.createSVG();
         this.findBaseAndSubLayers();
         this.createSecondaryElement();
@@ -7180,6 +7185,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.processRequestJsonData();
         this.renderComplete();
     };
+    /**
+     * To Initialize the control rendering.
+     *
+     * @returns {void}
+     */
+    Maps.prototype.render = function () {
+        this.renderElements();
+    };
     Maps.prototype.processRequestJsonData = function () {
         var _this = this;
         var length = this.layersCollection.length - 1;
@@ -7190,7 +7203,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             if (layer.shapeData instanceof DataManager) {
                 _this.serverProcess['request']++;
                 dataModule = layer.shapeData;
-                queryModule = layer.query instanceof Query ? layer.query : _this.isBlazor ? (new Query().requiresCount()) : new Query();
+                queryModule = layer.query instanceof Query ? layer.query : new Query();
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7206,7 +7219,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             if (layer.dataSource instanceof DataManager) {
                 _this.serverProcess['request']++;
                 dataModule = layer.dataSource;
-                queryModule = layer.query instanceof Query ? layer.query : _this.isBlazor ? (new Query().requiresCount()) : new Query();
+                queryModule = layer.query instanceof Query ? layer.query : new Query();
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7220,8 +7233,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     if (layer.markerSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.markerSettings[i].dataSource;
-                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : _this.isBlazor ?
-                            (new Query().requiresCount()) : new Query();
+                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7240,8 +7252,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.bubbleSettings[i].dataSource;
-                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : _this.isBlazor ?
-                            (new Query().requiresCount()) : new Query();
+                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7403,7 +7414,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             tileElement1.style.left = left + 'px';
         }
         this.arrangeTemplate();
-        var blazor = this.isBlazor ? this.blazorTemplates() : null;
         if (this.annotationsModule) {
             if (this.width !== '0px' && this.height !== '0px' && this.width !== '0%' && this.height !== '0%') {
                 this.annotationsModule.renderAnnotationElements();
@@ -7416,7 +7426,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.zoomingChange();
-        this.trigger(loaded, this.isBlazor ? { isResized: this.isResize } : { maps: this, isResized: this.isResize });
+        this.trigger(loaded, { maps: this, isResized: this.isResize });
         this.isResize = false;
     };
     /**
@@ -7482,37 +7492,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    /**
-     * To append blazor templates
-     *
-     * @returns {void}
-     * @private
-     */
-    Maps.prototype.blazorTemplates = function () {
-        var _this = this;
-        for (var i = 0; i < this.layers.length; i++) {
-            var markerLength = this.layers[i].markerSettings.length - 1;
-            if (markerLength >= 0) {
-                if (this.layers[i].dataLabelSettings.visible || this.layers[i].markerSettings[markerLength].template) {
-                    updateBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate', this.layers[i].dataLabelSettings);
-                    for (var j = 0; j < this.layers[i].markerSettings.length; j++) {
-                        var markerRendered = function () {
-                            for (var x = 0; x < _this.layers.length; x++) {
-                                var markerTemplateEle = document.getElementById(_this.element.id + '_LayerIndex_' + x + '_Markers_Template_Group');
-                                if (!isNullOrUndefined(markerTemplateEle)) {
-                                    for (var z = 0; z < markerTemplateEle.childElementCount; z++) {
-                                        var markerTemplate$$1 = markerTemplateEle.childNodes[z];
-                                        markerTemplate$$1['style']['transform'] = 'translate(-50%, -50%)';
-                                    }
-                                }
-                            }
-                        };
-                        updateBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate', this.layers[i].markerSettings[j], undefined, markerRendered);
-                    }
-                }
-            }
-        }
-    };
     /**
      * Render the map area border
      *
@@ -7789,12 +7768,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.createSVG = function () {
-        resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
-        for (var i = 0; i < this.layers.length; i++) {
-            for (var j = 0; j < this.layers[i].markerSettings.length; j++) {
-                resetBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate');
-            }
-        }
         this.removeSvg();
         createSvg(this);
     };
@@ -7804,9 +7777,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeSvg = function () {
-        for (var i = 0; i < this.annotations.length; i++) {
-            resetBlazorTemplate(this.element.id + '_ContentTemplate_' + i, 'ContentTemplate');
-        }
         removeElement(this.element.id + '_Secondary_Element');
         removeElement(this.element.id + '_tile_parent');
         removeElement(this.element.id + '_tiles');
@@ -7884,7 +7854,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
-     * @blazorProperty 'PerformClick'
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -8036,7 +8005,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        e.preventDefault();
+        if (e.cancelable) {
+            e.preventDefault();
+        }
         return false;
     };
     /**
@@ -8084,7 +8055,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
-     * @blazorProperty 'PerformDoubleClick'
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -8110,9 +8080,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
             var doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
                 target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            var doubleClickBlazorArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            this.trigger('doubleClick', this.isBlazor ? doubleClickBlazorArgs : doubleClickArgs);
+            this.trigger('doubleClick', doubleClickArgs);
         }
     };
     /**
@@ -8208,7 +8176,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             name: resize,
             previousSize: this.availableSize,
             currentSize: new Size(0, 0),
-            maps: !this.isBlazor ? this : null
+            maps: this
         };
         if (this.resizeTo) {
             clearTimeout(this.resizeTo);
@@ -8482,7 +8450,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.zoomNotApplied = true;
         this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
         var zoomArgs = {
-            cancel: false, name: 'zoom', type: zoomIn, maps: !this.isBlazor ? this : null,
+            cancel: false, name: 'zoom', type: zoomIn, maps: this,
             tileTranslatePoint: {}, translatePoint: {},
             tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
             scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
@@ -8632,19 +8600,21 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     render = true;
                     break;
                 case 'zoomSettings':
-                    if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
-                        render = false;
-                    }
-                    else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
-                        this.zoomSettings.zoomFactor = 1;
-                        render = true;
-                    }
-                    else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
-                        this.zoomSettings.zoomFactor = 1;
-                        render = true;
-                    }
-                    else {
-                        render = true;
+                    if (!isNullOrUndefined(oldProp.zoomSettings)) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                            render = false;
+                        }
+                        else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
+                            this.zoomSettings.zoomFactor = 1;
+                            render = true;
+                        }
+                        else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
+                            this.zoomSettings.zoomFactor = 1;
+                            render = true;
+                        }
+                        else {
+                            render = true;
+                        }
                     }
                     break;
                 case 'locale':
@@ -8657,12 +8627,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             if (newProp.layers && isMarker) {
                 removeElement(this.element.id + '_Markers_Group');
                 if (this.isTileMap) {
-                    if (this.isBlazor) {
-                        this.render();
-                    }
-                    else {
-                        this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
-                    }
+                    this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
                 }
                 else {
                     this.render();
@@ -8673,7 +8638,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
             else {
                 this.createSVG();
-                this.render();
+                this.renderElements();
             }
         }
     };
@@ -9174,15 +9139,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     return Maps;
 }(Component));
 
-var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Bubble module class
  */
@@ -9280,14 +9236,14 @@ var Bubble = /** @__PURE__ @class */ (function () {
             width: bubbleSettings.border.width
         };
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var center = findMidPointOfPolygon(shapePoints[midIndex], projectionType);
+        var center = findMidPointOfPolygon(shapePoints[midIndex], projectionType, layer.geometryType);
         if (bubbleSettings.visible) {
             if (!isNullOrUndefined(center)) {
                 centerY = this.maps.projectionType === 'Mercator' ? center['y'] : (-center['y']);
                 eventArgs = {
                     cancel: false, name: bubbleRendering, border: bubbleBorder,
                     cx: center['x'], cy: centerY, data: shapeData, fill: bubbleColor,
-                    maps: this.maps.isBlazor ? null : this.maps, radius: radius
+                    maps: this.maps, radius: radius
                 };
             }
             else {
@@ -9296,17 +9252,13 @@ var Bubble = /** @__PURE__ @class */ (function () {
                     eventArgs = {
                         cancel: false, name: bubbleRendering, border: bubbleBorder,
                         cx: shapePoints[shapePointsLength]['x'], cy: shapePoints[shapePointsLength]['y'],
-                        data: shapeData, fill: bubbleColor, maps: this.maps.isBlazor ? null : this.maps,
+                        data: shapeData, fill: bubbleColor, maps: this.maps,
                         radius: radius
                     };
                 }
                 else {
                     return;
                 }
-                if (this.maps.isBlazor) {
-                    var maps = eventArgs.maps, blazorEventArgs = __rest$2(eventArgs, ["maps"]);
-                    eventArgs = blazorEventArgs;
-                }
             }
             this.maps.trigger('bubbleRendering', eventArgs, function (bubbleArgs) {
                 if (eventArgs.cancel) {
@@ -9393,10 +9345,6 @@ var Bubble = /** @__PURE__ @class */ (function () {
             cancel: false, name: bubbleClick, data: data, maps: this.maps,
             target: target, x: e.clientX, y: e.clientY
         };
-        if (this.maps.isBlazor) {
-            var maps = eventArgs.maps, blazorEventArgs = __rest$2(eventArgs, ["maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(bubbleClick, eventArgs);
     };
     /**
@@ -9440,10 +9388,6 @@ var Bubble = /** @__PURE__ @class */ (function () {
             cancel: false, name: bubbleMouseMove, data: data, maps: this.maps,
             target: target, x: e.clientX, y: e.clientY
         };
-        if (this.maps.isBlazor) {
-            var maps = eventArgs.maps, blazorEventArgs = __rest$2(eventArgs, ["maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(bubbleMouseMove, eventArgs);
     };
     /**
@@ -9469,15 +9413,6 @@ var Bubble = /** @__PURE__ @class */ (function () {
     return Bubble;
 }());
 
-var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * DataLabel Module used to render the maps datalabel
  */
@@ -9650,7 +9585,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
             };
         }
         else {
-            location = findMidPointOfPolygon(shapePoint[midIndex], projectionType);
+            location = findMidPointOfPolygon(shapePoint[midIndex], projectionType, layer.geometryType);
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var firstLevelMapLocation = location;
@@ -9671,7 +9606,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 location['x'] = ((location['x'] + zoomTransPoint['x']) * scale);
                 location['y'] = ((location['y'] + zoomTransPoint['y']) * scale);
             }
-            location['y'] = (this.maps.projectionType === 'Mercator') ? location['y'] : (-location['y']);
+            location['y'] = (this.maps.projectionType === 'Mercator') || layer.geometryType === 'Normal' ? location['y'] : (-location['y']);
             if (!isNullOrUndefined(this.maps.format) && !isNaN(parseFloat(text))) {
                 if (this.maps.useGroupingSeparator) {
                     text = Internalize(this.maps, parseFloat(text));
@@ -9685,10 +9620,6 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     width: dataLabel.border.width, opacity: dataLabel.border.opacity }, datalabel: dataLabel,
                 fill: dataLabel.fill, template: dataLabel.template, text: text
             };
-            if (this.maps.isBlazor) {
-                var maps = eventargs_1.maps, datalabel = eventargs_1.datalabel, blazorEventArgs = __rest$3(eventargs_1, ["maps", "datalabel"]);
-                eventargs_1 = blazorEventArgs;
-            }
             this.maps.trigger('dataLabelRendering', eventargs_1, function (labelArgs) {
                 if (eventargs_1.cancel) {
                     return;
@@ -9716,7 +9647,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 if (!isPoint && position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&
                     (shapeData['type'] !== 'MultiPolygon')) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var location1 = findMidPointOfPolygon(position, projectionType);
+                    var location1 = findMidPointOfPolygon(position, projectionType, layer.geometryType);
                     if (zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied && eventargs_1.template === '') {
                         location1['x'] = ((_this.maps.zoomLabelPositions[index]['location']['x'] + zoomTransPoint['x']) * scale);
                         location1['y'] = ((_this.maps.zoomLabelPositions[index]['location']['y'] + zoomTransPoint['y']) * scale);
@@ -9743,7 +9674,8 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
-                        trimmedLable = textTrim(width, text, style);
+                        var textType = typeof text === 'number' ? text.toString() : text;
+                        trimmedLable = textTrim(width, textType, style);
                         elementSize = measureText(trimmedLable, style);
                         options = new TextOption(labelId, textLocation.x, textLocation.y, 'middle', trimmedLable, '', '');
                     }
@@ -10569,7 +10501,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var collection = this.maps.legendModule.legendCollection;
         var length;
-        var multiSelectEnable = this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect;
+        var multiSelectEnable = !isNullOrUndefined(collection[0]['data'][0]['layerIndex']) ? this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect : false;
         var selectLength = 0;
         var interactProcess = true;
         var idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
@@ -12045,15 +11977,6 @@ var Legend = /** @__PURE__ @class */ (function () {
     return Legend;
 }());
 
-var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Highlight module class
  */
@@ -12218,10 +12141,6 @@ var Highlight = /** @__PURE__ @class */ (function () {
             data: data,
             maps: this.maps
         };
-        if (this.maps.isBlazor) {
-            var shapeData_1 = eventArgs.shapeData, maps = eventArgs.maps, blazorEventArgs = __rest$4(eventArgs, ["shapeData", "maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(itemHighlight, eventArgs, function () {
             eventArgs.border.opacity = isNullOrUndefined(_this.highlightSettings.border.opacity) ? _this.highlightSettings.opacity : _this.highlightSettings.border.opacity;
             _this.highlightMap(targetEle, eventArgs);
@@ -12275,15 +12194,6 @@ var Highlight = /** @__PURE__ @class */ (function () {
     return Highlight;
 }());
 
-var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Selection module class
  */
@@ -12422,10 +12332,6 @@ var Selection = /** @__PURE__ @class */ (function () {
             data: data,
             maps: this.maps
         };
-        if (this.maps.isBlazor) {
-            var shapeData_1 = eventArgs.shapeData, maps = eventArgs.maps, blazorEventArgs = __rest$5(eventArgs, ["shapeData", "maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger('itemSelection', eventArgs, function (observedArgs) {
             eventArgs.border.opacity = isNullOrUndefined(_this.selectionsettings.border.opacity) ? _this.selectionsettings.opacity : _this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
@@ -12741,131 +12647,62 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 maps: this.maps,
                 element: target, eventArgs: e
             };
-            if (this.maps.isBlazor) {
-                var tootipOption_1 = {
-                    location: location
-                };
-                var blazorArgs_1 = {
-                    name: tooltipRender,
-                    cancel: false,
-                    options: tootipOption_1,
-                    data: templateData,
-                    textStyle: tooltipArgs.options['textStyle'],
-                    fill: tooltipArgs.fill,
-                    element: target, eventArgs: e
-                };
-                this.maps.trigger(tooltipRender, blazorArgs_1, function (args) {
-                    if (!blazorArgs_1.cancel && option.visible && !isNullOrUndefined(currentData) &&
-                        (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
-                        if (targetId.indexOf('MarkerIndex') > 0) {
-                            
-                        }
-                        else if (targetId.indexOf('BubbleIndex') > 0) {
-                            
-                        }
-                        else {
-                            
-                        }
-                        _this.maps['isProtectedOnChange'] = true;
-                        if (blazorArgs_1.cancel) {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tootipOption_1.location,
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: tooltipArgs.options['textStyle'],
-                                availableSize: _this.maps.availableSize,
-                                fill: tooltipArgs.fill
-                            });
-                        }
-                        else {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tootipOption_1.location,
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: blazorArgs_1.textStyle,
-                                availableSize: _this.maps.availableSize,
-                                fill: blazorArgs_1.fill
-                            });
-                        }
-                        var tooltipElement = tooltipEle;
-                        _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
-                        _this.svgTooltip.appendTo(tooltipElement);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.renderReactTemplates();
+            this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
+                if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
+                    (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
+                    _this.maps['isProtectedOnChange'] = true;
+                    tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
+                        || _this.maps.themeStyle.tooltipFontColor;
+                    if (tooltipArgs.cancel) {
+                        _this.svgTooltip = new Tooltip({
+                            enable: true,
+                            header: '',
+                            data: option['data'],
+                            template: option['template'],
+                            content: [currentData.toString()],
+                            shapes: [],
+                            location: option['location'],
+                            palette: [markerFill],
+                            areaBounds: _this.maps.mapAreaRect,
+                            textStyle: option['textStyle'],
+                            availableSize: _this.maps.availableSize,
+                            fill: option.fill || _this.maps.themeStyle.tooltipFillColor
+                        });
                     }
                     else {
-                        _this.removeTooltip();
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.clearTemplate();
-                    }
-                });
-            }
-            else {
-                this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
-                    if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
-                        (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
-                        _this.maps['isProtectedOnChange'] = true;
-                        tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
-                            || _this.maps.themeStyle.tooltipFontColor;
-                        if (tooltipArgs.cancel) {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                data: option['data'],
-                                template: option['template'],
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: option['location'],
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: option['textStyle'],
-                                availableSize: _this.maps.availableSize,
-                                fill: option.fill || _this.maps.themeStyle.tooltipFillColor
-                            });
-                        }
-                        else {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                data: tooltipArgs.options['data'],
-                                template: tooltipArgs.options['template'],
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tooltipArgs.options['location'],
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: tooltipArgs.options['textStyle'],
-                                availableSize: _this.maps.availableSize,
-                                fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor
-                            });
-                        }
-                        _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
-                        _this.svgTooltip.appendTo(tooltipEle);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.renderReactTemplates();
-                        tooltipTemplateElement = document.getElementById(_this.maps.element.id + '_mapsTooltip');
-                        if (tooltipTemplateElement !== null && tooltipTemplateElement.innerHTML.indexOf('href') !== -1
-                            && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
-                            var templateStyle = tooltipTemplateElement.getAttribute('style');
-                            templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                            tooltipTemplateElement.setAttribute('style', templateStyle);
-                        }
+                        _this.svgTooltip = new Tooltip({
+                            enable: true,
+                            header: '',
+                            data: tooltipArgs.options['data'],
+                            template: tooltipArgs.options['template'],
+                            content: [currentData.toString()],
+                            shapes: [],
+                            location: tooltipArgs.options['location'],
+                            palette: [markerFill],
+                            areaBounds: _this.maps.mapAreaRect,
+                            textStyle: tooltipArgs.options['textStyle'],
+                            availableSize: _this.maps.availableSize,
+                            fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor
+                        });
                     }
-                    else {
-                        _this.removeTooltip();
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.clearTemplate();
+                    _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
+                    _this.svgTooltip.appendTo(tooltipEle);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    _this.maps.renderReactTemplates();
+                    tooltipTemplateElement = document.getElementById(_this.maps.element.id + '_mapsTooltip');
+                    if (tooltipTemplateElement !== null && tooltipTemplateElement.innerHTML.indexOf('href') !== -1
+                        && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
+                        var templateStyle = tooltipTemplateElement.getAttribute('style');
+                        templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
+                        tooltipTemplateElement.setAttribute('style', templateStyle);
                     }
-                });
-            }
+                }
+                else {
+                    _this.removeTooltip();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    _this.maps.clearTemplate();
+                }
+            });
             if (this.svgTooltip) {
                 this.maps.trigger('tooltipRenderComplete', {
                     cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
@@ -12998,15 +12835,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
     return MapsTooltip;
 }());
 
-var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Zoom module used to process the zoom for maps
  */
@@ -13131,14 +12959,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var zoomArgs;
         if (!map.isTileMap) {
             zoomArgs = {
-                cancel: false, name: 'zoom', type: type, maps: !map.isBlazor ? map : null,
+                cancel: false, name: 'zoom', type: type, maps: map,
                 tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                 tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale }
             };
         }
         else {
             zoomArgs = {
-                cancel: false, name: 'zoom', type: type, maps: !map.isBlazor ? map : null,
+                cancel: false, name: 'zoom', type: type, maps: map,
                 tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                 tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale }
             };
@@ -13343,7 +13171,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning || this.maps.isBlazor) {
+                            if (!this.isPanning) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -13462,7 +13290,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     }
                 }
                 this.maps.arrangeTemplate();
-                var blazor = this.maps.isBlazor ? this.maps.blazorTemplates() : null;
             }
             if (!isNullOrUndefined(this.currentLayer)) {
                 if (!animate$$1 || this.currentLayer.animationDuration === 0) {
@@ -13517,18 +13344,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 };
                 eventArgs = markerShapeChoose(eventArgs, data);
                 eventArgs = markerColorChoose(eventArgs, data);
-                if (_this.maps.isBlazor) {
-                    var maps = eventArgs.maps, marker_1 = eventArgs.marker, blazorEventArgs = __rest$6(eventArgs, ["maps", "marker"]);
-                    eventArgs = blazorEventArgs;
-                    var latitudeValue = 'Latitude';
-                    var longitudeValue = 'Longitude';
-                    markerSettings.longitudeValuePath = !isNullOrUndefined(markerSettings.longitudeValuePath) ?
-                        markerSettings.longitudeValuePath : !isNullOrUndefined(data['Longitude']) ? longitudeValue :
-                        !isNullOrUndefined(data['longitude']) ? 'longitude' : null;
-                    markerSettings.latitudeValuePath = !isNullOrUndefined(markerSettings.latitudeValuePath) ?
-                        markerSettings.latitudeValuePath : !isNullOrUndefined(data['Latitude']) ? latitudeValue :
-                        !isNullOrUndefined(data['latitude']) ? 'latitude' : null;
-                }
                 _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
                     if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
                         eventArgs = markerShapeChoose(eventArgs, data);
@@ -13542,22 +13357,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     var long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : 0;
-                    if (_this.maps.isBlazor) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var data1 = {};
-                        var j = 0;
-                        var text = [];
-                        for (var i = 0; i < Object.keys(data).length; i++) {
-                            if (Object.keys(data)[i].toLowerCase() !== 'text' && Object.keys(data)[i].toLowerCase() !== 'latitude'
-                                && Object.keys(data)[i].toLowerCase() !== 'blazortemplateid' && Object.keys(data)[i].toLowerCase() !== 'longitude'
-                                && Object.keys(data)[i].toLowerCase() !== 'name') {
-                                data1['text'] = text;
-                                text[j] = data[Object.keys(data)[i].toLowerCase()];
-                                j++;
-                            }
-                        }
-                        data['text'] = data1['text'];
-                    }
                     var offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                         var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -13778,28 +13577,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var layer = this.maps.layersCollection[layerIndex];
         var marker$$1 = layer.markerSettings[markerIndex];
         if (!isNullOrUndefined(marker$$1) && !isNullOrUndefined(marker$$1.dataSource) && !isNullOrUndefined(marker$$1.dataSource[dataIndex])) {
-            if (this.maps.isBlazor) {
-                marker$$1.longitudeValuePath = !isNullOrUndefined(marker$$1.longitudeValuePath) ?
-                    marker$$1.longitudeValuePath : !isNullOrUndefined(marker$$1.dataSource[dataIndex]['Longitude']) ? 'Longitude' :
-                    !isNullOrUndefined(marker$$1.dataSource[dataIndex]['longitude']) ? 'longitude' : null;
-                marker$$1.latitudeValuePath = !isNullOrUndefined(marker$$1.latitudeValuePath) ?
-                    marker$$1.latitudeValuePath : !isNullOrUndefined(marker$$1.dataSource[dataIndex]['Latitude']) ? 'Latitude' :
-                    !isNullOrUndefined(marker$$1.dataSource[dataIndex]['latitude']) ? 'latitude' : null;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var data1 = {};
-                var j = 0;
-                var text = [];
-                for (var i = 0; i < Object.keys(marker$$1.dataSource[dataIndex]).length; i++) {
-                    if (Object.keys(marker$$1.dataSource[dataIndex])[i].toLowerCase() !== 'text' && Object.keys(marker$$1.dataSource[dataIndex])[i].toLowerCase() !== 'longitude'
-                        && Object.keys(marker$$1.dataSource[dataIndex])[i].toLowerCase() !== 'latitude' && Object.keys(marker$$1.dataSource[dataIndex])[i].toLowerCase() !== 'blazortemplateid'
-                        && Object.keys(marker$$1.dataSource[dataIndex])[i].toLowerCase() !== 'name') {
-                        data1['text'] = text;
-                        text[j] = marker$$1.dataSource[dataIndex][Object.keys(marker$$1.dataSource[dataIndex])[i].toLowerCase()];
-                        j++;
-                    }
-                }
-                marker$$1.dataSource[dataIndex]['text'] = data1['text'];
-            }
             var lng = (!isNullOrUndefined(marker$$1.longitudeValuePath)) ?
                 Number(getValueFromObject(marker$$1.dataSource[dataIndex], marker$$1.longitudeValuePath)) :
                 !isNullOrUndefined(marker$$1.dataSource[dataIndex]['longitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['longitude']) :
@@ -13837,9 +13614,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
             else {
                 if (type === 'Template') {
-                    var elementOffset = element.getBoundingClientRect();
-                    element.style.left = ((location_2.x + x) * scale) + marker$$1.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                    element.style.top = ((location_2.y + y) * scale) + marker$$1.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                    if (duration > 0) {
+                        location_2.x = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location_2.x)) * scale);
+                        location_2.y = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location_2.y)) * scale);
+                        var layerOffset = getElementByID(this.maps.element.id + '_Layer_Collections').getBoundingClientRect();
+                        var elementOffset = element.parentElement.getBoundingClientRect();
+                        element.style.left = (((location_2.x) + (layerOffset.left - elementOffset.left)) + marker$$1.offset.x) + 'px';
+                        element.style.top = (((location_2.y) + (layerOffset.top - elementOffset.top)) + marker$$1.offset.y) + 'px';
+                        element.style.transform = 'translate(-50%, -50%)';
+                    }
+                    else {
+                        var elementOffset = element.getBoundingClientRect();
+                        element.style.left = ((location_2.x + x) * scale) + marker$$1.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
+                        element.style.top = ((location_2.y + y) * scale) + marker$$1.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                    }
                 }
                 else {
                     location_2.x = (((location_2.x + x) * scale) + marker$$1.offset.x);
@@ -13883,7 +13671,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
-                cancel: false, name: pan, maps: !map.isBlazor ? map : null,
+                cancel: false, name: pan, maps: map,
                 tileTranslatePoint: {}, translatePoint: { previous: translatePoint, current: new Point(x, y) },
                 scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location_3['latitude'], longitude: location_3['longitude']
             };
@@ -13920,7 +13708,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_4 = this.maps.getTileGeoLocation(mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
-                cancel: false, name: pan, maps: !map.isBlazor ? map : null,
+                cancel: false, name: pan, maps: map,
                 tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint },
                 translatePoint: { previous: translatePoint, current: map.translatePoint }, scale: map.scale,
                 tileZoomLevel: map.tileZoomLevel, latitude: location_4['latitude'], longitude: location_4['longitude']
@@ -14892,7 +14680,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var exportElement = _this.control.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark')
+            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }