@syncfusion/ej2-maps 19.3.46 → 19.4.47

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

@@ -59,13 +59,15 @@ function calculateSize(maps) {
     var containerHeight = maps.element.clientHeight;
     var containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
     var containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    var 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.
@@ -75,7 +77,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,
@@ -857,17 +859,19 @@ function markerShapeChoose(eventArgs, data) {
         var 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 {
         var shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = shapes;
-        var shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ? ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.imageUrlValuePath)).toString() : eventArgs.imageUrl) : eventArgs.imageUrl;
+        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
+        var 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;
@@ -1245,6 +1249,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
@@ -1426,7 +1431,7 @@ function calculateShapes(maps, shape, options, size, location, markerEle) {
     var 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
@@ -1584,9 +1589,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) {
     var width = size.width;
     var height = size.height;
+    var 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' +
@@ -1595,9 +1601,15 @@ function drawBalloon(maps, options, size, location, element) {
     var x = size.width / 30;
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    var g = maps.renderer.createGroup({ id: options.id });
-    appendShape(balloon, g);
-    return appendShape(g, element);
+    if (type === 'Marker') {
+        var g = maps.renderer.createGroup({ id: options.id });
+        appendShape(balloon, g);
+        pathElement = appendShape(g, element);
+    }
+    else {
+        pathElement = balloon;
+    }
+    return pathElement;
 }
 /**
  * Internal rendering of Pattern
@@ -1739,6 +1751,7 @@ 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
@@ -1957,9 +1970,9 @@ function getTranslate(mapObject, layer, animate) {
         mapObject.mapScaleValue = scaleFactor = zoomFactorValue = mapObject.scaleOfGivenLocation;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var min = mapObject.baseMapRectBounds['min'];
+    var min = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['min'] : null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var max = mapObject.baseMapRectBounds['max'];
+    var max = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['max'] : null;
     var zoomFactor = animate ? 1 : mapObject.mapScaleValue;
     if (isNullOrUndefined(mapObject.currentShapeDataLength)) {
         mapObject.currentShapeDataLength = !isNullOrUndefined(layer.shapeData['features'])
@@ -1969,111 +1982,113 @@ function getTranslate(mapObject, layer, animate) {
     var availSize = mapObject.availableSize;
     var x;
     var y;
-    var mapWidth = Math.abs(max['x'] - min['x']);
-    var mapHeight = Math.abs(min['y'] - max['y']);
-    var 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) {
-        var leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
-        var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
-        var 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)) {
+        var mapWidth = Math.abs(max['x'] - min['x']);
+        var mapHeight = Math.abs(min['y'] - max['y']);
+        var 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) {
+            var leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
+            var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
+            var 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;
-            var 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;
+                var 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') {
-                    var 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) {
-                    var cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                    var cmapWidth = mapWidth;
-                    cmapWidth *= cscaleFactor;
-                    var cmapHeight = mapHeight;
-                    cmapHeight *= cscaleFactor;
-                    var x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
-                    var y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
-                    var xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
-                    var ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
-                    var actxdiff = xdiff * (mapObject.availableSize.width);
-                    var 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') {
+                        var 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) {
+                        var cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                        var cmapWidth = mapWidth;
+                        cmapWidth *= cscaleFactor;
+                        var cmapHeight = mapHeight;
+                        cmapHeight *= cscaleFactor;
+                        var x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
+                        var y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
+                        var xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
+                        var ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
+                        var actxdiff = xdiff * (mapObject.availableSize.width);
+                        var 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;
@@ -2510,6 +2525,12 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
         delay: delay,
         progress: function (args) {
             if (args.timeStamp > args.delay) {
+                if (maps.isTileMap && height === 0) {
+                    var 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 + ')');
@@ -2709,6 +2730,8 @@ function renderLegendShape(location, size, shape, options, url) {
     var shapeY = location.y;
     var x = location.x + (-shapeWidth / 2);
     var 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':
@@ -2720,6 +2743,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)) + ' ' +
@@ -2844,6 +2872,7 @@ function changeBorderWidth(element, index, scale, maps) {
             var value = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
+            var borderWidth = maps.layersCollection[index].shapeSettings.border.width;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2853,14 +2882,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());
+            }
         }
     }
 }
@@ -3224,15 +3256,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 = {
@@ -3381,6 +3413,14 @@ function getShapeColor(theme) {
             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'];
@@ -3526,6 +3566,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#363F4C',
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -3543,6 +3584,7 @@ function getThemeStyle(theme) {
                 tooltipFontColor: '#000000',
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
@@ -3664,6 +3706,52 @@ function getThemeStyle(theme) {
                 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',
@@ -3677,6 +3765,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -4318,6 +4407,9 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
     function LegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate$1([
+        Property(false)
+    ], LegendSettings.prototype, "useMarkerShape", void 0);
     __decorate$1([
         Property(false)
     ], LegendSettings.prototype, "toggleVisibility", void 0);
@@ -4370,7 +4462,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __decorate$1([
-        Complex({}, Font)
+        Complex(Theme.legendTitleFont, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
     __decorate$1([
         Property('Bottom')
@@ -4468,7 +4560,7 @@ var ShapeSettings = /** @__PURE__ @class */ (function (_super) {
         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('')
@@ -4761,15 +4853,9 @@ var Marker = /** @__PURE__ @class */ (function () {
                     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, function (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);
                     var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
@@ -5763,7 +5849,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         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);
             var padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
@@ -5845,6 +5931,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             proxy_1.mapObject['bingMap'] = bing_1;
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _this.mapObject.arrangeTemplate();
+                            if (_this.mapObject.zoomModule && (_this.mapObject.previousScale !== _this.mapObject.scale)) {
+                                _this.mapObject.zoomModule.applyTransform(true);
+                            }
                         };
                         ajax.send();
                     }
@@ -5923,9 +6012,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 var data = geometryData['geometry'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var properties = geometryData['properties'];
-                if (type !== 'LineString') {
-                    _this.generatePoints(type, coords, data, properties);
-                }
+                _this.generatePoints(type, coords, data, properties);
             }
         });
         this.currentLayer.rectBounds = this.rectBounds;
