@syncfusion/ej2-maps 19.3.53 → 19.4.48

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

@@ -45,13 +45,15 @@ function calculateSize(maps) {
     const containerHeight = maps.element.clientHeight;
     const containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
     const containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    let availableSize = new Size(0, 0);
     if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        maps.availableSize = new Size(0, 0);
+        availableSize = new Size(0, 0);
     }
     else {
-        maps.availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
+        availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
             Math.min(window.innerWidth, window.innerHeight) : 450));
     }
+    return availableSize;
 }
 /**
  * Method to create svg for maps.
@@ -61,7 +63,7 @@ function calculateSize(maps) {
  */
 function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
-    calculateSize(maps);
+    maps.availableSize = calculateSize(maps);
     maps.svgObject = maps.renderer.createSvg({
         id: maps.element.id + '_svg',
         width: maps.availableSize.width,
@@ -804,17 +806,19 @@ function markerShapeChoose(eventArgs, data) {
         const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = shape;
+        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
-            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath) &&
-                !isNullOrUndefined(data[eventArgs.imageUrlValuePath])) ?
-                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : data[eventArgs.imageUrlValuePath]) : eventArgs.imageUrl;
+            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
+                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
+                    data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
         }
     }
     else {
         const shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = shapes;
-        const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ? ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.imageUrlValuePath)).toString() : eventArgs.imageUrl) : eventArgs.imageUrl;
+        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
+        const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
+            ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
+                data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
         eventArgs.imageUrl = shapeImage;
     }
     return eventArgs;
@@ -1192,6 +1196,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  * @param {number} markerIndex - Specifies the marker index
  * @param {HTMLElement} markerTemplate - Specifies the marker template element
  * @param {Point} location - Specifies the location
+ * @param {Point} transPoint - Specifies the translate point.
  * @param {number} scale - Specifies the scale value
  * @param {Point} offset - Specifies the offset value
  * @param {Maps} maps - Specifies the instance of the maps
