@syncfusion/ej2-maps 19.3.44 → 19.4.42

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, 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';
@@ -45,13 +45,15 @@ function calculateSize(maps) {
     const containerHeight = maps.element.clientHeight;
     const containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
     const containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    let availableSize = new Size(0, 0);
     if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        maps.availableSize = new Size(0, 0);
+        availableSize = new Size(0, 0);
     }
     else {
-        maps.availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
+        availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
             Math.min(window.innerWidth, window.innerHeight) : 450));
     }
+    return availableSize;
 }
 /**
  * Method to create svg for maps.
@@ -61,7 +63,7 @@ function calculateSize(maps) {
  */
 function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
-    calculateSize(maps);
+    maps.availableSize = calculateSize(maps);
     maps.svgObject = maps.renderer.createSvg({
         id: maps.element.id + '_svg',
         width: maps.availableSize.width,
@@ -571,7 +573,7 @@ function renderTextElement(option, style, color, parent, isMinus = false) {
         'opacity': style.opacity,
         'dominant-baseline': option.baseLine
     };
-    const text = typeof option.text === 'string' ? option.text : isMinus ? option.text[option.text.length - 1] : option.text[0];
+    const text = typeof option.text === 'string' || typeof option.text === 'number' ? option.text : isMinus ? option.text[option.text.length - 1] : option.text[0];
     let tspanElement;
     const renderer = new SvgRenderer('');
     let height;
@@ -804,17 +806,19 @@ function markerShapeChoose(eventArgs, data) {
         const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = shape;
+        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
-            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath) &&
-                !isNullOrUndefined(data[eventArgs.imageUrlValuePath])) ?
-                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : data[eventArgs.imageUrlValuePath]) : eventArgs.imageUrl;
+            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
+                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
+                    data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
         }
     }
     else {
         const shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = shapes;
-        const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ? ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.imageUrlValuePath)).toString() : eventArgs.imageUrl) : eventArgs.imageUrl;
+        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
+        const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
+            ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
+                data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
         eventArgs.imageUrl = shapeImage;
     }
     return eventArgs;
@@ -1192,6 +1196,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  * @param {number} markerIndex - Specifies the marker index
  * @param {HTMLElement} markerTemplate - Specifies the marker template element
  * @param {Point} location - Specifies the location
+ * @param {Point} transPoint - Specifies the translate point.
  * @param {number} scale - Specifies the scale value
  * @param {Point} offset - Specifies the offset value
  * @param {Maps} maps - Specifies the instance of the maps