@@ -5953,11 +6040,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var currentShapeData = this_1.currentLayer.layerData[i];
                 var pathOptions;
-                var polyLineOptions;
                 var circleOptions;
                 var groupElement;
                 var path = '';
-                var points = '';
                 var fill = (shapeSettings.autofill) ? colors[i % colors.length] :
                     (shapeSettings.fill || this_1.mapObject.themeStyle.shapeFill);
                 if (shapeSettings.colorValuePath !== null && !isNullOrUndefined(currentShapeData['property'])) {
@@ -6021,7 +6106,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         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;
                         }
                     }
@@ -6075,17 +6160,21 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             }
                             break;
                         case 'LineString':
+                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             currentShapeData.map(function (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
                             var pointData = currentShapeData['point'];
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], shapeSettings.circleRadius, null);
+                            var 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':
@@ -6107,6 +6196,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         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 (var j = 0; j < _this.mapObject.toggledShapeElementId.length; j++) {
@@ -6325,11 +6417,14 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
+                var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
+                    _this.calculateBox(point, extraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6340,6 +6435,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 break;
             case 'point': {
                 var arrayCollections_1 = false;
+                var extraSpace_2 = (!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(function (points, index) {
                     if (Object.prototype.toString.call(points) === '[object Array]') {
@@ -6356,6 +6453,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     latitude = coordinates[1];
                     longitude = coordinates[0];
                     var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace_2);
                     this.currentLayer.layerData.push({
                         point: point, type: type, lat: latitude, lng: longitude, property: properties
                     });
@@ -6369,6 +6467,17 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 break;
         }
     };
+    LayerPanel.prototype.calculateBox = function (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);
+        }
+    };
     LayerPanel.prototype.calculateFactor = function (layer) {
         var horFactor;
         var verFactor = 1;
@@ -6477,6 +6586,15 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             _this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'linestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map(function (point, index) {
+                            _this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                        });
+                        break;
+                    case 'point':
+                        _this.calculateRectBox(coordinates, 'point');
+                        break;
                 }
             }
         });