@@ -1373,7 +1378,7 @@ function calculateShapes(maps, shape, options, size, location, markerEle) {
     let tempGroup;
     switch (shape) {
         case 'Balloon':
-            tempGroup = drawBalloon(maps, options, size, location, markerEle);
+            tempGroup = drawBalloon(maps, options, size, location, 'Marker', markerEle);
             break;
         case 'Cross':
             options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height
@@ -1531,9 +1536,10 @@ function drawStar(maps, options, size, location, element) {
  * @returns {Element} - Returns the element
  * @private
  */
-function drawBalloon(maps, options, size, location, element) {
+function drawBalloon(maps, options, size, location, type, element) {
     const width = size.width;
     const height = size.height;
+    let pathElement;
     location.x -= width / 2;
     location.y -= height;
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
@@ -1542,9 +1548,15 @@ function drawBalloon(maps, options, size, location, element) {
     const x = size.width / 30;
     const y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    const g = maps.renderer.createGroup({ id: options.id });
-    appendShape(balloon, g);
-    return appendShape(g, element);
+    if (type === 'Marker') {
+        const g = maps.renderer.createGroup({ id: options.id });
+        appendShape(balloon, g);
+        pathElement = appendShape(g, element);
+    }
+    else {
+        pathElement = balloon;
+    }
+    return pathElement;
 }
 /**
  * Internal rendering of Pattern
@@ -1683,6 +1695,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
@@ -1901,9 +1914,9 @@ function getTranslate(mapObject, layer, animate) {
         mapObject.mapScaleValue = scaleFactor = zoomFactorValue = mapObject.scaleOfGivenLocation;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const min = mapObject.baseMapRectBounds['min'];
+    const min = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['min'] : null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const max = mapObject.baseMapRectBounds['max'];
+    const max = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['max'] : null;
     const zoomFactor = animate ? 1 : mapObject.mapScaleValue;
     if (isNullOrUndefined(mapObject.currentShapeDataLength)) {
         mapObject.currentShapeDataLength = !isNullOrUndefined(layer.shapeData['features'])
@@ -1913,111 +1926,113 @@ function getTranslate(mapObject, layer, animate) {
     const availSize = mapObject.availableSize;
     let x;
     let y;
-    let mapWidth = Math.abs(max['x'] - min['x']);
-    let mapHeight = Math.abs(min['y'] - max['y']);
-    const factor = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
-    center = mapObject.zoomSettings.shouldZoomInitially
-        && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
-        mapObject.centerPosition;
-    if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
-        const leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
-        const topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
-        const point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
-            convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-        if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-            x = -point.x + leftPosition;
-            y = -point.y + topPosition;
-            scaleFactor = zoomFactor;
-        }
-        else {
-            if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
+    if (!isNullOrUndefined(min) && !isNullOrUndefined(max)) {
+        let mapWidth = Math.abs(max['x'] - min['x']);
+        let mapHeight = Math.abs(min['y'] - max['y']);
+        const factor = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
+        center = mapObject.zoomSettings.shouldZoomInitially
+            && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
+            mapObject.centerPosition;
+        if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
+            const leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
+            const topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
+            const point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
+                convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
+                scaleFactor = zoomFactor;
             }
             else {
-                if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
+                if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
                     x = -point.x + leftPosition;
                     y = -point.y + topPosition;
-                    scaleFactor = zoomFactor;
                 }
                 else {
-                    x = mapObject.zoomTranslatePoint.x;
-                    y = mapObject.zoomTranslatePoint.y;
+                    if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
+                        x = -point.x + leftPosition;
+                        y = -point.y + topPosition;
+                        scaleFactor = zoomFactor;
+                    }
+                    else {
+                        x = mapObject.zoomTranslatePoint.x;
+                        y = mapObject.zoomTranslatePoint.y;
+                    }
                 }
+                scaleFactor = mapObject.mapScaleValue;
             }
-            scaleFactor = mapObject.mapScaleValue;
-        }
-    }
-    else {
-        if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-            mapWidth *= scaleFactor;
-            mapHeight *= scaleFactor;
-            const widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
-            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
-            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-            mapObject.previousTranslate = new Point(x, y);
         }
         else {
-            if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                mapHeight *= scaleFactor;
                 mapWidth *= scaleFactor;
+                mapHeight *= scaleFactor;
+                const widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
+                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
                 y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
+                mapObject.previousTranslate = new Point(x, y);
             }
             else {
-                scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
-                mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
-                if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
-                    ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
-                    const scale = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
-                    mapHeight *= scale;
-                    mapWidth *= scale;
-                    y = size.y + ((-(min['y'])) + ((size.height / 2)
-                        - (mapHeight / 2)));
-                    scaleFactor = scale;
-                    x = size.x + ((-(min['x']))
-                        + ((size.width / 2) - (mapWidth / 2)));
-                }
-                else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
-                    const cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                    let cmapWidth = mapWidth;
-                    cmapWidth *= cscaleFactor;
-                    let cmapHeight = mapHeight;
-                    cmapHeight *= cscaleFactor;
-                    const x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
-                    const y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
-                    const xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
-                    const ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
-                    const actxdiff = xdiff * (mapObject.availableSize.width);
-                    const actydiff = ydiff * (mapObject.availableSize.height);
-                    x = x1 + actxdiff;
-                    y = y1 + actydiff;
-                    mapObject.previousTranslate = new Point(x1, y1);
-                    mapObject.zoomTranslatePoint.x = x;
-                    mapObject.zoomTranslatePoint.y = y;
+                if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
+                    scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                    mapHeight *= scaleFactor;
+                    mapWidth *= scaleFactor;
+                    y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                    x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                 }
                 else {
-                    if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
-                        scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                        mapWidth *= scaleFactor;
-                        x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
-                        mapHeight *= scaleFactor;
-                        y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                    scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
+                    mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
+                    if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
+                        ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
+                        const scale = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
+                        mapHeight *= scale;
+                        mapWidth *= scale;
+                        y = size.y + ((-(min['y'])) + ((size.height / 2)
+                            - (mapHeight / 2)));
+                        scaleFactor = scale;
+                        x = size.x + ((-(min['x']))
+                            + ((size.width / 2) - (mapWidth / 2)));
+                    }
+                    else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
+                        const cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                        let cmapWidth = mapWidth;
+                        cmapWidth *= cscaleFactor;
+                        let cmapHeight = mapHeight;
+                        cmapHeight *= cscaleFactor;
+                        const x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
+                        const y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
+                        const xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
+                        const ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
+                        const actxdiff = xdiff * (mapObject.availableSize.width);
+                        const actydiff = ydiff * (mapObject.availableSize.height);
+                        x = x1 + actxdiff;
+                        y = y1 + actydiff;
+                        mapObject.previousTranslate = new Point(x1, y1);
+                        mapObject.zoomTranslatePoint.x = x;
+                        mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        x = mapObject.zoomTranslatePoint.x;
-                        y = mapObject.zoomTranslatePoint.y;
-                        scaleFactor = mapObject.scale;
+                        if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
+                            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                            mapWidth *= scaleFactor;
+                            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
+                            mapHeight *= scaleFactor;
+                            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                        }
+                        else {
+                            x = mapObject.zoomTranslatePoint.x;
+                            y = mapObject.zoomTranslatePoint.y;
+                            scaleFactor = mapObject.scale;
+                        }
                     }
                 }
             }
         }
-    }
-    if (!isNullOrUndefined(mapObject.translatePoint)) {
-        x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
-        y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+        if (!isNullOrUndefined(mapObject.translatePoint)) {
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+        }
     }
     scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
     mapObject.widthBeforeRefresh = mapObject.availableSize.width;
@@ -2453,6 +2468,12 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
         delay: delay,
         progress: (args) => {
             if (args.timeStamp > args.delay) {
+                if (maps.isTileMap && height === 0) {
+                    const layerGroupElement = document.querySelector('.GroupElement');
+                    if (!isNullOrUndefined(layerGroupElement)) {
+                        layerGroupElement.style.display = 'block';
+                    }
+                }
                 height = ((args.timeStamp - args.delay) / args.duration);
                 element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +
                     ' ) scale(' + height + ')');
@@ -2652,6 +2673,8 @@ function renderLegendShape(location, size, shape, options, url) {
     const shapeY = location.y;
     const x = location.x + (-shapeWidth / 2);
     const y = location.y + (-shapeHeight / 2);
+    options['stroke'] = (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross') ? options['fill'] : options['stroke'];
+    options['stroke-width'] = (options['stroke-width'] === 0 && (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross')) ? 1 : options['stroke-width'];
     switch (shape) {
         case 'Circle':
         case 'Bubble':
@@ -2663,6 +2686,11 @@ function renderLegendShape(location, size, shape, options, url) {
                 + (shapeY + (-shapeHeight / 2));
             merge(options, { 'd': renderPath });
             break;
+        case 'HorizontalLine':
+            renderPath = 'M' + ' ' + shapeX + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' '
+                + shapeY;
+            merge(options, { 'd': renderPath });
+            break;
         case 'Diamond':
             renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
                 'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
@@ -2787,6 +2815,7 @@ function changeBorderWidth(element, index, scale, maps) {
             let value = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
+            const borderWidth = maps.layersCollection[index].shapeSettings.border.width;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2796,14 +2825,17 @@ function changeBorderWidth(element, index, scale, maps) {
                         currentStroke = maps.layersCollection[index].dataSource[value][borderWidthValue];
                     }
                     else {
-                        currentStroke = (maps.layersCollection[index].shapeSettings.border.width);
+                        currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
                     }
                 }
             }
             else {
-                currentStroke = (maps.layersCollection[index].shapeSettings.border.width);
+                currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
             }
             childNode.setAttribute('stroke-width', (currentStroke / scale).toString());
+            if (element.id.indexOf('_LineString') > -1 && isNullOrUndefined(currentStroke)) {
+                childNode.setAttribute('stroke-width', (1 / scale).toString());
+            }
         }
     }
 }
@@ -3165,15 +3197,15 @@ var Theme;
         fontWeight: 'Regular',
         color: null,
         fontStyle: 'Regular',
-        fontFamily: 'Roboto'
+        fontFamily: null
     };
     /** @private */
     Theme.legendTitleFont = {
-        size: '14px',
-        fontWeight: 'Regular',
+        size: '12px',
+        fontWeight: 'Medium',
         color: null,
-        fontStyle: 'Regular',
-        fontFamily: 'Roboto, Noto, Sans-serif'
+        fontStyle: 'Medium',
+        fontFamily: null
     };
     /** @private */
     Theme.legendLabelFont = {
@@ -3322,6 +3354,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'];
@@ -3467,6 +3507,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#363F4C',
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -3484,6 +3525,7 @@ function getThemeStyle(theme) {
                 tooltipFontColor: '#000000',
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
@@ -3605,6 +3647,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',
@@ -3618,6 +3706,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -4133,6 +4222,9 @@ __decorate$1([
  */
 class LegendSettings extends ChildProperty {
 }
+__decorate$1([
+    Property(false)
+], LegendSettings.prototype, "useMarkerShape", void 0);
 __decorate$1([
     Property(false)
 ], LegendSettings.prototype, "toggleVisibility", void 0);
@@ -4185,7 +4277,7 @@ __decorate$1([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
 __decorate$1([
-    Complex({}, Font)
+    Complex(Theme.legendTitleFont, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
 __decorate$1([
     Property('Bottom')
@@ -4273,7 +4365,7 @@ __decorate$1([
     Property(5)
 ], ShapeSettings.prototype, "circleRadius", void 0);
 __decorate$1([
-    Complex({ width: 0, color: '#000000' }, Border)
+    Complex({ width: null, color: '#000000' }, Border)
 ], ShapeSettings.prototype, "border", void 0);
 __decorate$1([
     Property('')
@@ -4542,15 +4634,9 @@ class Marker {
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
-                eventArgs = markerColorChoose(eventArgs, data);
-                eventArgs = markerShapeChoose(eventArgs, data);
                 this.maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    eventArgs = markerShapeChoose(eventArgs, data);
                     const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
@@ -4770,7 +4856,7 @@ class Marker {
         if (isNullOrUndefined(options)) {
             return;
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: markerClick, data: options.data, maps: this.maps,
             marker: options.marker, target: target, x: e.clientX, y: e.clientY,
             latitude: options.data['latitude'] || options.data['Latitude'],
@@ -5416,7 +5502,8 @@ class LayerPanel {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : areaRect.height
+                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !isNullOrUndefined(this.mapObject.legendModule) &&
+                    this.mapObject.legendModule.totalPages.length > 0 ? this.mapObject.legendModule.legendTotalRect.height : areaRect.height
             }));
         }
         this.layerGroup.appendChild(this.clipRectElement);
@@ -5538,7 +5625,7 @@ class LayerPanel {
         if (this.mapObject.zoomSettings.resetToInitial && this.mapObject.initialCheck && !isNullOrUndefined(panel.mapObject.height)
             && this.mapObject.availableSize.height > 512) {
             this.mapObject.applyZoomReset = true;
-            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512) + 1;
+            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
             const padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             const totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
@@ -5579,7 +5666,7 @@ class LayerPanel {
                 }
             }
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: layerRendering, index: layerIndex,
             layer: layer, maps: this.mapObject, visible: layer.visible
         };
@@ -5619,6 +5706,9 @@ class LayerPanel {
                             proxy.mapObject['bingMap'] = bing;
                             proxy.renderTileLayer(proxy, layer, layerIndex, bing);
                             this.mapObject.arrangeTemplate();
+                            if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
+                                this.mapObject.zoomModule.applyTransform(true);
+                            }
                         };
                         ajax.send();
                     }
@@ -5696,9 +5786,7 @@ class LayerPanel {
                 const data = geometryData['geometry'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const properties = geometryData['properties'];
-                if (type !== 'LineString') {
-                    this.generatePoints(type, coords, data, properties);
-                }
+                this.generatePoints(type, coords, data, properties);
             }
         });
         this.currentLayer.rectBounds = this.rectBounds;
@@ -5726,11 +5814,9 @@ class LayerPanel {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const currentShapeData = this.currentLayer.layerData[i];
                 let pathOptions;
-                let polyLineOptions;
                 let circleOptions;
                 let groupElement;
                 let path = '';
-                let points = '';
                 let fill = (shapeSettings.autofill) ? colors[i % colors.length] :
                     (shapeSettings.fill || this.mapObject.themeStyle.shapeFill);
                 if (shapeSettings.colorValuePath !== null && !isNullOrUndefined(currentShapeData['property'])) {
@@ -5773,7 +5859,7 @@ class LayerPanel {
                 }
                 const opacity = (Object.prototype.toString.call(getShapeColor$$1) === '[object Object]'
                     && !isNullOrUndefined(getShapeColor$$1['opacity'])) ? getShapeColor$$1['opacity'] : shapeSettings.opacity;
-                let eventArgs = {
+                const eventArgs = {
                     cancel: false, name: shapeRendering, index: i,
                     data: this.currentLayer.dataSource ? this.currentLayer.dataSource[k] : null,
                     maps: this.mapObject,
@@ -5794,7 +5880,7 @@ class LayerPanel {
                         if (isNullOrUndefined(shapeSettings.borderColorValuePath)) {
                             this.mapObject.layers[layerIndex].shapeSettings.border.color = eventArgs.border.color;
                         }
-                        else if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
+                        if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
                             this.mapObject.layers[layerIndex].shapeSettings.border.width = eventArgs.border.width;
                         }
                     }
@@ -5848,17 +5934,21 @@ class LayerPanel {
                             }
                             break;
                         case 'LineString':
+                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             currentShapeData.map((lineData) => {
-                                points += lineData['point']['x'] + ' , ' + lineData['point']['y'] + ' ';
+                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
                             });
-                            polyLineOptions = new PolylineOption(shapeID, points, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray);
-                            pathEle = this.mapObject.renderer.drawPolyline(polyLineOptions);
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = this.mapObject.renderer.drawPath(pathOptions);
+                            }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const pointData = currentShapeData['point'];
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], shapeSettings.circleRadius, null);
+                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / this.currentFactor;
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
                             pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                             break;
                         case 'Path':
@@ -5879,7 +5969,10 @@ class LayerPanel {
                         }
                         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
                             (currentShapeData['property'][properties]) : ''));
-                        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 2).toString());
+                        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 3).toString());
+                        if (drawingType === 'LineString') {
+                            pathEle.setAttribute('style', 'outline:none');
+                        }
                         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
                         if (this.mapObject.toggledShapeElementId) {
                             for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
@@ -6088,11 +6181,14 @@ class LayerPanel {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
+                const extraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((points, index) => {
                     latitude = points[1];
                     longitude = points[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6103,6 +6199,8 @@ class LayerPanel {
                 break;
             case 'point': {
                 let arrayCollections = false;
+                const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((points, index) => {
                     if (Object.prototype.toString.call(points) === '[object Array]') {
@@ -6119,6 +6217,7 @@ class LayerPanel {
                     latitude = coordinates[1];
                     longitude = coordinates[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace);
                     this.currentLayer.layerData.push({
                         point: point, type: type, lat: latitude, lng: longitude, property: properties
                     });
@@ -6132,6 +6231,17 @@ class LayerPanel {
                 break;
         }
     }
+    calculateBox(point, extraSpace) {
+        if (isNullOrUndefined(this.rectBounds)) {
+            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+        }
+        else {
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
+        }
+    }
     calculateFactor(layer) {
         let horFactor;
         let verFactor = 1;
@@ -6239,6 +6349,15 @@ class LayerPanel {
                             this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'linestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map((point, index) => {
+                            this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                        });
+                        break;
+                    case 'point':
+                        this.calculateRectBox(coordinates, 'point');
+                        break;
                 }
             }
         });
@@ -6274,19 +6393,32 @@ class LayerPanel {
         return newData;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    calculateRectBox(coordinates) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(coordinates, (currentCoords) => {
-            if (isNullOrUndefined(this.mapObject.baseMapBounds)) {
-                this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+    calculateRectBox(coordinates, type, isFirstItem) {
+        if (type !== 'LineString' && type !== 'point') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(coordinates, (currentCoords) => {
+                if (isNullOrUndefined(this.mapObject.baseMapBounds)) {
+                    this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+                }
+                else {
+                    this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
+                    this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
+                    this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
+                    this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                }
+            });
+        }
+        else {
+            if ((isFirstItem || type === 'point') && isNullOrUndefined(this.mapObject.baseMapBounds)) {
+                this.mapObject.baseMapBounds = new GeoLocation({ min: coordinates[1], max: coordinates[1] }, { min: coordinates[0], max: coordinates[0] });
             }
             else {
-                this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
-                this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
-                this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
-                this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, coordinates[1]);
+                this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, coordinates[1]);
+                this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, coordinates[0]);
+                this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, coordinates[0]);
             }
-        });
+        }
     }
     generateTiles(zoomLevel, tileTranslatePoint, zoomType, bing, position) {
         const userLang = this.mapObject.locale;
@@ -6373,15 +6505,17 @@ class LayerPanel {
                 }
             }
         }
-        this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        }
     }
     arrangeTiles(type, x, y) {
         const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         const element1 = document.getElementById(this.mapObject.element.id + '_tiles');
         let timeOut;
-        if (!isNullOrUndefined(type) && type !== 'Pan' && type !== 'Reset' && type.indexOf('ZoomOut') === -1) {
+        if (!isNullOrUndefined(type) && type !== 'Pan') {
             this.tileAnimation(type, x, y);
-            timeOut = 250;
+            timeOut = this.mapObject.layersCollection[0].animationDuration;
         }
         else {
             timeOut = 0;
@@ -6396,7 +6530,6 @@ class LayerPanel {
                 }
                 if (element1) {
                     element1.style.zIndex = '0';
-                    element1.style.visibility = 'hidden';
                 }
                 let animateElement;
                 if (!document.getElementById(this.mapObject.element.id + '_animated_tiles') && element) {
@@ -6454,35 +6587,23 @@ class LayerPanel {
      * @returns {void}
      */
     tileAnimation(zoomType, translateX, translateY) {
-        const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
-        let element1 = document.getElementById('animated_tiles');
-        const ele = document.getElementById(this.mapObject.element.id + '_tiles');
+        const tileParent = document.getElementById(this.mapObject.element.id + '_tile_parent');
+        const animatedTiles = document.getElementById(this.mapObject.element.id + '_animated_tiles');
+        const tileElement = document.getElementById(this.mapObject.element.id + '_tiles');
         let scaleValue = '2';
-        if (zoomType.indexOf('ZoomOut') === 0) {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            // element1 = ele.children[ele.childElementCount - 1] as HTMLElement;
-            while (ele.childElementCount >= 1) {
-                ele.removeChild(ele.children[0]);
+        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 + ')';
         }
     }
     /**
@@ -7066,7 +7187,15 @@ let Maps = class Maps extends Component {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                let markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                if (!isNullOrUndefined(markerTemplate$$1)) {
+                    markerTemplate$$1.style.top = this.mapAreaRect.y + position.y + 'px';
+                    markerTemplate$$1.style.left = this.mapAreaRect.x + position.x + 'px';
+                }
+            }
             if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
                 this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
                 const checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -7465,7 +7594,6 @@ let Maps = class Maps extends Component {
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', this.description || title.text);
-            element.setAttribute('tabindex', (this.tabIndex + (type === 'title' ? 1 : 2)).toString());
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
                 this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
@@ -7524,6 +7652,8 @@ let Maps = class Maps extends Component {
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap, this);
         EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnMap, this);
         EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnMap, this);
+        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
         //  EventHandler.add(this.element, cancelEvent, this.mouseLeaveOnMap, this);
         window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.mapsOnResize.bind(this));
     }
@@ -7541,6 +7671,8 @@ let Maps = class Maps extends Component {
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap);
         EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnMap);
         EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnMap);
+        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
+        EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
         //EventHandler.remove(this.element, cancelEvent, this.mouseLeaveOnMap);
         window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.mapsOnResize);
     }
@@ -7556,6 +7688,96 @@ let Maps = class Maps extends Component {
             removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
         }
     }
+    keyUpHandler(event) {
+        const id = event.target['id'];
+        if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
+            this.keyboardHighlightSelection(id, event.type);
+        }
+        else if (id.indexOf('_LayerIndex_') === -1 && id.indexOf('shapeIndex') === -1 &&
+            getElementsByClassName('highlightMapStyle').length > 0) {
+            removeClass(getElementsByClassName('highlightMapStyle')[0]);
+            if (this.legendSettings.visible && this.legendModule) {
+                this.legendModule.removeShapeHighlightCollection();
+            }
+        }
+    }
+    keyboardHighlightSelection(id, key) {
+        const layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const shapeData = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+            this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+        const dataIndex = parseInt(id.split('_dataIndex_')[1].split('_')[0], 10);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
+        if (this.layers[layerIndex].selectionSettings.enable && key === 'keydown' && this.selectionModule) {
+            this.selectionModule.selectionsettings = this.layers[layerIndex].selectionSettings;
+            this.selectionModule.selectionType = 'Shape';
+            this.selectionModule.selectElement(event.target, layerIndex, data, shapeData);
+        }
+        else if (this.highlightModule && (this.layers[layerIndex].highlightSettings.enable && key === 'keyup' &&
+            !event.target.classList.contains('ShapeselectionMapStyle'))) {
+            this.highlightModule.highlightSettings = this.layers[layerIndex].highlightSettings;
+            this.highlightModule.handleHighlight(event.target, layerIndex, data, shapeData);
+        }
+    }
+    keyDownHandler(event) {
+        const zoom = this.zoomModule;
+        if ((event.key === '+' || event.code === 'Equal') && zoom) {
+            zoom.performZoomingByToolBar('zoomin');
+        }
+        else if ((event.key === '-' || event.code === 'Minus') && zoom) {
+            zoom.performZoomingByToolBar('zoomout');
+        }
+        else if (event['keyCode'] === 82 && zoom) {
+            zoom.performZoomingByToolBar('reset');
+        }
+        else if ((event.code === 'ArrowUp' || event.code === 'ArrowDown') && zoom) {
+            event.preventDefault();
+            zoom.mouseDownLatLong['x'] = 0;
+            zoom.mouseMoveLatLong['y'] = this.mapAreaRect.height / 7;
+            zoom.panning('None', zoom.mouseDownLatLong['x'], event.code === 'ArrowUp' ? -(zoom.mouseMoveLatLong['y']) :
+                zoom.mouseMoveLatLong['y'], event);
+            zoom.mouseDownLatLong['y'] = zoom.mouseMoveLatLong['y'];
+        }
+        else if ((event.code === 'ArrowLeft' || event.code === 'ArrowRight') && zoom) {
+            event.preventDefault();
+            zoom.mouseDownLatLong['y'] = 0;
+            zoom.mouseMoveLatLong['x'] = this.mapAreaRect.width / 7;
+            zoom.panning('None', event.code === 'ArrowLeft' ? -(zoom.mouseMoveLatLong['x']) : zoom.mouseMoveLatLong['x'], zoom.mouseDownLatLong['y'], event);
+            zoom.mouseDownLatLong['x'] = zoom.mouseMoveLatLong['x'];
+        }
+        else if (event.code === 'Enter') {
+            const id = event.target['id'];
+            event.preventDefault();
+            if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
+                this.legendModule.currentPage = (id.indexOf('_Left_Page_') > -1) ? (this.legendModule.currentPage - 1) :
+                    (this.legendModule.currentPage + 1);
+                this.legendModule.legendGroup = this.renderer.createGroup({ id: this.element.id + '_Legend_Group' });
+                this.legendModule.drawLegendItem(this.legendModule.currentPage);
+                const textContent = (document.getElementById(this.element.id + '_Paging_Text')).textContent;
+                const text = textContent.split('/').map(Number);
+                if (id.indexOf('_Left_Page_Rect') > -1) {
+                    if (text[0] !== 1) {
+                        event.target.focus();
+                    }
+                    event.target.style.outlineColor = text[0] - 1 !== text[1] ? '' : 'transparent';
+                }
+                else if (id.indexOf('_Right_Page_Rect') > -1) {
+                    if (text[0] !== text[1]) {
+                        event.target.focus();
+                    }
+                    event.target.style.outlineColor = text[0] !== text[1] + 1 ? '' : 'transparent';
+                }
+                if (querySelector(this.element.id + '_Legend_Border', this.element.id)) {
+                    querySelector(this.element.id + '_Legend_Border', this.element.id).style.pointerEvents = 'none';
+                }
+            }
+            if (id.indexOf('shapeIndex') > -1) {
+                this.keyboardHighlightSelection(id, event.type);
+            }
+        }
+    }
     /**
      * Gets the selected element to be maintained or not.
      *
@@ -7889,26 +8111,28 @@ let Maps = class Maps extends Component {
      * @param e - Specifies the arguments of window resize event.
      */
     mapsOnResize(e) {
-        this.isResize = true;
+        this.isResize = this.isReset = true;
         const args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
+            currentSize: calculateSize(this),
             maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(() => {
-                this.unWireEVents();
-                this.createSVG();
-                this.refreshing = true;
-                this.wireEVents();
-                args.currentSize = this.availableSize;
-                this.trigger(resize, args);
-                this.render();
-            }, 500);
+        this.trigger(resize, args);
+        if (!args.cancel) {
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                this.resizeTo = setTimeout(() => {
+                    this.unWireEVents();
+                    this.createSVG();
+                    this.refreshing = true;
+                    this.wireEVents();
+                    this.render();
+                }, 500);
+            }
         }
         return false;
     }
@@ -8492,6 +8716,26 @@ let Maps = class Maps extends Component {
         });
         return isVisible;
     }
+    /**
+     * To find space between the secondary element and svg element.
+     * @private
+     */
+    getExtraPosition() {
+        let top = 0;
+        let left = 0;
+        const svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            const svgClientRects = svgElement.getClientRects();
+            const mapsClientRects = (getElement(this.element.id + '_Secondary_Element')).getClientRects();
+            if (svgClientRects.length !== 0 && mapsClientRects.length !== 0) {
+                const svgClientRect = svgClientRects[0];
+                const mapsClientRect = mapsClientRects[0];
+                top = svgClientRect.top - mapsClientRect.top;
+                left = svgClientRect.left - mapsClientRect.left;
+            }
+        }
+        return new Point(left, top);
+    }
     /**
      * To find marker visibility
      */
@@ -8855,6 +9099,8 @@ class Bubble {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To render bubble
+     *
+     * @private
      */
     renderBubble(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8899,7 +9145,7 @@ class Bubble {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             const shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue) {
+            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
                 if (layerData[i]['type'] === 'Point') {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
@@ -9030,6 +9276,8 @@ class Bubble {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
+     *
+     * @private
      */
     bubbleClick(e) {
         const target = e.target.id;
@@ -9041,7 +9289,7 @@ class Bubble {
         if (isNullOrUndefined(data)) {
             return;
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: bubbleClick, data: data, maps: this.maps,
             target: target, x: e.clientX, y: e.clientY
         };
@@ -9073,6 +9321,8 @@ class Bubble {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble move event
+     *
+     * @private
      */
     bubbleMove(e) {
         const target = e.target.id;
@@ -9084,7 +9334,7 @@ class Bubble {
         if (isNullOrUndefined(data)) {
             return;
         }
-        let eventArgs = {
+        const eventArgs = {
             cancel: false, name: bubbleMouseMove, data: data, maps: this.maps,
             target: target, x: e.clientX, y: e.clientY
         };
@@ -9313,7 +9563,7 @@ class DataLabel {
                     }
                 }
             }
-            let eventargs = {
+            const eventargs = {
                 name: dataLabelRendering, maps: this.maps, cancel: false, border: { color: dataLabel.border.color,
                     width: dataLabel.border.width, opacity: dataLabel.border.opacity }, datalabel: dataLabel,
                 fill: dataLabel.fill, template: dataLabel.template, text: text
@@ -9372,7 +9622,8 @@ class DataLabel {
                 }
                 else {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
-                        let textType = typeof text === 'number' ? text.toString() : text;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const textType = typeof text === 'number' ? text.toString() : text;
                         trimmedLable = textTrim(width, textType, style);
                         elementSize = measureText(trimmedLable, style);
                         options = new TextOption(labelId, textLocation.x, textLocation.y, 'middle', trimmedLable, '', '');
@@ -9681,7 +9932,14 @@ class NavigationLine {
  */
 class Legend {
     constructor(maps) {
+        /**
+         * @private
+         */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.legendTotalRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -9698,12 +9956,27 @@ class Legend {
         this.textMaxWidth = 0;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.shapeHighlightCollection = [];
+        /**
+         * @private
+         */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.legendHighlightCollection = [];
+        /**
+         * @private
+         */
         this.shapePreviousColor = [];
+        /**
+         * @private
+         */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.selectedNonLegendShapes = [];
+        /**
+         * @private
+         */
         this.shapeToggled = true;
+        /**
+         * @private
+         */
         this.legendElement = null;
         this.maps = maps;
         this.addEventListener();
@@ -10082,6 +10355,11 @@ class Legend {
             this.drawLegendItem(this.currentPage);
         }
     }
+    /**
+     * @param {string} page - Specifies the legend page.
+     * @returns {void}
+     * @private
+     */
     drawLegendItem(page) {
         const map = this.maps;
         const legend = map.legendSettings;
@@ -10089,6 +10367,7 @@ class Legend {
         const shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
         let textOptions;
         const render = map.renderer;
+        let legendShape = legend.shape;
         if (page >= 0 && page < this.totalPages.length) {
             if (querySelector(this.legendGroup.id, this.maps.element.id)) {
                 remove(querySelector(this.legendGroup.id, this.maps.element.id));
@@ -10098,8 +10377,9 @@ class Legend {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
                 const shapeBorder = collection['shapeBorder'];
-                const legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
+                let legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                 let legendText = collection['DisplayText'];
+                const pagingArrowPadding = 4;
                 const shape = ((legend.type === 'Markers') ? ((isNullOrUndefined(collection['ImageSrc'])) ?
                     legend.shape : 'Image') : collection['legendShape']);
                 const strokeColor = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
@@ -10109,25 +10389,39 @@ class Legend {
                     1 : shapeBorder.width : shapeBorder.width;
                 const shapeId = map.element.id + '_Legend_Shape_Index_' + collection['idIndex'];
                 const textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
-                const shapeLocation = collection['Shape'];
-                const textLocation = collection['Text'];
+                const shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
+                const textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
                 const imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 const renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
-                legend.textStyle.color = (legend.textStyle.color !== null) ? legend.textStyle.color :
+                const legendTextStyle = {
+                    fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
+                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color, opacity: legend.textStyle.opacity
+                };
+                legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legend.textStyle.fontFamily = map.themeStyle.fontFamily || legend.textStyle.fontFamily;
-                legend.textStyle.size = map.themeStyle.legendFontSize || legend.textStyle.size;
+                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
-                legendElement.appendChild(drawSymbol(shapeLocation, shape, shapeSize, collection['ImageSrc'], renderOptions));
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    const legendShapeData = this.legendCollection[collection['idIndex']].data[0];
+                    const marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
+                    legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
+                }
+                if (legendShape === "Balloon") {
+                    legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
+                }
                 const legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
-                    const trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legend.textStyle, legendRectSize);
+                    const trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                renderTextElement(textOptions, legend.textStyle, legend.textStyle.color, legendElement);
+                renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
                 this.legendGroup.appendChild(legendElement);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
@@ -10139,10 +10433,10 @@ class Legend {
                         const pagingFont = legend.textStyle;
                         const pagingTextSize = measureText(pagingText, pagingFont);
                         const leftPageX = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
-                            (width * 2) - spacing;
+                            (width * 2) - (spacing * 2) + (pagingArrowPadding / 2);
                         const rightPageX = (this.legendItemRect.x + this.legendItemRect.width);
+                        const pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2) - pagingArrowPadding;
                         const locY = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
-                        const pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2);
                         pagingGroup = render.createGroup({ id: map.element.id + '_Legend_Paging_Group' });
                         const leftPageElement = render.createGroup({ id: map.element.id + '_Legend_Left_Paging_Group' });
                         const rightPageElement = render.createGroup({ id: map.element.id + '_Legend_Right_Paging_Group' });
@@ -10150,15 +10444,19 @@ class Legend {
                             ' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
                         const leftPath = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
                             ' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
-                        const leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', 1, 1, '', leftPath);
+                        const leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         const leftRectPageOptions = new RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
-                        leftPageElement.appendChild(render.drawRectangle(leftRectPageOptions));
+                        let pathEle = render.drawRectangle(leftRectPageOptions);
+                        pathEle.setAttribute('tabindex', ((page + 1) === 1 ? -1 : map.tabIndex + 1).toString());
+                        leftPageElement.appendChild(pathEle);
                         this.wireEvents(leftPageElement);
-                        const rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', 1, 1, '', rightPath);
+                        const rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
                         rightPageElement.appendChild(render.drawPath(rightPageOptions));
-                        const rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect((rightPageX - width), (locY - height), width, spacing), null, null, '', '');
-                        rightPageElement.appendChild(render.drawRectangle(rightRectPageOptions));
+                        const rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
+                        pathEle = render.drawRectangle(rightRectPageOptions);
+                        pathEle.setAttribute('tabindex', ((page + 1) === this.totalPages.length ? -1 : map.tabIndex + 2).toString());
+                        rightPageElement.appendChild(pathEle);
                         this.wireEvents(rightPageElement);
                         pagingGroup.appendChild(leftPageElement);
                         pagingGroup.appendChild(rightPageElement);
@@ -10808,7 +11106,10 @@ class Legend {
         const map = this.maps;
         const legend = map.legendSettings;
         const legendTitle = legend.title.text;
-        const textStyle = legend.titleStyle;
+        const textStyle = {
+            fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color, opacity: legend.titleStyle.opacity
+        };
         let textOptions;
         const spacing = 10;
         const trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -10827,6 +11128,7 @@ class Legend {
         map.svgObject.appendChild(this.legendGroup);
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
+            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
             renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
         }
@@ -10892,13 +11194,13 @@ class Legend {
                     break;
             }
             if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
-                map.totalRect = totalRect;
+                this.legendTotalRect = map.totalRect = totalRect;
             }
             else {
                 if ((legend.height || legend.width) && legend.mode === 'Interactive') {
                     map.totalRect = totalRect;
                 }
-                map.mapAreaRect = totalRect;
+                this.legendTotalRect = map.mapAreaRect = totalRect;
             }
             this.translate = new Point(x, y);
         }
@@ -10932,20 +11234,24 @@ class Legend {
                     }
                     else {
                         newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
-                            shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
+                            shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (this.maps.legendSettings.useMarkerShape ? marker$$1.shape : this.maps.legendSettings.shape) });
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                 }
             });
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getMarkerLegendData(layerIndex, text, legendFill) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const legendData = [];
         this.maps.layers[layerIndex].markerSettings.map((markerSettings, markerIndex) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                let marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker$$1.legendText] || text === '') && legendFill == data[marker$$1.colorValuePath]) {
+                const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+                if ((text === data[marker$$1.legendText] || text === '') && legendFill === data[marker$$1.colorValuePath]) {
                     legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
                         shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
                 }
@@ -11294,7 +11600,7 @@ class Legend {
                             shape = this.legendCollection[legendIndex]['data'][i];
                             mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
-                                '_MarkerIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
                                 mapElement = mapElement.children[0];
                             }
@@ -11303,7 +11609,7 @@ class Legend {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11318,6 +11624,9 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', '#E5E5E5');
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#E5E5E5');
                                 }
@@ -11332,6 +11641,9 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#757575');
                                 }
@@ -11366,7 +11678,7 @@ class Legend {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
                                     layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                     layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
-                                    layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                    layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                     layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                         this.maps.layers[j].shapeSettings.opacity :
                                         this.maps.layers[j].shapeSettings.border.opacity).toString());
@@ -11396,7 +11708,7 @@ class Legend {
                                 layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                     this.maps.layers[j].shapeSettings.opacity :
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
-                                layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                 layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                 layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
                                 if (targetEle !== null) {
@@ -11416,7 +11728,7 @@ class Legend {
             targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
             targetEle.id.indexOf('_Text') === -1) {
             let LegendInteractive;
-            const legendIndex = parseFloat(targetEle.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            const legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let mapdata;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11437,7 +11749,7 @@ class Legend {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
-                                    LegendInteractive.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11501,7 +11813,7 @@ class Legend {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
                                     mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapLegendElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11528,7 +11840,7 @@ class Legend {
                                     this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                mapLegendElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                 mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                     this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11747,14 +12059,7 @@ class Highlight {
                 this.highlightSettings = this.maps.layers[layerIndex].navigationLineSettings[index].highlightSettings;
             }
             if (this.highlightSettings.enable) {
-                if (this.maps.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
-                    this.maps.legendModule.shapeHighLightAndSelection(targetEle, data, this.highlightSettings, 'highlight', layerIndex);
-                }
-                const selectHighLight = targetEle.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible ?
-                    this.maps.legendModule.shapeToggled : true;
-                if (selectHighLight) {
-                    this.mapHighlight(targetEle, shapeData, data);
-                }
+                this.handleHighlight(targetEle, layerIndex, data, shapeData);
             }
             else {
                 const element = document.getElementsByClassName('highlightMapStyle')[0];
@@ -11778,21 +12083,35 @@ class Highlight {
                 targetEle.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
             }
             removeClass(targetEle);
-            if (this.maps.legendSettings.visible) {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
                 this.maps.legendModule.removeShapeHighlightCollection();
             }
         }
         else if ((targetEle.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') !== -1 ||
-            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) &&
+            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendModule &&
             this.maps.legendSettings.visible && targetEle.id.indexOf('_Text') === -1) {
             this.maps.legendModule.legendHighLightAndSelection(targetEle, 'highlight');
         }
         else {
-            if (this.maps.legendSettings.visible) {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
                 this.maps.legendModule.removeLegendHighlightCollection();
             }
         }
     }
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleHighlight(targetElement, layerIndex, data, shapeData) {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+            this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
+        }
+        const selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (selectHighLight) {
+            this.mapHighlight(targetElement, shapeData, data);
+        }
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mapHighlight(targetEle, shapeData, data) {
         const layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
@@ -11802,14 +12121,14 @@ class Highlight {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         const border = {
-            color: this.highlightSettings.border.color,
-            width: this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };
-        let eventArgs = {
+        const eventArgs = {
             opacity: this.highlightSettings.opacity,
-            fill: targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
-                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none',
+            fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
+                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
             border: border,
             name: itemHighlight,
             target: targetEle.id,
@@ -11949,24 +12268,31 @@ class Selection {
                 this.selectionType = 'navigationline';
             }
             if (this.selectionsettings.enable) {
-                this.maps.mapSelect = targetElement ? true : false;
-                if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
-                    this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.selectionsettings, 'selection', layerIndex);
-                }
-                const shapeToggled = (targetElement.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible) ?
-                    this.maps.legendModule.shapeToggled : true;
-                if (shapeToggled) {
-                    this.selectMap(targetElement, shapeData, data);
-                }
+                this.selectElement(targetElement, layerIndex, data, shapeData);
             }
         }
-        else if (this.maps.legendSettings.visible && !this.maps.legendSettings.toggleLegendSettings.enable &&
+        else if ((this.maps.legendSettings.visible && !this.maps.legendSettings.toggleLegendSettings.enable && this.maps.legendModule) &&
             !isNullOrUndefined(targetElement.id) && targetElement.id.indexOf('_Text') === -1 &&
             (targetElement.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') > -1 ||
                 targetElement.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1)) {
             this.maps.legendModule.legendHighLightAndSelection(targetElement, 'selection');
         }
     }
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selectElement(targetElement, layerIndex, data, shapeData) {
+        this.maps.mapSelect = targetElement ? true : false;
+        if (this.maps.legendModule && this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
+            this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.selectionsettings, 'selection', layerIndex);
+        }
+        const shapeToggled = (targetElement.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (shapeToggled) {
+            this.selectMap(targetElement, shapeData, data);
+        }
+    }
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for selection
@@ -11990,15 +12316,16 @@ class Selection {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectMap(targetElement, shapeData, data) {
+        const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
         const selectionsettings = this.selectionsettings;
         const border = {
-            color: this.selectionsettings.border.color,
-            width: this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale),
+            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
+            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
             opacity: this.selectionsettings.border.opacity
         };
-        let eventArgs = {
+        const eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none',
+            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -12190,8 +12517,6 @@ class MapsTooltip {
         if (istooltipRender) {
             if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
-                option.textStyle.fontFamily = this.maps.themeStyle.fontFamily || option.textStyle.fontFamily;
-                option.textStyle.opacity = this.maps.themeStyle.tooltipTextOpacity || option.textStyle.opacity;
                 const shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
                     return;
@@ -12308,9 +12633,13 @@ class MapsTooltip {
                 option.template = option.template[Object.keys(option.template)[0]];
             }
             templateData = this.setTooltipContent(option, templateData);
+            const tooltipTextStyle = {
+                color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
+                fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
+            };
             const tooltipOption = {
                 location: location, text: tooltipContent, data: templateData,
-                textStyle: option.textStyle,
+                textStyle: tooltipTextStyle,
                 template: option.template
             };
             tooltipArgs = {
@@ -12326,6 +12655,10 @@ class MapsTooltip {
                     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,
@@ -12604,8 +12937,10 @@ class Zoom {
             if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                 document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
             }
+            this.markerLineAnimation(map);
             map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
             const element1 = document.getElementById(this.maps.element.id + '_tiles');
+            const animationDuration = this.maps.layersCollection[0].animationDuration;
             setTimeout(() => {
                 // if (type === 'ZoomOut') {
                 //     element1.removeChild(element1.children[element1.childElementCount - 1]);
@@ -12619,7 +12954,7 @@ class Zoom {
                 if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                     document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                 }
-            }, 250);
+            }, animationDuration);
         }
         this.maps.zoomNotApplied = false;
     }
@@ -12793,11 +13128,13 @@ class Zoom {
      */
     animateTransform(element, animate$$1, x, y, scale) {
         const duration = this.currentLayer.animationDuration;
-        if (!animate$$1 || duration === 0) {
+        if (!animate$$1 || duration === 0 || this.maps.isTileMap) {
             element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             return;
         }
-        zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        if (!this.maps.isTileMap) {
+            zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        }
     }
     applyTransform(animate$$1) {
         let layerIndex;
@@ -12844,12 +13181,14 @@ class Zoom {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
+                            let markerAnimation;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 for (let k = 0; k < currentEle.childElementCount; k++) {
                                     this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate$$1);
                                     const layerIndex = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     const dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     const markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0;
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     const markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (let x = 0; x < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x++) {
@@ -12860,9 +13199,17 @@ class Zoom {
                                             this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if (!this.maps.isTileMap && this.currentLayer.animationDuration > 0) {
-                                        markerStyle = 'visibility:hidden';
-                                        currentEle.setAttribute('style', markerStyle);
+                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (this.maps.isTileMap) {
+                                            const groupElement = document.querySelector('.GroupElement');
+                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
+                                                groupElement.style.display = 'none';
+                                            }
+                                        }
+                                        else {
+                                            markerStyle = 'visibility:hidden';
+                                            currentEle.setAttribute('style', markerStyle);
+                                        }
                                     }
                                 }
                                 if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
@@ -12961,7 +13308,7 @@ class Zoom {
                 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);
                 }
             }
@@ -13078,7 +13425,6 @@ class Zoom {
      */
     processTemplate(x, y, scale, maps) {
         for (let i = 0; i < this.templateCount; i++) {
-            this.currentLayer = maps.layersCollection[i];
             const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             const markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
                 i + '_Markers_Template_Group');
@@ -13307,6 +13653,23 @@ class Zoom {
             }
         }
     }
+    markerLineAnimation(map) {
+        if (map.isTileMap) {
+            for (let i = 0; i < map.layersCollection.length; i++) {
+                const markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                const lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                if (!isNullOrUndefined(markerTemplateElement)) {
+                    markerTemplateElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(lineElement)) {
+                    lineElement.style.visibility = 'hidden';
+                }
+            }
+        }
+    }
+    /**
+     * @private
+     */
     panning(direction, xDifference, yDifference, mouseLocation) {
         const map = this.maps;
         let panArgs;
@@ -13325,6 +13688,8 @@ class Zoom {
         yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
         this.maps.mergeCluster();
         if (!map.isTileMap) {
+            const legendElement = document.getElementById(map.element.id + '_Legend_Group');
+            const legendHeight = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
             x = translatePoint.x - xDifference / scale;
             y = translatePoint.y - yDifference / scale;
             const layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
@@ -13332,7 +13697,7 @@ class Zoom {
             const panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                 ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
             const panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
-                ((layerRect.top + layerRect.height + map.margin.top) >= (elementRect.top + elementRect.height))));
+                ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const location = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
@@ -13438,41 +13803,45 @@ class Zoom {
             let tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
             map.scale = Math.pow(2, tileZoomFactor - 1);
             map.tileZoomLevel = tileZoomFactor;
-            map.zoomSettings.zoomFactor = zoomFactor;
-            const position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
-            this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
-            if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
-            }
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
-            map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-            if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
-            }
-            if (document.querySelector('.GroupElement')) {
-                document.querySelector('.GroupElement').style.display = 'none';
-            }
-            map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-            const element1 = document.getElementById(this.maps.element.id + '_tiles');
-            setTimeout(() => {
-                this.applyTransform(true);
+            if (map.previousScale !== map.scale || map.isReset) {
+                map.zoomSettings.zoomFactor = zoomFactor;
+                const position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
+                this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
+                if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                }
+                this.triggerZoomEvent(prevTilePoint, prevLevel, type);
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
                 if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                 }
-            }, 250);
+                if (document.querySelector('.GroupElement')) {
+                    document.querySelector('.GroupElement').style.display = 'none';
+                }
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                const animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(() => {
+                    this.applyTransform(true);
+                    if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    }
+                }, animationDuration);
+            }
+            this.maps.zoomNotApplied = false;
         }
-        this.maps.zoomNotApplied = false;
     }
     createZoomingToolbars() {
         const map = this.maps;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
-            opacity: 0.3
+            opacity: map.theme.toLowerCase() === 'fluentuidark' ? 0.6 : 0.3
         });
         const kitHeight = 16;
         const kitWidth = 16;
@@ -13730,8 +14099,9 @@ class Zoom {
                 x = (size.width - toolBarSize.width) - padding;
                 break;
         }
-        element.style.left = x + 'px';
-        element.style.top = y + 'px';
+        let extraPosition = map.getExtraPosition();
+        element.style.left = x + extraPosition.x + 'px';
+        element.style.top = y + extraPosition.y + 'px';
         const color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         const 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; } ' +
@@ -13875,14 +14245,14 @@ class Zoom {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                         }
                     }
                 }
             }
             else {
-                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '0.3');
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                 if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');