@@ -1373,7 +1378,7 @@ function calculateShapes(maps, shape, options, size, location, markerEle) {
     let tempGroup;
     switch (shape) {
         case 'Balloon':
-            tempGroup = drawBalloon(maps, options, size, location, markerEle);
+            tempGroup = drawBalloon(maps, options, size, location, 'Marker', markerEle);
             break;
         case 'Cross':
             options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height
@@ -1531,9 +1536,10 @@ function drawStar(maps, options, size, location, element) {
  * @returns {Element} - Returns the element
  * @private
  */
-function drawBalloon(maps, options, size, location, element) {
+function drawBalloon(maps, options, size, location, type, element) {
     const width = size.width;
     const height = size.height;
+    let pathElement;
     location.x -= width / 2;
     location.y -= height;
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
@@ -1542,9 +1548,15 @@ function drawBalloon(maps, options, size, location, element) {
     const x = size.width / 30;
     const y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    const g = maps.renderer.createGroup({ id: options.id });
-    appendShape(balloon, g);
-    return appendShape(g, element);
+    if (type === 'Marker') {
+        const g = maps.renderer.createGroup({ id: options.id });
+        appendShape(balloon, g);
+        pathElement = appendShape(g, element);
+    }
+    else {
+        pathElement = balloon;
+    }
+    return pathElement;
 }
 /**
  * Internal rendering of Pattern
@@ -1683,10 +1695,11 @@ function getRatioOfBubble(min, max, value, minValue, maxValue) {
  *
  * @param {MapLocation[]} points - Specifies the points
  * @param {string} type - Specifies the type
+ * @param {string} geometryType - Specified the type of the geometry
  * @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;
     }
@@ -1701,14 +1714,14 @@ function findMidPointOfPolygon(points, type) {
     let ySum = 0;
     for (let 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)))));
@@ -1729,7 +1742,7 @@ function findMidPointOfPolygon(points, type) {
     let height = 0;
     for (let i = min; i <= max - 1; i++) {
         const 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 };
@@ -1901,9 +1914,9 @@ function getTranslate(mapObject, layer, animate) {
         mapObject.mapScaleValue = scaleFactor = zoomFactorValue = mapObject.scaleOfGivenLocation;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const min = mapObject.baseMapRectBounds['min'];
+    const min = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['min'] : null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const max = mapObject.baseMapRectBounds['max'];
+    const max = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['max'] : null;
     const zoomFactor = animate ? 1 : mapObject.mapScaleValue;
     if (isNullOrUndefined(mapObject.currentShapeDataLength)) {
         mapObject.currentShapeDataLength = !isNullOrUndefined(layer.shapeData['features'])
@@ -1913,111 +1926,113 @@ function getTranslate(mapObject, layer, animate) {
     const availSize = mapObject.availableSize;
     let x;
     let y;
-    let mapWidth = Math.abs(max['x'] - min['x']);
-    let mapHeight = Math.abs(min['y'] - max['y']);
-    const factor = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
-    center = mapObject.zoomSettings.shouldZoomInitially
-        && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
-        mapObject.centerPosition;
-    if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
-        const leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
-        const topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
-        const point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
-            convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-        if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-            x = -point.x + leftPosition;
-            y = -point.y + topPosition;
-            scaleFactor = zoomFactor;
-        }
-        else {
-            if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
+    if (!isNullOrUndefined(min) && !isNullOrUndefined(max)) {
+        let mapWidth = Math.abs(max['x'] - min['x']);
+        let mapHeight = Math.abs(min['y'] - max['y']);
+        const factor = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
+        center = mapObject.zoomSettings.shouldZoomInitially
+            && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
+            mapObject.centerPosition;
+        if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
+            const leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
+            const topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
+            const point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
+                convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
+                scaleFactor = zoomFactor;
             }
             else {
-                if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
+                if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
                     x = -point.x + leftPosition;
                     y = -point.y + topPosition;
-                    scaleFactor = zoomFactor;
                 }
                 else {
-                    x = mapObject.zoomTranslatePoint.x;
-                    y = mapObject.zoomTranslatePoint.y;
+                    if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
+                        x = -point.x + leftPosition;
+                        y = -point.y + topPosition;
+                        scaleFactor = zoomFactor;
+                    }
+                    else {
+                        x = mapObject.zoomTranslatePoint.x;
+                        y = mapObject.zoomTranslatePoint.y;
+                    }
                 }
+                scaleFactor = mapObject.mapScaleValue;
             }
-            scaleFactor = mapObject.mapScaleValue;
-        }
-    }
-    else {
-        if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-            mapWidth *= scaleFactor;
-            mapHeight *= scaleFactor;
-            const widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
-            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
-            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-            mapObject.previousTranslate = new Point(x, y);
         }
         else {
-            if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                mapHeight *= scaleFactor;
                 mapWidth *= scaleFactor;
+                mapHeight *= scaleFactor;
+                const widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
+                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
                 y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
+                mapObject.previousTranslate = new Point(x, y);
             }
             else {
-                scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
-                mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
-                if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
-                    ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
-                    const scale = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
-                    mapHeight *= scale;
-                    mapWidth *= scale;
-                    y = size.y + ((-(min['y'])) + ((size.height / 2)
-                        - (mapHeight / 2)));
-                    scaleFactor = scale;
-                    x = size.x + ((-(min['x']))
-                        + ((size.width / 2) - (mapWidth / 2)));
-                }
-                else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
-                    const cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                    let cmapWidth = mapWidth;
-                    cmapWidth *= cscaleFactor;
-                    let cmapHeight = mapHeight;
-                    cmapHeight *= cscaleFactor;
-                    const x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
-                    const y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
-                    const xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
-                    const ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
-                    const actxdiff = xdiff * (mapObject.availableSize.width);
-                    const actydiff = ydiff * (mapObject.availableSize.height);
-                    x = x1 + actxdiff;
-                    y = y1 + actydiff;
-                    mapObject.previousTranslate = new Point(x1, y1);
-                    mapObject.zoomTranslatePoint.x = x;
-                    mapObject.zoomTranslatePoint.y = y;
+                if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
+                    scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                    mapHeight *= scaleFactor;
+                    mapWidth *= scaleFactor;
+                    y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                    x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                 }
                 else {
-                    if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
-                        scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                        mapWidth *= scaleFactor;
-                        x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
-                        mapHeight *= scaleFactor;
-                        y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                    scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
+                    mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
+                    if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
+                        ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
+                        const scale = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
+                        mapHeight *= scale;
+                        mapWidth *= scale;
+                        y = size.y + ((-(min['y'])) + ((size.height / 2)
+                            - (mapHeight / 2)));
+                        scaleFactor = scale;
+                        x = size.x + ((-(min['x']))
+                            + ((size.width / 2) - (mapWidth / 2)));
+                    }
+                    else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
+                        const cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                        let cmapWidth = mapWidth;
+                        cmapWidth *= cscaleFactor;
+                        let cmapHeight = mapHeight;
+                        cmapHeight *= cscaleFactor;
+                        const x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
+                        const y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
+                        const xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
+                        const ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
+                        const actxdiff = xdiff * (mapObject.availableSize.width);
+                        const actydiff = ydiff * (mapObject.availableSize.height);
+                        x = x1 + actxdiff;
+                        y = y1 + actydiff;
+                        mapObject.previousTranslate = new Point(x1, y1);
+                        mapObject.zoomTranslatePoint.x = x;
+                        mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        x = mapObject.zoomTranslatePoint.x;
-                        y = mapObject.zoomTranslatePoint.y;
-                        scaleFactor = mapObject.scale;
+                        if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
+                            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                            mapWidth *= scaleFactor;
+                            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
+                            mapHeight *= scaleFactor;
+                            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                        }
+                        else {
+                            x = mapObject.zoomTranslatePoint.x;
+                            y = mapObject.zoomTranslatePoint.y;
+                            scaleFactor = mapObject.scale;
+                        }
                     }
                 }
             }
         }
-    }
-    if (!isNullOrUndefined(mapObject.translatePoint)) {
-        x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
-        y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+        if (!isNullOrUndefined(mapObject.translatePoint)) {
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+        }
     }
     scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
     mapObject.widthBeforeRefresh = mapObject.availableSize.width;
@@ -2453,6 +2468,12 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
         delay: delay,
         progress: (args) => {
             if (args.timeStamp > args.delay) {
+                if (maps.isTileMap && height === 0) {
+                    const layerGroupElement = document.querySelector('.GroupElement');
+                    if (!isNullOrUndefined(layerGroupElement)) {
+                        layerGroupElement.style.display = 'block';
+                    }
+                }
                 height = ((args.timeStamp - args.delay) / args.duration);
                 element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +
                     ' ) scale(' + height + ')');
@@ -2652,6 +2673,8 @@ function renderLegendShape(location, size, shape, options, url) {
     const shapeY = location.y;
     const x = location.x + (-shapeWidth / 2);
     const y = location.y + (-shapeHeight / 2);
+    options['stroke'] = (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross') ? options['fill'] : options['stroke'];
+    options['stroke-width'] = (options['stroke-width'] === 0 && (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross')) ? 1 : options['stroke-width'];
     switch (shape) {
         case 'Circle':
         case 'Bubble':
@@ -2663,6 +2686,11 @@ function renderLegendShape(location, size, shape, options, url) {
                 + (shapeY + (-shapeHeight / 2));
             merge(options, { 'd': renderPath });
             break;
+        case 'HorizontalLine':
+            renderPath = 'M' + ' ' + shapeX + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' '
+                + shapeY;
+            merge(options, { 'd': renderPath });
+            break;
         case 'Diamond':
             renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
                 'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
@@ -2787,6 +2815,7 @@ function changeBorderWidth(element, index, scale, maps) {
             let value = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
+            const borderWidth = maps.layersCollection[index].shapeSettings.border.width;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2796,14 +2825,17 @@ function changeBorderWidth(element, index, scale, maps) {
                         currentStroke = maps.layersCollection[index].dataSource[value][borderWidthValue];
                     }
                     else {
-                        currentStroke = (maps.layersCollection[index].shapeSettings.border.width);
+                        currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
                     }
                 }
             }
             else {
-                currentStroke = (maps.layersCollection[index].shapeSettings.border.width);
+                currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
             }
             childNode.setAttribute('stroke-width', (currentStroke / scale).toString());
+            if (element.id.indexOf('_LineString') > -1 && isNullOrUndefined(currentStroke)) {
+                childNode.setAttribute('stroke-width', (1 / scale).toString());
+            }
         }
     }
 }
@@ -3165,15 +3197,15 @@ var Theme;
         fontWeight: 'Regular',
         color: null,
         fontStyle: 'Regular',
-        fontFamily: 'Roboto'
+        fontFamily: null
     };
     /** @private */
     Theme.legendTitleFont = {
-        size: '14px',
-        fontWeight: 'Regular',
+        size: '12px',
+        fontWeight: 'Medium',
         color: null,
-        fontStyle: 'Regular',
-        fontFamily: 'Roboto, Noto, Sans-serif'
+        fontStyle: 'Medium',
+        fontFamily: null
     };
     /** @private */
     Theme.legendLabelFont = {
@@ -3303,7 +3335,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) {
     let themePalette;
     switch (theme.toLowerCase()) {
@@ -3315,6 +3346,22 @@ function getShapeColor(theme) {
             themePalette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6',
                 '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
             break;
+        case 'bootstrap5':
+            themePalette = ['#262E0B', '#668E1F', '#AF6E10', '#862C0B', '#1F2D50',
+                '#64680B', '#311508', '#4C4C81', '#0C7DA0', '#862C0B'];
+            break;
+        case 'bootstrap5dark':
+            themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
+                '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
+            break;
+        case 'fluentui':
+            themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
+                '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
+            break;
+        case 'fluentuidark':
+            themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
+                '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -3460,6 +3507,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#363F4C',
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -3477,6 +3525,7 @@ function getThemeStyle(theme) {
                 tooltipFontColor: '#000000',
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
@@ -3552,6 +3601,98 @@ 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;
+        case 'fluentui':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#201F1E',
+                subTitleFontColor: '#201F1E',
+                legendTitleFontColor: '#201F1E',
+                legendTextColor: '#201F1E',
+                dataLabelFontColor: '#201F1E',
+                tooltipFontColor: '#323130',
+                tooltipFillColor: '#FFFFFF',
+                zoomFillColor: '#A19F9D',
+                fontFamily: 'Segoe UI',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#323130',
+                shapeFill: '#F3F2F1'
+            };
+            break;
+        case 'fluentuidark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#F3F2F1',
+                subTitleFontColor: '#F3F2F1',
+                legendTitleFontColor: '#F3F2F1',
+                legendTextColor: '#F3F2F1',
+                dataLabelFontColor: '#F3F2F1',
+                tooltipFontColor: '#F3F2F1',
+                tooltipFillColor: '#252423',
+                zoomFillColor: '#484644',
+                fontFamily: 'Segoe UI',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#F3F2F1',
+                shapeFill: '#252423'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
@@ -3565,6 +3706,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -4080,6 +4222,9 @@ __decorate$1([
  */
 class LegendSettings extends ChildProperty {
 }
+__decorate$1([
+    Property(false)
+], LegendSettings.prototype, "useMarkerShape", void 0);
 __decorate$1([
     Property(false)
 ], LegendSettings.prototype, "toggleVisibility", void 0);
@@ -4132,7 +4277,7 @@ __decorate$1([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
 __decorate$1([
-    Complex({}, Font)
+    Complex(Theme.legendTitleFont, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
 __decorate$1([
     Property('Bottom')
@@ -4220,7 +4365,7 @@ __decorate$1([
     Property(5)
 ], ShapeSettings.prototype, "circleRadius", void 0);
 __decorate$1([
-    Complex({ width: 0, color: '#000000' }, Border)
+    Complex({ width: null, color: '#000000' }, Border)
 ], ShapeSettings.prototype, "border", void 0);
 __decorate$1([
     Property('')
@@ -4445,15 +4590,6 @@ __decorate$1([
     Complex({ color: 'transparent', width: 1 }, Border)
 ], MapsAreaSettings.prototype, "border", void 0);
 
-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
  */
@@ -4498,15 +4634,9 @@ class Marker {
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
-                eventArgs = markerColorChoose(eventArgs, data);
-                eventArgs = markerShapeChoose(eventArgs, data);
                 this.maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    eventArgs = markerShapeChoose(eventArgs, data);
                     const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
@@ -4726,17 +4856,13 @@ class Marker {
         if (isNullOrUndefined(options)) {
             return;
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: markerClick, data: options.data, maps: this.maps,
             marker: options.marker, target: target, x: e.clientX, y: e.clientY,
             latitude: options.data['latitude'] || options.data['Latitude'],
             longitude: options.data['longitude'] || options.data['Longitude'],
             value: options.data['name']
         };
-        if (this.maps.isBlazor) {
-            const { maps, marker: marker$$1 } = eventArgs, blazorEventArgs = __rest(eventArgs, ["maps", "marker"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(markerClick, eventArgs);
     }
     /**
@@ -4815,9 +4941,6 @@ class Marker {
                     collection = [];
                     for (const i of indexes) {
                         collection.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;
@@ -5332,15 +5455,6 @@ class 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 */
@@ -5510,7 +5624,7 @@ class LayerPanel {
         if (this.mapObject.zoomSettings.resetToInitial && this.mapObject.initialCheck && !isNullOrUndefined(panel.mapObject.height)
             && this.mapObject.availableSize.height > 512) {
             this.mapObject.applyZoomReset = true;
-            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512) + 1;
+            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
             const padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             const totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
@@ -5551,14 +5665,10 @@ class LayerPanel {
                 }
             }
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: layerRendering, index: layerIndex,
             layer: layer, maps: this.mapObject, visible: layer.visible
         };
-        if (this.mapObject.isBlazor) {
-            const { maps, layer } = eventArgs, blazorEventArgs = __rest$1(eventArgs, ["maps", "layer"]);
-            eventArgs = blazorEventArgs;
-        }
         this.mapObject.trigger('layerRendering', eventArgs, (observedArgs) => {
             if (!eventArgs.cancel && eventArgs.visible) {
                 if (layer.layerType !== 'Geometry') {
@@ -5593,13 +5703,11 @@ class LayerPanel {
                                 bing.maxZoom = maxZoom;
                             }
                             proxy.mapObject['bingMap'] = bing;
-                            if (this.mapObject.isBlazor) {
-                                if (!isNullOrUndefined(markerGroupElement)) {
-                                    removeElement(this.mapObject.element.id + '_Markers_Group');
-                                }
-                            }
                             proxy.renderTileLayer(proxy, layer, layerIndex, bing);
                             this.mapObject.arrangeTemplate();
+                            if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
+                                this.mapObject.zoomModule.applyTransform(true);
+                            }
                         };
                         ajax.send();
                     }
@@ -5677,9 +5785,7 @@ class LayerPanel {
                 const data = geometryData['geometry'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const properties = geometryData['properties'];
-                if (type !== 'LineString') {
-                    this.generatePoints(type, coords, data, properties);
-                }
+                this.generatePoints(type, coords, data, properties);
             }
         });
         this.currentLayer.rectBounds = this.rectBounds;
@@ -5707,11 +5813,9 @@ class LayerPanel {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const currentShapeData = this.currentLayer.layerData[i];
                 let pathOptions;
-                let polyLineOptions;
                 let circleOptions;
                 let groupElement;
                 let path = '';
-                let points = '';
                 let fill = (shapeSettings.autofill) ? colors[i % colors.length] :
                     (shapeSettings.fill || this.mapObject.themeStyle.shapeFill);
                 if (shapeSettings.colorValuePath !== null && !isNullOrUndefined(currentShapeData['property'])) {
@@ -5754,17 +5858,13 @@ class LayerPanel {
                 }
                 const opacity = (Object.prototype.toString.call(getShapeColor$$1) === '[object Object]'
                     && !isNullOrUndefined(getShapeColor$$1['opacity'])) ? getShapeColor$$1['opacity'] : shapeSettings.opacity;
-                let eventArgs = {
+                const eventArgs = {
                     cancel: false, name: shapeRendering, index: i,
                     data: this.currentLayer.dataSource ? this.currentLayer.dataSource[k] : null,
                     maps: this.mapObject,
                     shape: shapeSettings, fill: fill,
                     border: { width: borderValue.width, color: borderValue.color, opacity: borderValue.opacity }
                 };
-                if (this.mapObject.isBlazor) {
-                    const { maps } = eventArgs, blazorEventArgs = __rest$1(eventArgs, ["maps"]);
-                    eventArgs = blazorEventArgs;
-                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const shapeRenderingSuccess = (eventArgs) => {
                     let drawingType = !isNullOrUndefined(currentShapeData['_isMultiPolygon'])
@@ -5779,7 +5879,7 @@ class LayerPanel {
                         if (isNullOrUndefined(shapeSettings.borderColorValuePath)) {
                             this.mapObject.layers[layerIndex].shapeSettings.border.color = eventArgs.border.color;
                         }
-                        else if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
+                        if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
                             this.mapObject.layers[layerIndex].shapeSettings.border.width = eventArgs.border.width;
                         }
                     }
@@ -5833,17 +5933,21 @@ class LayerPanel {
                             }
                             break;
                         case 'LineString':
+                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             currentShapeData.map((lineData) => {
-                                points += lineData['point']['x'] + ' , ' + lineData['point']['y'] + ' ';
+                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
                             });
-                            polyLineOptions = new PolylineOption(shapeID, points, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray);
-                            pathEle = this.mapObject.renderer.drawPolyline(polyLineOptions);
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = this.mapObject.renderer.drawPath(pathOptions);
+                            }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const pointData = currentShapeData['point'];
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], shapeSettings.circleRadius, null);
+                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / this.currentFactor;
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
                             pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                             break;
                         case 'Path':
@@ -5865,6 +5969,9 @@ class LayerPanel {
                         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
                             (currentShapeData['property'][properties]) : ''));
                         pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 2).toString());
+                        if (drawingType === 'LineString') {
+                            pathEle.setAttribute('style', 'outline:none');
+                        }
                         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
                         if (this.mapObject.toggledShapeElementId) {
                             for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
@@ -6073,11 +6180,14 @@ class LayerPanel {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
+                const extraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((points, index) => {
                     latitude = points[1];
                     longitude = points[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6088,6 +6198,8 @@ class LayerPanel {
                 break;
             case 'point': {
                 let arrayCollections = false;
+                const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((points, index) => {
                     if (Object.prototype.toString.call(points) === '[object Array]') {
@@ -6104,6 +6216,7 @@ class LayerPanel {
                     latitude = coordinates[1];
                     longitude = coordinates[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace);
                     this.currentLayer.layerData.push({
                         point: point, type: type, lat: latitude, lng: longitude, property: properties
                     });
@@ -6117,6 +6230,17 @@ class LayerPanel {
                 break;
         }
     }
+    calculateBox(point, extraSpace) {
+        if (isNullOrUndefined(this.rectBounds)) {
+            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+        }
+        else {
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
+        }
+    }
     calculateFactor(layer) {
         let horFactor;
         let verFactor = 1;
@@ -6224,6 +6348,15 @@ class LayerPanel {
                             this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'linestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map((point, index) => {
+                            this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                        });
+                        break;
+                    case 'point':
+                        this.calculateRectBox(coordinates, 'point');
+                        break;
                 }
             }
         });
@@ -6259,19 +6392,32 @@ class LayerPanel {
         return newData;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    calculateRectBox(coordinates) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(coordinates, (currentCoords) => {
-            if (isNullOrUndefined(this.mapObject.baseMapBounds)) {
-                this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+    calculateRectBox(coordinates, type, isFirstItem) {
+        if (type !== 'LineString' && type !== 'point') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(coordinates, (currentCoords) => {
+                if (isNullOrUndefined(this.mapObject.baseMapBounds)) {
+                    this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+                }
+                else {
+                    this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
+                    this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
+                    this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
+                    this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                }
+            });
+        }
+        else {
+            if ((isFirstItem || type === 'point') && isNullOrUndefined(this.mapObject.baseMapBounds)) {
+                this.mapObject.baseMapBounds = new GeoLocation({ min: coordinates[1], max: coordinates[1] }, { min: coordinates[0], max: coordinates[0] });
             }
             else {
-                this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
-                this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
-                this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
-                this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, coordinates[1]);
+                this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, coordinates[1]);
+                this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, coordinates[0]);
+                this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, coordinates[0]);
             }
-        });
+        }
     }
     generateTiles(zoomLevel, tileTranslatePoint, zoomType, bing, position) {
         const userLang = this.mapObject.locale;
@@ -6358,15 +6504,17 @@ class LayerPanel {
                 }
             }
         }
-        this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        }
     }
     arrangeTiles(type, x, y) {
         const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         const element1 = document.getElementById(this.mapObject.element.id + '_tiles');
         let timeOut;
-        if (!isNullOrUndefined(type) && type !== 'Pan' && type !== 'Reset' && type.indexOf('ZoomOut') === -1) {
+        if (!isNullOrUndefined(type) && type !== 'Pan') {
             this.tileAnimation(type, x, y);
-            timeOut = 250;
+            timeOut = this.mapObject.layersCollection[0].animationDuration;
         }
         else {
             timeOut = 0;
@@ -6381,7 +6529,6 @@ class LayerPanel {
                 }
                 if (element1) {
                     element1.style.zIndex = '0';
-                    element1.style.visibility = 'hidden';
                 }
                 let animateElement;
                 if (!document.getElementById(this.mapObject.element.id + '_animated_tiles') && element) {
@@ -6439,35 +6586,23 @@ class LayerPanel {
      * @returns {void}
      */
     tileAnimation(zoomType, translateX, translateY) {
-        const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
-        let element1 = document.getElementById('animated_tiles');
-        const ele = document.getElementById(this.mapObject.element.id + '_tiles');
+        const tileParent = document.getElementById(this.mapObject.element.id + '_tile_parent');
+        const animatedTiles = document.getElementById(this.mapObject.element.id + '_animated_tiles');
+        const tileElement = document.getElementById(this.mapObject.element.id + '_tiles');
         let scaleValue = '2';
-        if (zoomType.indexOf('ZoomOut') === 0) {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            // element1 = ele.children[ele.childElementCount - 1] as HTMLElement;
-            while (ele.childElementCount >= 1) {
-                ele.removeChild(ele.children[0]);
-            }
-            translateX = 0;
-            translateY = 128 - 23;
-            scaleValue = '0.5';
-        }
-        else if (zoomType === 'Reset') {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            while (!(ele.childElementCount === 1) && !(ele.childElementCount === 0)) {
-                ele.removeChild(ele.children[1]);
+        if (zoomType.indexOf('ZoomOut') === 0 || zoomType === 'Reset') {
+            tileElement.style.zIndex = '1';
+            tileParent.style.zIndex = '0';
+            while (tileElement.childElementCount >= 1) {
+                tileElement.removeChild(tileElement.children[0]);
             }
-            element1 = ele.children[0];
             translateX = 0;
-            translateY = 0;
-            scaleValue = '1';
+            translateY = document.getElementById(this.mapObject.element.id + '_tile_parent').getClientRects()[0].height / 4;
+            scaleValue = zoomType.indexOf('ZoomOut') === 0 ? '0.5' : '0.2';
         }
-        if (!isNullOrUndefined(element1)) {
-            element1.style.transition = '250ms';
-            element1.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
+        if (!isNullOrUndefined(animatedTiles)) {
+            animatedTiles.style.transition = this.mapObject.layersCollection[0].animationDuration + 'ms';
+            animatedTiles.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
         }
     }
     /**
@@ -6607,9 +6742,6 @@ class Annotations {
         });
         if (annotationGroup.childElementCount > 0 && !(isNullOrUndefined(getElementByID(secondaryID)))) {
             getElementByID(secondaryID).appendChild(annotationGroup);
-            for (let 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();
@@ -6638,10 +6770,9 @@ class Annotations {
             if (argsData.cancel) {
                 return;
             }
-            const 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));
                 const length = templateElement.length;
                 for (let i = 0; i < length; i++) {
                     childElement.appendChild(templateElement[i]);
@@ -6884,20 +7015,14 @@ let Maps = class Maps extends Component {
      */
     preRender() {
         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}
-     */
-    render() {
-        this.trigger(load, this.isBlazor ? {} : { maps: this });
+    renderElements() {
+        this.trigger(load, { maps: this });
         this.createSVG();
         this.findBaseAndSubLayers();
         this.createSecondaryElement();
@@ -6909,6 +7034,14 @@ let Maps = class Maps extends Component {
         this.processRequestJsonData();
         this.renderComplete();
     }
+    /**
+     * To Initialize the control rendering.
+     *
+     * @returns {void}
+     */
+    render() {
+        this.renderElements();
+    }
     processRequestJsonData() {
         const length = this.layersCollection.length - 1;
         this.serverProcess = { request: 0, response: 0 };
@@ -6918,7 +7051,7 @@ let Maps = class Maps extends Component {
             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
                 const dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6934,7 +7067,7 @@ let Maps = class Maps extends Component {
             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
                 const dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6948,8 +7081,7 @@ let Maps = class Maps extends Component {
                     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
                         const dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6965,8 +7097,7 @@ let Maps = class Maps extends Component {
                     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
                         const dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7055,7 +7186,15 @@ let Maps = class Maps extends Component {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                let markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                if (!isNullOrUndefined(markerTemplate$$1)) {
+                    markerTemplate$$1.style.top = this.mapAreaRect.y + position.y + 'px';
+                    markerTemplate$$1.style.left = this.mapAreaRect.x + position.x + 'px';
+                }
+            }
             if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
                 this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
                 const checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -7124,7 +7263,6 @@ let Maps = class Maps extends Component {
             tileElement1.style.left = left + 'px';
         }
         this.arrangeTemplate();
-        const 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();
@@ -7137,7 +7275,7 @@ let Maps = class Maps extends Component {
             }
         }
         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;
     }
     /**
@@ -7203,36 +7341,6 @@ let Maps = class Maps extends Component {
             }
         }
     }
-    /**
-     * To append blazor templates
-     *
-     * @returns {void}
-     * @private
-     */
-    blazorTemplates() {
-        for (let i = 0; i < this.layers.length; i++) {
-            const 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 (let j = 0; j < this.layers[i].markerSettings.length; j++) {
-                        const markerRendered = () => {
-                            for (let x = 0; x < this.layers.length; x++) {
-                                const markerTemplateEle = document.getElementById(this.element.id + '_LayerIndex_' + x + '_Markers_Template_Group');
-                                if (!isNullOrUndefined(markerTemplateEle)) {
-                                    for (let z = 0; z < markerTemplateEle.childElementCount; z++) {
-                                        const 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
      *
@@ -7508,12 +7616,6 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     createSVG() {
-        resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
-        for (let i = 0; i < this.layers.length; i++) {
-            for (let j = 0; j < this.layers[i].markerSettings.length; j++) {
-                resetBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate');
-            }
-        }
         this.removeSvg();
         createSvg(this);
     }
@@ -7523,9 +7625,6 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     removeSvg() {
-        for (let 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');
@@ -7603,7 +7702,6 @@ let Maps = class Maps extends Component {
      * 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'
      */
     mapsOnClick(e) {
         const targetEle = e.target;
@@ -7754,7 +7852,9 @@ let Maps = class Maps extends Component {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        e.preventDefault();
+        if (e.cancelable) {
+            e.preventDefault();
+        }
         return false;
     }
     /**
@@ -7802,7 +7902,6 @@ let Maps = class Maps extends Component {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
-     * @blazorProperty 'PerformDoubleClick'
      */
     mapsOnDoubleClick(e) {
         this.notify('dblclick', e);
@@ -7828,9 +7927,7 @@ let Maps = class Maps extends Component {
             }
             const doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
                 target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            const 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);
         }
     }
     /**
@@ -7920,26 +8017,28 @@ let Maps = class Maps extends Component {
      * @param e - Specifies the arguments of window resize event.
      */
     mapsOnResize(e) {
-        this.isResize = true;
+        this.isResize = this.isReset = true;
         const args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
-            maps: !this.isBlazor ? this : null
+            currentSize: calculateSize(this),
+            maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(() => {
-                this.unWireEVents();
-                this.createSVG();
-                this.refreshing = true;
-                this.wireEVents();
-                args.currentSize = this.availableSize;
-                this.trigger(resize, args);
-                this.render();
-            }, 500);
+        this.trigger(resize, args);
+        if (!args.cancel) {
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                this.resizeTo = setTimeout(() => {
+                    this.unWireEVents();
+                    this.createSVG();
+                    this.refreshing = true;
+                    this.wireEVents();
+                    this.render();
+                }, 500);
+            }
         }
         return false;
     }
@@ -8197,7 +8296,7 @@ let Maps = class Maps extends Component {
         this.zoomNotApplied = true;
         this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
         const 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 } :
@@ -8345,19 +8444,21 @@ let Maps = class Maps extends Component {
                     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':
@@ -8370,12 +8471,7 @@ let Maps = class Maps extends Component {
             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();
@@ -8386,7 +8482,7 @@ let Maps = class Maps extends Component {
             }
             else {
                 this.createSVG();
-                this.render();
+                this.renderElements();
             }
         }
     }
@@ -8526,6 +8622,21 @@ let Maps = class Maps extends Component {
         });
         return isVisible;
     }
+    /**
+     * To find space between the secondary element and svg element.
+     */
+    getExtraPosition() {
+        let top;
+        let left;
+        const svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            const svgClientRect = svgElement.getClientRects()[0];
+            const mapsClientRect = (getElement(this.element.id + '_Secondary_Element')).getClientRects()[0];
+            top = svgClientRect.top - mapsClientRect.top;
+            left = svgClientRect.left - mapsClientRect.left;
+        }
+        return new Point(left, top);
+    }
     /**
      * To find marker visibility
      */
@@ -8874,15 +8985,6 @@ Maps = __decorate([
     NotifyPropertyChanges
 ], Maps);
 
-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
  */
@@ -8898,6 +9000,8 @@ class Bubble {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To render bubble
+     *
+     * @private
      */
     renderBubble(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8942,7 +9046,7 @@ class Bubble {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             const shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue) {
+            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
                 if (layerData[i]['type'] === 'Point') {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
@@ -8979,14 +9083,14 @@ class Bubble {
             width: bubbleSettings.border.width
         };
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const center = findMidPointOfPolygon(shapePoints[midIndex], projectionType);
+        const 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 {
@@ -8995,17 +9099,13 @@ class Bubble {
                     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) {
-                    const { maps } = eventArgs, blazorEventArgs = __rest$2(eventArgs, ["maps"]);
-                    eventArgs = blazorEventArgs;
-                }
             }
             this.maps.trigger('bubbleRendering', eventArgs, (bubbleArgs) => {
                 if (eventArgs.cancel) {
@@ -9077,6 +9177,8 @@ class Bubble {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
+     *
+     * @private
      */
     bubbleClick(e) {
         const target = e.target.id;
@@ -9088,14 +9190,10 @@ class Bubble {
         if (isNullOrUndefined(data)) {
             return;
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: bubbleClick, data: data, maps: this.maps,
             target: target, x: e.clientX, y: e.clientY
         };
-        if (this.maps.isBlazor) {
-            const { maps } = eventArgs, blazorEventArgs = __rest$2(eventArgs, ["maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(bubbleClick, eventArgs);
     }
     /**
@@ -9124,6 +9222,8 @@ class Bubble {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble move event
+     *
+     * @private
      */
     bubbleMove(e) {
         const target = e.target.id;
@@ -9135,14 +9235,10 @@ class Bubble {
         if (isNullOrUndefined(data)) {
             return;
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: bubbleMouseMove, data: data, maps: this.maps,
             target: target, x: e.clientX, y: e.clientY
         };
-        if (this.maps.isBlazor) {
-            const { maps } = eventArgs, blazorEventArgs = __rest$2(eventArgs, ["maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(bubbleMouseMove, eventArgs);
     }
     /**
@@ -9167,15 +9263,6 @@ class 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
  */
@@ -9347,7 +9434,7 @@ class DataLabel {
             };
         }
         else {
-            location = findMidPointOfPolygon(shapePoint[midIndex], projectionType);
+            location = findMidPointOfPolygon(shapePoint[midIndex], projectionType, layer.geometryType);
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const firstLevelMapLocation = location;
@@ -9368,7 +9455,7 @@ class DataLabel {
                 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));
@@ -9377,15 +9464,11 @@ class DataLabel {
                     }
                 }
             }
-            let eventargs = {
+            const eventargs = {
                 name: dataLabelRendering, maps: this.maps, cancel: false, border: { color: dataLabel.border.color,
                     width: dataLabel.border.width, opacity: dataLabel.border.opacity }, datalabel: dataLabel,
                 fill: dataLabel.fill, template: dataLabel.template, text: text
             };
-            if (this.maps.isBlazor) {
-                const { maps, datalabel } = eventargs, blazorEventArgs = __rest$3(eventargs, ["maps", "datalabel"]);
-                eventargs = blazorEventArgs;
-            }
             this.maps.trigger('dataLabelRendering', eventargs, (labelArgs) => {
                 if (eventargs.cancel) {
                     return;
@@ -9413,7 +9496,7 @@ class DataLabel {
                 if (!isPoint && position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&
                     (shapeData['type'] !== 'MultiPolygon')) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const location1 = findMidPointOfPolygon(position, projectionType);
+                    const location1 = findMidPointOfPolygon(position, projectionType, layer.geometryType);
                     if (zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied && eventargs.template === '') {
                         location1['x'] = ((this.maps.zoomLabelPositions[index]['location']['x'] + zoomTransPoint['x']) * scale);
                         location1['y'] = ((this.maps.zoomLabelPositions[index]['location']['y'] + zoomTransPoint['y']) * scale);
@@ -9440,7 +9523,9 @@ class DataLabel {
                 }
                 else {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
-                        trimmedLable = textTrim(width, text, style);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const 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, '', '');
                     }
@@ -10156,6 +10241,7 @@ class Legend {
         const shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
         let textOptions;
         const render = map.renderer;
+        let legendShape = legend.shape;
         if (page >= 0 && page < this.totalPages.length) {
             if (querySelector(this.legendGroup.id, this.maps.element.id)) {
                 remove(querySelector(this.legendGroup.id, this.maps.element.id));
@@ -10165,7 +10251,7 @@ class Legend {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
                 const shapeBorder = collection['shapeBorder'];
-                const legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
+                let legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                 let legendText = collection['DisplayText'];
                 const shape = ((legend.type === 'Markers') ? ((isNullOrUndefined(collection['ImageSrc'])) ?
                     legend.shape : 'Image') : collection['legendShape']);
@@ -10180,21 +10266,35 @@ class Legend {
                 const textLocation = collection['Text'];
                 const imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 const renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
-                legend.textStyle.color = (legend.textStyle.color !== null) ? legend.textStyle.color :
+                const legendTextStyle = {
+                    fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
+                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color, opacity: legend.textStyle.opacity
+                };
+                legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legend.textStyle.fontFamily = map.themeStyle.fontFamily || legend.textStyle.fontFamily;
-                legend.textStyle.size = map.themeStyle.legendFontSize || legend.textStyle.size;
+                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
-                legendElement.appendChild(drawSymbol(shapeLocation, shape, shapeSize, collection['ImageSrc'], renderOptions));
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    const legendShapeData = this.legendCollection[collection['idIndex']].data[0];
+                    const marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
+                    legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
+                }
+                if (legendShape === "Balloon") {
+                    legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
+                }
                 const legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
-                    const trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legend.textStyle, legendRectSize);
+                    const trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                renderTextElement(textOptions, legend.textStyle, legend.textStyle.color, legendElement);
+                renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
                 this.legendGroup.appendChild(legendElement);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
@@ -10262,7 +10362,7 @@ class Legend {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const collection = this.maps.legendModule.legendCollection;
         let length;
-        const multiSelectEnable = this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect;
+        const multiSelectEnable = !isNullOrUndefined(collection[0]['data'][0]['layerIndex']) ? this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect : false;
         let selectLength = 0;
         let interactProcess = true;
         const idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
@@ -10875,7 +10975,10 @@ class Legend {
         const map = this.maps;
         const legend = map.legendSettings;
         const legendTitle = legend.title.text;
-        const textStyle = legend.titleStyle;
+        const textStyle = {
+            fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color, opacity: legend.titleStyle.opacity
+        };
         let textOptions;
         const spacing = 10;
         const trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -10894,6 +10997,7 @@ class Legend {
         map.svgObject.appendChild(this.legendGroup);
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
+            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
             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);
         }
@@ -10999,20 +11103,24 @@ class Legend {
                     }
                     else {
                         newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
-                            shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
+                            shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (this.maps.legendSettings.useMarkerShape ? marker$$1.shape : this.maps.legendSettings.shape) });
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                 }
             });
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getMarkerLegendData(layerIndex, text, legendFill) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const legendData = [];
         this.maps.layers[layerIndex].markerSettings.map((markerSettings, markerIndex) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                let marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker$$1.legendText] || text === '') && legendFill == data[marker$$1.colorValuePath]) {
+                const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+                if ((text === data[marker$$1.legendText] || text === '') && legendFill === data[marker$$1.colorValuePath]) {
                     legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
                         shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
                 }
@@ -11361,7 +11469,7 @@ class Legend {
                             shape = this.legendCollection[legendIndex]['data'][i];
                             mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
-                                '_MarkerIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
                                 mapElement = mapElement.children[0];
                             }
@@ -11370,7 +11478,7 @@ class Legend {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11385,6 +11493,9 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', '#E5E5E5');
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#E5E5E5');
                                 }
@@ -11399,6 +11510,9 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#757575');
                                 }
@@ -11433,7 +11547,7 @@ class Legend {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
                                     layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                     layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
-                                    layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                    layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                     layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                         this.maps.layers[j].shapeSettings.opacity :
                                         this.maps.layers[j].shapeSettings.border.opacity).toString());
@@ -11463,7 +11577,7 @@ class Legend {
                                 layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                     this.maps.layers[j].shapeSettings.opacity :
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
-                                layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                 layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                 layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
                                 if (targetEle !== null) {
@@ -11483,7 +11597,7 @@ class Legend {
             targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
             targetEle.id.indexOf('_Text') === -1) {
             let LegendInteractive;
-            const legendIndex = parseFloat(targetEle.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            const legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let mapdata;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11504,7 +11618,7 @@ class Legend {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
-                                    LegendInteractive.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11568,7 +11682,7 @@ class Legend {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
                                     mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapLegendElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11595,7 +11709,7 @@ class Legend {
                                     this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                mapLegendElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                 mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                     this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11722,15 +11836,6 @@ class 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
  */
@@ -11878,14 +11983,14 @@ class Highlight {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         const border = {
-            color: this.highlightSettings.border.color,
-            width: this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };
-        let eventArgs = {
+        const eventArgs = {
             opacity: this.highlightSettings.opacity,
-            fill: targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
-                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none',
+            fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
+                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
             border: border,
             name: itemHighlight,
             target: targetEle.id,
@@ -11894,10 +11999,6 @@ class Highlight {
             data: data,
             maps: this.maps
         };
-        if (this.maps.isBlazor) {
-            const { shapeData, maps } = eventArgs, blazorEventArgs = __rest$4(eventArgs, ["shapeData", "maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(itemHighlight, eventArgs, () => {
             eventArgs.border.opacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
             this.highlightMap(targetEle, eventArgs);
@@ -11950,15 +12051,6 @@ class 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
  */
@@ -12079,15 +12171,16 @@ class Selection {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectMap(targetElement, shapeData, data) {
+        const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
         const selectionsettings = this.selectionsettings;
         const border = {
-            color: this.selectionsettings.border.color,
-            width: this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale),
+            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
+            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
             opacity: this.selectionsettings.border.opacity
         };
-        let eventArgs = {
+        const eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none',
+            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -12096,10 +12189,6 @@ class Selection {
             data: data,
             maps: this.maps
         };
-        if (this.maps.isBlazor) {
-            const { shapeData, maps } = eventArgs, blazorEventArgs = __rest$5(eventArgs, ["shapeData", "maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger('itemSelection', eventArgs, (observedArgs) => {
             eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ? this.selectionsettings.opacity : this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
@@ -12283,8 +12372,6 @@ class MapsTooltip {
         if (istooltipRender) {
             if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
-                option.textStyle.fontFamily = this.maps.themeStyle.fontFamily || option.textStyle.fontFamily;
-                option.textStyle.opacity = this.maps.themeStyle.tooltipTextOpacity || option.textStyle.opacity;
                 const shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
                     return;
@@ -12401,9 +12488,13 @@ class MapsTooltip {
                 option.template = option.template[Object.keys(option.template)[0]];
             }
             templateData = this.setTooltipContent(option, templateData);
+            const tooltipTextStyle = {
+                color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
+                fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
+            };
             const tooltipOption = {
                 location: location, text: tooltipContent, data: templateData,
-                textStyle: option.textStyle,
+                textStyle: tooltipTextStyle,
                 template: option.template
             };
             tooltipArgs = {
@@ -12413,131 +12504,66 @@ class MapsTooltip {
                 maps: this.maps,
                 element: target, eventArgs: e
             };
-            if (this.maps.isBlazor) {
-                const tootipOption = {
-                    location: location
-                };
-                const blazorArgs = {
-                    name: tooltipRender,
-                    cancel: false,
-                    options: tootipOption,
-                    data: templateData,
-                    textStyle: tooltipArgs.options['textStyle'],
-                    fill: tooltipArgs.fill,
-                    element: target, eventArgs: e
-                };
-                this.maps.trigger(tooltipRender, blazorArgs, (args) => {
-                    if (!blazorArgs.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.cancel) {
-                            this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tootipOption.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.location,
-                                palette: [markerFill],
-                                areaBounds: this.maps.mapAreaRect,
-                                textStyle: blazorArgs.textStyle,
-                                availableSize: this.maps.availableSize,
-                                fill: blazorArgs.fill
-                            });
-                        }
-                        const 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, (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;
+                    tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
+                        || this.maps.themeStyle.fontFamily;
+                    tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
+                        || this.maps.themeStyle.tooltipTextOpacity;
+                    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, (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) {
-                            let 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) {
+                        let 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,
@@ -12667,15 +12693,6 @@ class 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
  */
@@ -12775,8 +12792,10 @@ class Zoom {
             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]);
@@ -12790,7 +12809,7 @@ class Zoom {
                 if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                     document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                 }
-            }, 250);
+            }, animationDuration);
         }
         this.maps.zoomNotApplied = false;
     }
@@ -12799,14 +12818,14 @@ class Zoom {
         let 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 }
             };
@@ -12964,11 +12983,13 @@ class Zoom {
      */
     animateTransform(element, animate$$1, x, y, scale) {
         const duration = this.currentLayer.animationDuration;
-        if (!animate$$1 || duration === 0) {
+        if (!animate$$1 || duration === 0 || this.maps.isTileMap) {
             element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             return;
         }
-        zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        if (!this.maps.isTileMap) {
+            zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        }
     }
     applyTransform(animate$$1) {
         let layerIndex;
@@ -13011,16 +13032,18 @@ class Zoom {
                             }
                         }
                         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];
+                            let markerAnimation;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 for (let k = 0; k < currentEle.childElementCount; k++) {
                                     this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate$$1);
                                     const layerIndex = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     const dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     const markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0;
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     const markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (let x = 0; x < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x++) {
@@ -13031,9 +13054,17 @@ class Zoom {
                                             this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if (!this.maps.isTileMap && this.currentLayer.animationDuration > 0) {
-                                        markerStyle = 'visibility:hidden';
-                                        currentEle.setAttribute('style', markerStyle);
+                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (this.maps.isTileMap) {
+                                            const groupElement = document.querySelector('.GroupElement');
+                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
+                                                groupElement.style.display = 'none';
+                                            }
+                                        }
+                                        else {
+                                            markerStyle = 'visibility:hidden';
+                                            currentEle.setAttribute('style', markerStyle);
+                                        }
                                     }
                                 }
                                 if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
@@ -13130,10 +13161,9 @@ class Zoom {
                     }
                 }
                 this.maps.arrangeTemplate();
-                const blazor = this.maps.isBlazor ? this.maps.blazorTemplates() : null;
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate$$1 || this.currentLayer.animationDuration === 0) {
+                if (!animate$$1 || this.currentLayer.animationDuration === 0 || this.maps.isTileMap) {
                     this.processTemplate(x, y, scale, this.maps);
                 }
             }
@@ -13183,18 +13213,6 @@ class Zoom {
                 };
                 eventArgs = markerShapeChoose(eventArgs, data);
                 eventArgs = markerColorChoose(eventArgs, data);
-                if (this.maps.isBlazor) {
-                    const { maps, marker: marker$$1 } = eventArgs, blazorEventArgs = __rest$6(eventArgs, ["maps", "marker"]);
-                    eventArgs = blazorEventArgs;
-                    const latitudeValue = 'Latitude';
-                    const 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, (MarkerArgs) => {
                     if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
                         eventArgs = markerShapeChoose(eventArgs, data);
@@ -13208,22 +13226,6 @@ class Zoom {
                     const 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
-                        const data1 = {};
-                        let j = 0;
-                        const text = [];
-                        for (let 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'];
-                    }
                     const offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                         const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -13278,7 +13280,6 @@ class Zoom {
      */
     processTemplate(x, y, scale, maps) {
         for (let i = 0; i < this.templateCount; i++) {
-            this.currentLayer = maps.layersCollection[i];
             const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             const markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
                 i + '_Markers_Template_Group');
@@ -13442,28 +13443,6 @@ class Zoom {
         const layer = this.maps.layersCollection[layerIndex];
         const 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
-                const data1 = {};
-                let j = 0;
-                const text = [];
-                for (let 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'];
-            }
             const 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']) :
@@ -13501,9 +13480,20 @@ class Zoom {
             }
             else {
                 if (type === 'Template') {
-                    const elementOffset = element.getBoundingClientRect();
-                    element.style.left = ((location.x + x) * scale) + marker$$1.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                    element.style.top = ((location.y + y) * scale) + marker$$1.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                    if (duration > 0) {
+                        location.x = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location.x)) * scale);
+                        location.y = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location.y)) * scale);
+                        const layerOffset = getElementByID(this.maps.element.id + '_Layer_Collections').getBoundingClientRect();
+                        const elementOffset = element.parentElement.getBoundingClientRect();
+                        element.style.left = (((location.x) + (layerOffset.left - elementOffset.left)) + marker$$1.offset.x) + 'px';
+                        element.style.top = (((location.y) + (layerOffset.top - elementOffset.top)) + marker$$1.offset.y) + 'px';
+                        element.style.transform = 'translate(-50%, -50%)';
+                    }
+                    else {
+                        const elementOffset = element.getBoundingClientRect();
+                        element.style.left = ((location.x + x) * scale) + marker$$1.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
+                        element.style.top = ((location.y + y) * scale) + marker$$1.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                    }
                 }
                 else {
                     location.x = (((location.x + x) * scale) + marker$$1.offset.x);
@@ -13518,6 +13508,20 @@ class Zoom {
             }
         }
     }
+    markerLineAnimation(map) {
+        if (map.isTileMap) {
+            for (let i = 0; i < map.layersCollection.length; i++) {
+                const markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                const lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                if (!isNullOrUndefined(markerTemplateElement)) {
+                    markerTemplateElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(lineElement)) {
+                    lineElement.style.visibility = 'hidden';
+                }
+            }
+        }
+    }
     panning(direction, xDifference, yDifference, mouseLocation) {
         const map = this.maps;
         let panArgs;
@@ -13547,7 +13551,7 @@ class Zoom {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const location = 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['latitude'], longitude: location['longitude']
             };
@@ -13584,7 +13588,7 @@ class Zoom {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const location = 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['latitude'], longitude: location['longitude']
@@ -13649,41 +13653,45 @@ class Zoom {
             let tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
             map.scale = Math.pow(2, tileZoomFactor - 1);
             map.tileZoomLevel = tileZoomFactor;
-            map.zoomSettings.zoomFactor = zoomFactor;
-            const position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
-            this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
-            if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
-            }
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            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 (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
-            }
-            if (document.querySelector('.GroupElement')) {
-                document.querySelector('.GroupElement').style.display = 'none';
-            }
-            map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-            const element1 = document.getElementById(this.maps.element.id + '_tiles');
-            setTimeout(() => {
-                this.applyTransform(true);
+            if (map.previousScale !== map.scale || map.isReset) {
+                map.zoomSettings.zoomFactor = zoomFactor;
+                const position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
+                this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
+                if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                }
+                this.triggerZoomEvent(prevTilePoint, prevLevel, type);
+                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 (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';
                 }
-            }, 250);
+                if (document.querySelector('.GroupElement')) {
+                    document.querySelector('.GroupElement').style.display = 'none';
+                }
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                const animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(() => {
+                    this.applyTransform(true);
+                    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;
         }
-        this.maps.zoomNotApplied = false;
     }
     createZoomingToolbars() {
         const map = this.maps;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
-            opacity: 0.3
+            opacity: map.theme.toLowerCase() === 'fluentuidark' ? 0.6 : 0.3
         });
         const kitHeight = 16;
         const kitWidth = 16;
@@ -14086,14 +14094,14 @@ class Zoom {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                         }
                     }
                 }
             }
             else {
-                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '0.3');
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                 if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');
@@ -14546,7 +14554,7 @@ class PdfExport {
             const exportElement = this.control.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             const 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)');
             }