@@ -6513,20 +6631,33 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         return newData;
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayerPanel.prototype.calculateRectBox = function (coordinates) {
+    LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
         var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(coordinates, function (currentCoords) {
-            if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
-                _this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+        if (type !== 'LineString' && type !== 'point') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(coordinates, function (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]);
             }
-        });
+        }
     };
     LayerPanel.prototype.generateTiles = function (zoomLevel, tileTranslatePoint, zoomType, bing, position) {
         var userLang = this.mapObject.locale;
@@ -6615,16 +6746,18 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 }
             }
         }
-        this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        }
     };
     LayerPanel.prototype.arrangeTiles = function (type, x, y) {
         var _this = this;
         var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         var element1 = document.getElementById(this.mapObject.element.id + '_tiles');
         var 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;
@@ -6639,7 +6772,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 }
                 if (element1) {
                     element1.style.zIndex = '0';
-                    element1.style.visibility = 'hidden';
                 }
                 var animateElement;
                 if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
@@ -6701,35 +6833,23 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
      * @returns {void}
      */
     LayerPanel.prototype.tileAnimation = function (zoomType, translateX, translateY) {
-        var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
-        var element1 = document.getElementById('animated_tiles');
-        var ele = document.getElementById(this.mapObject.element.id + '_tiles');
+        var tileParent = document.getElementById(this.mapObject.element.id + '_tile_parent');
+        var animatedTiles = document.getElementById(this.mapObject.element.id + '_animated_tiles');
+        var tileElement = document.getElementById(this.mapObject.element.id + '_tiles');
         var 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]);
+        if (zoomType.indexOf('ZoomOut') === 0 || zoomType === 'Reset') {
+            tileElement.style.zIndex = '1';
+            tileParent.style.zIndex = '0';
+            while (tileElement.childElementCount >= 1) {
+                tileElement.removeChild(tileElement.children[0]);
             }
             translateX = 0;
-            translateY = 128 - 23;
-            scaleValue = '0.5';
+            translateY = document.getElementById(this.mapObject.element.id + '_tile_parent').getClientRects()[0].height / 4;
+            scaleValue = zoomType.indexOf('ZoomOut') === 0 ? '0.5' : '0.2';
         }
-        else if (zoomType === 'Reset') {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            while (!(ele.childElementCount === 1) && !(ele.childElementCount === 0)) {
-                ele.removeChild(ele.children[1]);
-            }
-            element1 = ele.children[0];
-            translateX = 0;
-            translateY = 0;
-            scaleValue = '1';
-        }
-        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 + ')';
         }
     };
     /**
@@ -7345,7 +7465,15 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        var position = this.getExtraPosition();
         for (var i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                var 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) {
                 var checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -8171,26 +8299,28 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        this.isResize = true;
+        this.isResize = this.isReset = true;
         var args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
+            currentSize: calculateSize(this),
             maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(function () {
-                _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(function () {
+                    _this.unWireEVents();
+                    _this.createSVG();
+                    _this.refreshing = true;
+                    _this.wireEVents();
+                    _this.render();
+                }, 500);
+            }
         }
         return false;
     };
@@ -8778,6 +8908,22 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         });
         return isVisible;
     };
+    /**
+     * To find space between the secondary element and svg element.
+     * @private
+     */
+    Maps.prototype.getExtraPosition = function () {
+        var top;
+        var left;
+        var svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            var svgClientRect = svgElement.getClientRects()[0];
+            var 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
      */
@@ -9154,6 +9300,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To render bubble
+     *
+     * @private
      */
     Bubble.prototype.renderBubble = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -9199,7 +9347,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             var 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], []));
@@ -9330,6 +9478,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
+     *
+     * @private
      */
     Bubble.prototype.bubbleClick = function (e) {
         var target = e.target.id;
@@ -9373,6 +9523,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble move event
+     *
+     * @private
      */
     Bubble.prototype.bubbleMove = function (e) {
         var target = e.target.id;
@@ -9674,6 +9826,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var textType = typeof text === 'number' ? text.toString() : text;
                         trimmedLable = textTrim(width, textType, style);
                         elementSize = measureText(trimmedLable, style);
@@ -10395,6 +10548,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
         var textOptions;
         var render = map.renderer;
+        var 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));
@@ -10419,21 +10573,35 @@ var Legend = /** @__PURE__ @class */ (function () {
                 var textLocation = collection['Text'];
                 var imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 var renderOptions_1 = 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 :
+                var 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_1));
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    var legendShapeData = this.legendCollection[collection['idIndex']].data[0];
+                    var 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_1, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions_1));
+                }
                 var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
-                    var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legend.textStyle, legendRectSize);
+                    var 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)) {
@@ -11114,7 +11282,10 @@ var Legend = /** @__PURE__ @class */ (function () {
         var map = this.maps;
         var legend = map.legendSettings;
         var legendTitle = legend.title.text;
-        var textStyle = legend.titleStyle;
+        var 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
+        };
         var textOptions;
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -11133,6 +11304,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         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);
         }
@@ -11239,21 +11411,25 @@ var Legend = /** @__PURE__ @class */ (function () {
                     }
                     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
     Legend.prototype.getMarkerLegendData = function (layerIndex, text, legendFill) {
         var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var legendData = [];
         this.maps.layers[layerIndex].markerSettings.map(function (markerSettings, markerIndex) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                 var marker$$1 = _this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker$$1.legendText] || text === '') && legendFill == data[marker$$1.colorValuePath]) {
+                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 });
                 }
@@ -11615,7 +11791,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                             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];
                             }
@@ -11624,7 +11800,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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());
@@ -11639,6 +11815,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 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');
                                 }
@@ -11653,6 +11832,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 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');
                                 }
@@ -11687,7 +11869,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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());
@@ -11717,7 +11899,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 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) {
@@ -11737,7 +11919,7 @@ var Legend = /** @__PURE__ @class */ (function () {
             targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
             targetEle.id.indexOf('_Text') === -1) {
             var LegendInteractive = void 0;
-            var legendIndex = parseFloat(targetEle.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            var legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var mapdata = void 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11758,7 +11940,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 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());
@@ -11822,7 +12004,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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());
@@ -11849,7 +12031,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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());
@@ -12125,14 +12307,14 @@ var Highlight = /** @__PURE__ @class */ (function () {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         var 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
         };
         var 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,
@@ -12315,15 +12497,16 @@ var Selection = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Selection.prototype.selectMap = function (targetElement, shapeData, data) {
         var _this = this;
+        var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
         var selectionsettings = this.selectionsettings;
         var 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
         };
         var 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,
@@ -12346,9 +12529,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                     }
                     if (targetElement.id.indexOf('NavigationIndex') > -1) {
                         var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
-                        var layerIndex = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                        targetElement.setAttribute('stroke-width', _this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
-                        targetElement.setAttribute('stroke', _this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                        var layerIndex_1 = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                        targetElement.setAttribute('stroke-width', _this.maps.layers[layerIndex_1].navigationLineSettings[index].width.toString());
+                        targetElement.setAttribute('stroke', _this.maps.layers[layerIndex_1].navigationLineSettings[index].color);
                     }
                 }
                 else {
@@ -12374,9 +12557,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                         }
                         if (ele.id.indexOf('NavigationIndex') > -1) {
                             var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
-                            var layerIndex = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                            ele.setAttribute('stroke-width', _this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
-                            ele.setAttribute('stroke', _this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                            var layerIndex_2 = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                            ele.setAttribute('stroke-width', _this.maps.layers[layerIndex_2].navigationLineSettings[index].width.toString());
+                            ele.setAttribute('stroke', _this.maps.layers[layerIndex_2].navigationLineSettings[index].color);
                         }
                     }
                     if (!getElement(_this.selectionType + 'selectionMap')) {
@@ -12517,8 +12700,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         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;
                 var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
                     return;
@@ -12635,9 +12816,13 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 option.template = option.template[Object.keys(option.template)[0]];
             }
             templateData = this.setTooltipContent(option, templateData);
+            var 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
+            };
             var tooltipOption = {
                 location: location, text: tooltipContent, data: templateData,
-                textStyle: option.textStyle,
+                textStyle: tooltipTextStyle,
                 template: option.template
             };
             tooltipArgs = {
@@ -12653,6 +12838,10 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                     _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,
@@ -12935,8 +13124,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
             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);
             var element1 = document.getElementById(this.maps.element.id + '_tiles');
+            var animationDuration = this.maps.layersCollection[0].animationDuration;
             setTimeout(function () {
                 // if (type === 'ZoomOut') {
                 //     element1.removeChild(element1.children[element1.childElementCount - 1]);
@@ -12950,7 +13141,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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;
     };
@@ -13124,11 +13315,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
      */
     Zoom.prototype.animateTransform = function (element, animate$$1, x, y, scale) {
         var 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);
+        }
     };
     Zoom.prototype.applyTransform = function (animate$$1) {
         var layerIndex;
@@ -13175,12 +13368,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
+                            var markerAnimation = void 0;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 for (var k = 0; k < currentEle.childElementCount; k++) {
                                     this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate$$1);
                                     var layerIndex_1 = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     var dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var 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
                                     var markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (var x_1 = 0; x_1 < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
@@ -13191,9 +13386,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                             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) {
+                                            var 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) {
@@ -13292,7 +13495,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 this.maps.arrangeTemplate();
             }
             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);
                 }
             }
@@ -13411,7 +13614,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
      */
     Zoom.prototype.processTemplate = function (x, y, scale, maps) {
         for (var i = 0; i < this.templateCount; i++) {
-            this.currentLayer = maps.layersCollection[i];
             var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             var markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
                 i + '_Markers_Template_Group');
@@ -13642,6 +13844,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    Zoom.prototype.markerLineAnimation = function (map) {
+        if (map.isTileMap) {
+            for (var i = 0; i < map.layersCollection.length; i++) {
+                var markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                var lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                if (!isNullOrUndefined(markerTemplateElement)) {
+                    markerTemplateElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(lineElement)) {
+                    lineElement.style.visibility = 'hidden';
+                }
+            }
+        }
+    };
     Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
         var map = this.maps;
         var panArgs;
@@ -13774,41 +13990,45 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
             map.scale = Math.pow(2, tileZoomFactor - 1);
             map.tileZoomLevel = tileZoomFactor;
-            map.zoomSettings.zoomFactor = zoomFactor;
-            var 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 (map.previousScale !== map.scale || map.isReset) {
+                map.zoomSettings.zoomFactor = zoomFactor;
+                var 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';
+                }
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                var element1 = document.getElementById(this.maps.element.id + '_tiles');
+                var animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(function () {
+                    _this.applyTransform(true);
+                    if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    }
+                }, animationDuration);
             }
-            if (document.querySelector('.GroupElement')) {
-                document.querySelector('.GroupElement').style.display = 'none';
-            }
-            map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-            var element1 = document.getElementById(this.maps.element.id + '_tiles');
-            setTimeout(function () {
-                _this.applyTransform(true);
-                if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
-                }
-            }, 250);
+            this.maps.zoomNotApplied = false;
         }
-        this.maps.zoomNotApplied = false;
     };
     Zoom.prototype.createZoomingToolbars = function () {
         var 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
         });
         var kitHeight = 16;
         var kitWidth = 16;
@@ -14066,8 +14286,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 x = (size.width - toolBarSize.width) - padding;
                 break;
         }
-        element.style.left = x + 'px';
-        element.style.top = y + 'px';
+        var extraPosition = map.getExtraPosition();
+        element.style.left = x + extraPosition.x + 'px';
+        element.style.top = y + extraPosition.y + 'px';
         var color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         var css = ' .e-maps-toolbar:hover > circle { stroke:' + color + '; } .e-maps-toolbar:hover > path { fill: ' + color + ' ;  stroke: ' + color + '; }' +
             '.e-maps-toolbar:hover { cursor: pointer; } .e-maps-cursor-disable:hover { cursor: not-allowed; } .e-maps-panning:hover { cursor: pointer; } ' +
@@ -14211,14 +14432,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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');