@syncfusion/ej2-maps 19.3.53 → 19.4.48

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

@@ -59,13 +59,15 @@ function calculateSize(maps) {
     var containerHeight = maps.element.clientHeight;
     var containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
     var containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    var availableSize = new Size(0, 0);
     if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        maps.availableSize = new Size(0, 0);
+        availableSize = new Size(0, 0);
     }
     else {
-        maps.availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
+        availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
             Math.min(window.innerWidth, window.innerHeight) : 450));
     }
+    return availableSize;
 }
 /**
  * Method to create svg for maps.
@@ -75,7 +77,7 @@ function calculateSize(maps) {
  */
 function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
-    calculateSize(maps);
+    maps.availableSize = calculateSize(maps);
     maps.svgObject = maps.renderer.createSvg({
         id: maps.element.id + '_svg',
         width: maps.availableSize.width,
@@ -857,17 +859,19 @@ function markerShapeChoose(eventArgs, data) {
         var shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = shape;
+        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
-            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath) &&
-                !isNullOrUndefined(data[eventArgs.imageUrlValuePath])) ?
-                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : data[eventArgs.imageUrlValuePath]) : eventArgs.imageUrl;
+            eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
+                ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
+                    data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
         }
     }
     else {
         var shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = shapes;
-        var shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ? ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.imageUrlValuePath)).toString() : eventArgs.imageUrl) : eventArgs.imageUrl;
+        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
+        var shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
+            ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
+                data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
         eventArgs.imageUrl = shapeImage;
     }
     return eventArgs;
@@ -1245,6 +1249,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  * @param {number} markerIndex - Specifies the marker index
  * @param {HTMLElement} markerTemplate - Specifies the marker template element
  * @param {Point} location - Specifies the location
+ * @param {Point} transPoint - Specifies the translate point.
  * @param {number} scale - Specifies the scale value
  * @param {Point} offset - Specifies the offset value
  * @param {Maps} maps - Specifies the instance of the maps
@@ -1426,7 +1431,7 @@ function calculateShapes(maps, shape, options, size, location, markerEle) {
     var tempGroup;
     switch (shape) {
         case 'Balloon':
-            tempGroup = drawBalloon(maps, options, size, location, markerEle);
+            tempGroup = drawBalloon(maps, options, size, location, 'Marker', markerEle);
             break;
         case 'Cross':
             options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height
@@ -1584,9 +1589,10 @@ function drawStar(maps, options, size, location, element) {
  * @returns {Element} - Returns the element
  * @private
  */
-function drawBalloon(maps, options, size, location, element) {
+function drawBalloon(maps, options, size, location, type, element) {
     var width = size.width;
     var height = size.height;
+    var pathElement;
     location.x -= width / 2;
     location.y -= height;
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
@@ -1595,9 +1601,15 @@ function drawBalloon(maps, options, size, location, element) {
     var x = size.width / 30;
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    var g = maps.renderer.createGroup({ id: options.id });
-    appendShape(balloon, g);
-    return appendShape(g, element);
+    if (type === 'Marker') {
+        var g = maps.renderer.createGroup({ id: options.id });
+        appendShape(balloon, g);
+        pathElement = appendShape(g, element);
+    }
+    else {
+        pathElement = balloon;
+    }
+    return pathElement;
 }
 /**
  * Internal rendering of Pattern
@@ -1739,6 +1751,7 @@ function getRatioOfBubble(min, max, value, minValue, maxValue) {
  *
  * @param {MapLocation[]} points - Specifies the points
  * @param {string} type - Specifies the type
+ * @param {string} geometryType - Specified the type of the geometry
  * @returns {any} - Specifies the object
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1957,9 +1970,9 @@ function getTranslate(mapObject, layer, animate) {
         mapObject.mapScaleValue = scaleFactor = zoomFactorValue = mapObject.scaleOfGivenLocation;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var min = mapObject.baseMapRectBounds['min'];
+    var min = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['min'] : null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var max = mapObject.baseMapRectBounds['max'];
+    var max = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['max'] : null;
     var zoomFactor = animate ? 1 : mapObject.mapScaleValue;
     if (isNullOrUndefined(mapObject.currentShapeDataLength)) {
         mapObject.currentShapeDataLength = !isNullOrUndefined(layer.shapeData['features'])
@@ -1969,111 +1982,113 @@ function getTranslate(mapObject, layer, animate) {
     var availSize = mapObject.availableSize;
     var x;
     var y;
-    var mapWidth = Math.abs(max['x'] - min['x']);
-    var mapHeight = Math.abs(min['y'] - max['y']);
-    var factor = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
-    center = mapObject.zoomSettings.shouldZoomInitially
-        && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
-        mapObject.centerPosition;
-    if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
-        var leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
-        var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
-        var point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
-            convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-        if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-            x = -point.x + leftPosition;
-            y = -point.y + topPosition;
-            scaleFactor = zoomFactor;
-        }
-        else {
-            if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
+    if (!isNullOrUndefined(min) && !isNullOrUndefined(max)) {
+        var mapWidth = Math.abs(max['x'] - min['x']);
+        var mapHeight = Math.abs(min['y'] - max['y']);
+        var factor = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
+        center = mapObject.zoomSettings.shouldZoomInitially
+            && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
+            mapObject.centerPosition;
+        if ((!isNullOrUndefined(centerLongitude) && !isNullOrUndefined(centerLatitude)) || checkMethodeZoom) {
+            var leftPosition = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
+            var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
+            var point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
+                convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
+                scaleFactor = zoomFactor;
             }
             else {
-                if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
+                if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
                     x = -point.x + leftPosition;
                     y = -point.y + topPosition;
-                    scaleFactor = zoomFactor;
                 }
                 else {
-                    x = mapObject.zoomTranslatePoint.x;
-                    y = mapObject.zoomTranslatePoint.y;
+                    if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
+                        x = -point.x + leftPosition;
+                        y = -point.y + topPosition;
+                        scaleFactor = zoomFactor;
+                    }
+                    else {
+                        x = mapObject.zoomTranslatePoint.x;
+                        y = mapObject.zoomTranslatePoint.y;
+                    }
                 }
+                scaleFactor = mapObject.mapScaleValue;
             }
-            scaleFactor = mapObject.mapScaleValue;
-        }
-    }
-    else {
-        if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-            mapWidth *= scaleFactor;
-            mapHeight *= scaleFactor;
-            var widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
-            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
-            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-            mapObject.previousTranslate = new Point(x, y);
         }
         else {
-            if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                mapHeight *= scaleFactor;
                 mapWidth *= scaleFactor;
+                mapHeight *= scaleFactor;
+                var widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
+                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
                 y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
+                mapObject.previousTranslate = new Point(x, y);
             }
             else {
-                scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
-                mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
-                if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
-                    ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
-                    var scale = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
-                    mapHeight *= scale;
-                    mapWidth *= scale;
-                    y = size.y + ((-(min['y'])) + ((size.height / 2)
-                        - (mapHeight / 2)));
-                    scaleFactor = scale;
-                    x = size.x + ((-(min['x']))
-                        + ((size.width / 2) - (mapWidth / 2)));
-                }
-                else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
-                    var cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                    var cmapWidth = mapWidth;
-                    cmapWidth *= cscaleFactor;
-                    var cmapHeight = mapHeight;
-                    cmapHeight *= cscaleFactor;
-                    var x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
-                    var y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
-                    var xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
-                    var ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
-                    var actxdiff = xdiff * (mapObject.availableSize.width);
-                    var actydiff = ydiff * (mapObject.availableSize.height);
-                    x = x1 + actxdiff;
-                    y = y1 + actydiff;
-                    mapObject.previousTranslate = new Point(x1, y1);
-                    mapObject.zoomTranslatePoint.x = x;
-                    mapObject.zoomTranslatePoint.y = y;
+                if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
+                    scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                    mapHeight *= scaleFactor;
+                    mapWidth *= scaleFactor;
+                    y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                    x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                 }
                 else {
-                    if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
-                        scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                        mapWidth *= scaleFactor;
-                        x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
-                        mapHeight *= scaleFactor;
-                        y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                    scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
+                    mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
+                    if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
+                        ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
+                        var scale = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
+                        mapHeight *= scale;
+                        mapWidth *= scale;
+                        y = size.y + ((-(min['y'])) + ((size.height / 2)
+                            - (mapHeight / 2)));
+                        scaleFactor = scale;
+                        x = size.x + ((-(min['x']))
+                            + ((size.width / 2) - (mapWidth / 2)));
+                    }
+                    else if (mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width) {
+                        var cscaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                        var cmapWidth = mapWidth;
+                        cmapWidth *= cscaleFactor;
+                        var cmapHeight = mapHeight;
+                        cmapHeight *= cscaleFactor;
+                        var x1 = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
+                        var y1 = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
+                        var xdiff = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
+                        var ydiff = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
+                        var actxdiff = xdiff * (mapObject.availableSize.width);
+                        var actydiff = ydiff * (mapObject.availableSize.height);
+                        x = x1 + actxdiff;
+                        y = y1 + actydiff;
+                        mapObject.previousTranslate = new Point(x1, y1);
+                        mapObject.zoomTranslatePoint.x = x;
+                        mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        x = mapObject.zoomTranslatePoint.x;
-                        y = mapObject.zoomTranslatePoint.y;
-                        scaleFactor = mapObject.scale;
+                        if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
+                            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                            mapWidth *= scaleFactor;
+                            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
+                            mapHeight *= scaleFactor;
+                            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
+                        }
+                        else {
+                            x = mapObject.zoomTranslatePoint.x;
+                            y = mapObject.zoomTranslatePoint.y;
+                            scaleFactor = mapObject.scale;
+                        }
                     }
                 }
             }
         }
-    }
-    if (!isNullOrUndefined(mapObject.translatePoint)) {
-        x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
-        y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+        if (!isNullOrUndefined(mapObject.translatePoint)) {
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+        }
     }
     scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
     mapObject.widthBeforeRefresh = mapObject.availableSize.width;
@@ -2510,6 +2525,12 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
         delay: delay,
         progress: function (args) {
             if (args.timeStamp > args.delay) {
+                if (maps.isTileMap && height === 0) {
+                    var layerGroupElement = document.querySelector('.GroupElement');
+                    if (!isNullOrUndefined(layerGroupElement)) {
+                        layerGroupElement.style.display = 'block';
+                    }
+                }
                 height = ((args.timeStamp - args.delay) / args.duration);
                 element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +
                     ' ) scale(' + height + ')');
@@ -2709,6 +2730,8 @@ function renderLegendShape(location, size, shape, options, url) {
     var shapeY = location.y;
     var x = location.x + (-shapeWidth / 2);
     var y = location.y + (-shapeHeight / 2);
+    options['stroke'] = (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross') ? options['fill'] : options['stroke'];
+    options['stroke-width'] = (options['stroke-width'] === 0 && (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross')) ? 1 : options['stroke-width'];
     switch (shape) {
         case 'Circle':
         case 'Bubble':
@@ -2720,6 +2743,11 @@ function renderLegendShape(location, size, shape, options, url) {
                 + (shapeY + (-shapeHeight / 2));
             merge(options, { 'd': renderPath });
             break;
+        case 'HorizontalLine':
+            renderPath = 'M' + ' ' + shapeX + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' '
+                + shapeY;
+            merge(options, { 'd': renderPath });
+            break;
         case 'Diamond':
             renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
                 'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
@@ -2844,6 +2872,7 @@ function changeBorderWidth(element, index, scale, maps) {
             var value = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
+            var borderWidth = maps.layersCollection[index].shapeSettings.border.width;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2853,14 +2882,17 @@ function changeBorderWidth(element, index, scale, maps) {
                         currentStroke = maps.layersCollection[index].dataSource[value][borderWidthValue];
                     }
                     else {
-                        currentStroke = (maps.layersCollection[index].shapeSettings.border.width);
+                        currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
                     }
                 }
             }
             else {
-                currentStroke = (maps.layersCollection[index].shapeSettings.border.width);
+                currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
             }
             childNode.setAttribute('stroke-width', (currentStroke / scale).toString());
+            if (element.id.indexOf('_LineString') > -1 && isNullOrUndefined(currentStroke)) {
+                childNode.setAttribute('stroke-width', (1 / scale).toString());
+            }
         }
     }
 }
@@ -3224,15 +3256,15 @@ var Theme;
         fontWeight: 'Regular',
         color: null,
         fontStyle: 'Regular',
-        fontFamily: 'Roboto'
+        fontFamily: null
     };
     /** @private */
     Theme.legendTitleFont = {
-        size: '14px',
-        fontWeight: 'Regular',
+        size: '12px',
+        fontWeight: 'Medium',
         color: null,
-        fontStyle: 'Regular',
-        fontFamily: 'Roboto, Noto, Sans-serif'
+        fontStyle: 'Medium',
+        fontFamily: null
     };
     /** @private */
     Theme.legendLabelFont = {
@@ -3381,6 +3413,14 @@ function getShapeColor(theme) {
             themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
                 '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
             break;
+        case 'fluentui':
+            themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
+                '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
+            break;
+        case 'fluentuidark':
+            themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
+                '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -3526,6 +3566,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#363F4C',
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -3543,6 +3584,7 @@ function getThemeStyle(theme) {
                 tooltipFontColor: '#000000',
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
@@ -3664,6 +3706,52 @@ function getThemeStyle(theme) {
                 shapeFill: '#495057'
             };
             break;
+        case 'fluentui':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#201F1E',
+                subTitleFontColor: '#201F1E',
+                legendTitleFontColor: '#201F1E',
+                legendTextColor: '#201F1E',
+                dataLabelFontColor: '#201F1E',
+                tooltipFontColor: '#323130',
+                tooltipFillColor: '#FFFFFF',
+                zoomFillColor: '#A19F9D',
+                fontFamily: 'Segoe UI',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#323130',
+                shapeFill: '#F3F2F1'
+            };
+            break;
+        case 'fluentuidark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#F3F2F1',
+                subTitleFontColor: '#F3F2F1',
+                legendTitleFontColor: '#F3F2F1',
+                legendTextColor: '#F3F2F1',
+                dataLabelFontColor: '#F3F2F1',
+                tooltipFontColor: '#F3F2F1',
+                tooltipFillColor: '#252423',
+                zoomFillColor: '#484644',
+                fontFamily: 'Segoe UI',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#F3F2F1',
+                shapeFill: '#252423'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
@@ -3677,6 +3765,7 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -4318,6 +4407,9 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
     function LegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate$1([
+        Property(false)
+    ], LegendSettings.prototype, "useMarkerShape", void 0);
     __decorate$1([
         Property(false)
     ], LegendSettings.prototype, "toggleVisibility", void 0);
@@ -4370,7 +4462,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __decorate$1([
-        Complex({}, Font)
+        Complex(Theme.legendTitleFont, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
     __decorate$1([
         Property('Bottom')
@@ -4468,7 +4560,7 @@ var ShapeSettings = /** @__PURE__ @class */ (function (_super) {
         Property(5)
     ], ShapeSettings.prototype, "circleRadius", void 0);
     __decorate$1([
-        Complex({ width: 0, color: '#000000' }, Border)
+        Complex({ width: null, color: '#000000' }, Border)
     ], ShapeSettings.prototype, "border", void 0);
     __decorate$1([
         Property('')
@@ -4761,15 +4853,9 @@ var Marker = /** @__PURE__ @class */ (function () {
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
-                eventArgs = markerColorChoose(eventArgs, data);
-                eventArgs = markerShapeChoose(eventArgs, data);
                 _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    eventArgs = markerShapeChoose(eventArgs, data);
                     var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
@@ -5641,7 +5727,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         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);
@@ -5763,7 +5850,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         if (this.mapObject.zoomSettings.resetToInitial && this.mapObject.initialCheck && !isNullOrUndefined(panel.mapObject.height)
             && this.mapObject.availableSize.height > 512) {
             this.mapObject.applyZoomReset = true;
-            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512) + 1;
+            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
             var padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
@@ -5845,6 +5932,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             proxy_1.mapObject['bingMap'] = bing_1;
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _this.mapObject.arrangeTemplate();
+                            if (_this.mapObject.zoomModule && (_this.mapObject.previousScale !== _this.mapObject.scale)) {
+                                _this.mapObject.zoomModule.applyTransform(true);
+                            }
                         };
                         ajax.send();
                     }
@@ -5923,9 +6013,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 var data = geometryData['geometry'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var properties = geometryData['properties'];
-                if (type !== 'LineString') {
-                    _this.generatePoints(type, coords, data, properties);
-                }
+                _this.generatePoints(type, coords, data, properties);
             }
         });
         this.currentLayer.rectBounds = this.rectBounds;
@@ -5953,11 +6041,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var currentShapeData = this_1.currentLayer.layerData[i];
                 var pathOptions;
-                var polyLineOptions;
                 var circleOptions;
                 var groupElement;
                 var path = '';
-                var points = '';
                 var fill = (shapeSettings.autofill) ? colors[i % colors.length] :
                     (shapeSettings.fill || this_1.mapObject.themeStyle.shapeFill);
                 if (shapeSettings.colorValuePath !== null && !isNullOrUndefined(currentShapeData['property'])) {
@@ -6021,7 +6107,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         if (isNullOrUndefined(shapeSettings.borderColorValuePath)) {
                             _this.mapObject.layers[layerIndex].shapeSettings.border.color = eventArgs.border.color;
                         }
-                        else if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
+                        if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
                             _this.mapObject.layers[layerIndex].shapeSettings.border.width = eventArgs.border.width;
                         }
                     }
@@ -6075,17 +6161,21 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             }
                             break;
                         case 'LineString':
+                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             currentShapeData.map(function (lineData) {
-                                points += lineData['point']['x'] + ' , ' + lineData['point']['y'] + ' ';
+                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
                             });
-                            polyLineOptions = new PolylineOption(shapeID, points, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray);
-                            pathEle = _this.mapObject.renderer.drawPolyline(polyLineOptions);
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = _this.mapObject.renderer.drawPath(pathOptions);
+                            }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var pointData = currentShapeData['point'];
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], shapeSettings.circleRadius, null);
+                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / _this.currentFactor;
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
                             pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                             break;
                         case 'Path':
@@ -6106,7 +6196,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         }
                         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 (var j = 0; j < _this.mapObject.toggledShapeElementId.length; j++) {
@@ -6325,11 +6418,14 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
+                var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
+                    _this.calculateBox(point, extraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6340,6 +6436,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 break;
             case 'point': {
                 var arrayCollections_1 = false;
+                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     if (Object.prototype.toString.call(points) === '[object Array]') {
@@ -6356,6 +6454,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     latitude = coordinates[1];
                     longitude = coordinates[0];
                     var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace_2);
                     this.currentLayer.layerData.push({
                         point: point, type: type, lat: latitude, lng: longitude, property: properties
                     });
@@ -6369,6 +6468,17 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 break;
         }
     };
+    LayerPanel.prototype.calculateBox = function (point, extraSpace) {
+        if (isNullOrUndefined(this.rectBounds)) {
+            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+        }
+        else {
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
+        }
+    };
     LayerPanel.prototype.calculateFactor = function (layer) {
         var horFactor;
         var verFactor = 1;
@@ -6477,6 +6587,15 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             _this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'linestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map(function (point, index) {
+                            _this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                        });
+                        break;
+                    case 'point':
+                        _this.calculateRectBox(coordinates, 'point');
+                        break;
                 }
             }
         });
@@ -6513,20 +6632,33 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         return newData;
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayerPanel.prototype.calculateRectBox = function (coordinates) {
+    LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
         var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(coordinates, function (currentCoords) {
-            if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
-                _this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+        if (type !== 'LineString' && type !== 'point') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(coordinates, function (currentCoords) {
+                if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
+                    _this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+                }
+                else {
+                    _this.mapObject.baseMapBounds.latitude.min = Math.min(_this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
+                    _this.mapObject.baseMapBounds.latitude.max = Math.max(_this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
+                    _this.mapObject.baseMapBounds.longitude.min = Math.min(_this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
+                    _this.mapObject.baseMapBounds.longitude.max = Math.max(_this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                }
+            });
+        }
+        else {
+            if ((isFirstItem || type === 'point') && isNullOrUndefined(this.mapObject.baseMapBounds)) {
+                this.mapObject.baseMapBounds = new GeoLocation({ min: coordinates[1], max: coordinates[1] }, { min: coordinates[0], max: coordinates[0] });
             }
             else {
-                _this.mapObject.baseMapBounds.latitude.min = Math.min(_this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
-                _this.mapObject.baseMapBounds.latitude.max = Math.max(_this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
-                _this.mapObject.baseMapBounds.longitude.min = Math.min(_this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
-                _this.mapObject.baseMapBounds.longitude.max = Math.max(_this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, coordinates[1]);
+                this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, coordinates[1]);
+                this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, coordinates[0]);
+                this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, coordinates[0]);
             }
-        });
+        }
     };
     LayerPanel.prototype.generateTiles = function (zoomLevel, tileTranslatePoint, zoomType, bing, position) {
         var userLang = this.mapObject.locale;
@@ -6615,16 +6747,18 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 }
             }
         }
-        this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        }
     };
     LayerPanel.prototype.arrangeTiles = function (type, x, y) {
         var _this = this;
         var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         var element1 = document.getElementById(this.mapObject.element.id + '_tiles');
         var timeOut;
-        if (!isNullOrUndefined(type) && type !== 'Pan' && type !== 'Reset' && type.indexOf('ZoomOut') === -1) {
+        if (!isNullOrUndefined(type) && type !== 'Pan') {
             this.tileAnimation(type, x, y);
-            timeOut = 250;
+            timeOut = this.mapObject.layersCollection[0].animationDuration;
         }
         else {
             timeOut = 0;
@@ -6639,7 +6773,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 }
                 if (element1) {
                     element1.style.zIndex = '0';
-                    element1.style.visibility = 'hidden';
                 }
                 var animateElement;
                 if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
@@ -6701,35 +6834,23 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
      * @returns {void}
      */
     LayerPanel.prototype.tileAnimation = function (zoomType, translateX, translateY) {
-        var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
-        var element1 = document.getElementById('animated_tiles');
-        var ele = document.getElementById(this.mapObject.element.id + '_tiles');
+        var tileParent = document.getElementById(this.mapObject.element.id + '_tile_parent');
+        var animatedTiles = document.getElementById(this.mapObject.element.id + '_animated_tiles');
+        var tileElement = document.getElementById(this.mapObject.element.id + '_tiles');
         var scaleValue = '2';
-        if (zoomType.indexOf('ZoomOut') === 0) {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            // element1 = ele.children[ele.childElementCount - 1] as HTMLElement;
-            while (ele.childElementCount >= 1) {
-                ele.removeChild(ele.children[0]);
-            }
-            translateX = 0;
-            translateY = 128 - 23;
-            scaleValue = '0.5';
-        }
-        else if (zoomType === 'Reset') {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            while (!(ele.childElementCount === 1) && !(ele.childElementCount === 0)) {
-                ele.removeChild(ele.children[1]);
+        if (zoomType.indexOf('ZoomOut') === 0 || zoomType === 'Reset') {
+            tileElement.style.zIndex = '1';
+            tileParent.style.zIndex = '0';
+            while (tileElement.childElementCount >= 1) {
+                tileElement.removeChild(tileElement.children[0]);
             }
-            element1 = ele.children[0];
             translateX = 0;
-            translateY = 0;
-            scaleValue = '1';
+            translateY = document.getElementById(this.mapObject.element.id + '_tile_parent').getClientRects()[0].height / 4;
+            scaleValue = zoomType.indexOf('ZoomOut') === 0 ? '0.5' : '0.2';
         }
-        if (!isNullOrUndefined(element1)) {
-            element1.style.transition = '250ms';
-            element1.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
+        if (!isNullOrUndefined(animatedTiles)) {
+            animatedTiles.style.transition = this.mapObject.layersCollection[0].animationDuration + 'ms';
+            animatedTiles.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
         }
     };
     /**
@@ -7345,7 +7466,15 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        var position = this.getExtraPosition();
         for (var i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                var markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                if (!isNullOrUndefined(markerTemplate$$1)) {
+                    markerTemplate$$1.style.top = this.mapAreaRect.y + position.y + 'px';
+                    markerTemplate$$1.style.left = this.mapAreaRect.x + position.x + 'px';
+                }
+            }
             if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
                 this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
                 var checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -7745,7 +7874,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var 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);
@@ -7804,6 +7932,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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));
     };
@@ -7821,6 +7951,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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);
     };
@@ -7836,6 +7968,96 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
         }
     };
+    Maps.prototype.keyUpHandler = function (event) {
+        var 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();
+            }
+        }
+    };
+    Maps.prototype.keyboardHighlightSelection = function (id, key) {
+        var layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
+        var shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var shapeData = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+            this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+        var dataIndex = parseInt(id.split('_dataIndex_')[1].split('_')[0], 10);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var 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);
+        }
+    };
+    Maps.prototype.keyDownHandler = function (event) {
+        var 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') {
+            var 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);
+                var textContent = (document.getElementById(this.element.id + '_Paging_Text')).textContent;
+                var 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.
      *
@@ -8171,26 +8393,28 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        this.isResize = true;
+        this.isResize = this.isReset = true;
         var args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
+            currentSize: calculateSize(this),
             maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(function () {
-                _this.unWireEVents();
-                _this.createSVG();
-                _this.refreshing = true;
-                _this.wireEVents();
-                args.currentSize = _this.availableSize;
-                _this.trigger(resize, args);
-                _this.render();
-            }, 500);
+        this.trigger(resize, args);
+        if (!args.cancel) {
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                this.resizeTo = setTimeout(function () {
+                    _this.unWireEVents();
+                    _this.createSVG();
+                    _this.refreshing = true;
+                    _this.wireEVents();
+                    _this.render();
+                }, 500);
+            }
         }
         return false;
     };
@@ -8778,6 +9002,26 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         });
         return isVisible;
     };
+    /**
+     * To find space between the secondary element and svg element.
+     * @private
+     */
+    Maps.prototype.getExtraPosition = function () {
+        var top = 0;
+        var left = 0;
+        var svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            var svgClientRects = svgElement.getClientRects();
+            var mapsClientRects = (getElement(this.element.id + '_Secondary_Element')).getClientRects();
+            if (svgClientRects.length !== 0 && mapsClientRects.length !== 0) {
+                var svgClientRect = svgClientRects[0];
+                var mapsClientRect = mapsClientRects[0];
+                top = svgClientRect.top - mapsClientRect.top;
+                left = svgClientRect.left - mapsClientRect.left;
+            }
+        }
+        return new Point(left, top);
+    };
     /**
      * To find marker visibility
      */
@@ -9154,6 +9398,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To render bubble
+     *
+     * @private
      */
     Bubble.prototype.renderBubble = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -9199,7 +9445,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             var shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue) {
+            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
                 if (layerData[i]['type'] === 'Point') {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
@@ -9330,6 +9576,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
+     *
+     * @private
      */
     Bubble.prototype.bubbleClick = function (e) {
         var target = e.target.id;
@@ -9373,6 +9621,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble move event
+     *
+     * @private
      */
     Bubble.prototype.bubbleMove = function (e) {
         var target = e.target.id;
@@ -9674,6 +9924,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var textType = typeof text === 'number' ? text.toString() : text;
                         trimmedLable = textTrim(width, textType, style);
                         elementSize = measureText(trimmedLable, style);
@@ -9985,7 +10236,14 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
  */
 var Legend = /** @__PURE__ @class */ (function () {
     function Legend(maps) {
+        /**
+         * @private
+         */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.legendTotalRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -10002,12 +10260,27 @@ var Legend = /** @__PURE__ @class */ (function () {
         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();
@@ -10388,6 +10661,11 @@ var Legend = /** @__PURE__ @class */ (function () {
             this.drawLegendItem(this.currentPage);
         }
     };
+    /**
+     * @param {string} page - Specifies the legend page.
+     * @returns {void}
+     * @private
+     */
     Legend.prototype.drawLegendItem = function (page) {
         var map = this.maps;
         var legend = map.legendSettings;
@@ -10395,6 +10673,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
         var textOptions;
         var render = map.renderer;
+        var legendShape = legend.shape;
         if (page >= 0 && page < this.totalPages.length) {
             if (querySelector(this.legendGroup.id, this.maps.element.id)) {
                 remove(querySelector(this.legendGroup.id, this.maps.element.id));
@@ -10406,6 +10685,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                 var shapeBorder = collection['shapeBorder'];
                 var legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                 var legendText = collection['DisplayText'];
+                var pagingArrowPadding = 4;
                 var shape = ((legend.type === 'Markers') ? ((isNullOrUndefined(collection['ImageSrc'])) ?
                     legend.shape : 'Image') : collection['legendShape']);
                 var strokeColor = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
@@ -10415,25 +10695,39 @@ var Legend = /** @__PURE__ @class */ (function () {
                     1 : shapeBorder.width : shapeBorder.width;
                 var shapeId = map.element.id + '_Legend_Shape_Index_' + collection['idIndex'];
                 var textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
-                var shapeLocation = collection['Shape'];
-                var textLocation = collection['Text'];
+                var shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
+                var textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
                 var imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 var renderOptions_1 = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
-                legend.textStyle.color = (legend.textStyle.color !== null) ? legend.textStyle.color :
+                var legendTextStyle = {
+                    fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
+                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color, opacity: legend.textStyle.opacity
+                };
+                legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legend.textStyle.fontFamily = map.themeStyle.fontFamily || legend.textStyle.fontFamily;
-                legend.textStyle.size = map.themeStyle.legendFontSize || legend.textStyle.size;
+                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
-                legendElement.appendChild(drawSymbol(shapeLocation, shape, shapeSize, collection['ImageSrc'], renderOptions_1));
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    var legendShapeData = this.legendCollection[collection['idIndex']].data[0];
+                    var marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
+                    legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
+                }
+                if (legendShape === "Balloon") {
+                    legendElement.appendChild(drawBalloon(map, renderOptions_1, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions_1));
+                }
                 var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
-                    var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legend.textStyle, legendRectSize);
+                    var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                renderTextElement(textOptions, legend.textStyle, legend.textStyle.color, legendElement);
+                renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
                 this.legendGroup.appendChild(legendElement);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
@@ -10445,10 +10739,10 @@ var Legend = /** @__PURE__ @class */ (function () {
                         var pagingFont = legend.textStyle;
                         var pagingTextSize = measureText(pagingText, pagingFont);
                         var leftPageX = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
-                            (width * 2) - spacing;
+                            (width * 2) - (spacing * 2) + (pagingArrowPadding / 2);
                         var rightPageX = (this.legendItemRect.x + this.legendItemRect.width);
+                        var pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2) - pagingArrowPadding;
                         var locY = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
-                        var pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2);
                         pagingGroup = render.createGroup({ id: map.element.id + '_Legend_Paging_Group' });
                         var leftPageElement = render.createGroup({ id: map.element.id + '_Legend_Left_Paging_Group' });
                         var rightPageElement = render.createGroup({ id: map.element.id + '_Legend_Right_Paging_Group' });
@@ -10456,15 +10750,19 @@ var Legend = /** @__PURE__ @class */ (function () {
                             ' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
                         var leftPath = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
                             ' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
-                        var leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', 1, 1, '', leftPath);
+                        var leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         var 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));
+                        var pathEle = render.drawRectangle(leftRectPageOptions);
+                        pathEle.setAttribute('tabindex', ((page + 1) === 1 ? -1 : map.tabIndex + 1).toString());
+                        leftPageElement.appendChild(pathEle);
                         this.wireEvents(leftPageElement);
-                        var rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', 1, 1, '', rightPath);
+                        var 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));
-                        var 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));
+                        var 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);
@@ -11114,7 +11412,10 @@ var Legend = /** @__PURE__ @class */ (function () {
         var map = this.maps;
         var legend = map.legendSettings;
         var legendTitle = legend.title.text;
-        var textStyle = legend.titleStyle;
+        var textStyle = {
+            fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color, opacity: legend.titleStyle.opacity
+        };
         var textOptions;
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -11133,6 +11434,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         map.svgObject.appendChild(this.legendGroup);
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
+            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
             renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
         }
@@ -11198,13 +11500,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                     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);
         }
@@ -11239,21 +11541,25 @@ var Legend = /** @__PURE__ @class */ (function () {
                     }
                     else {
                         newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
-                            shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
+                            shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (_this.maps.legendSettings.useMarkerShape ? marker$$1.shape : _this.maps.legendSettings.shape) });
                         _this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                 }
             });
         });
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Legend.prototype.getMarkerLegendData = function (layerIndex, text, legendFill) {
         var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var legendData = [];
         this.maps.layers[layerIndex].markerSettings.map(function (markerSettings, markerIndex) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                 var marker$$1 = _this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker$$1.legendText] || text === '') && legendFill == data[marker$$1.colorValuePath]) {
+                if ((text === data[marker$$1.legendText] || text === '') && legendFill === data[marker$$1.colorValuePath]) {
                     legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
                         shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
                 }
@@ -11615,7 +11921,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                             shape = this.legendCollection[legendIndex]['data'][i];
                             mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
-                                '_MarkerIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
                                 mapElement = mapElement.children[0];
                             }
@@ -11624,7 +11930,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11639,6 +11945,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', '#E5E5E5');
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#E5E5E5');
                                 }
@@ -11653,6 +11962,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#757575');
                                 }
@@ -11687,7 +11999,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
                                     layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                     layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
-                                    layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                    layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                     layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                         this.maps.layers[j].shapeSettings.opacity :
                                         this.maps.layers[j].shapeSettings.border.opacity).toString());
@@ -11717,7 +12029,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                     this.maps.layers[j].shapeSettings.opacity :
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
-                                layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                 layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                 layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
                                 if (targetEle !== null) {
@@ -11737,7 +12049,7 @@ var Legend = /** @__PURE__ @class */ (function () {
             targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
             targetEle.id.indexOf('_Text') === -1) {
             var LegendInteractive = void 0;
-            var legendIndex = parseFloat(targetEle.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            var legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var mapdata = void 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11758,7 +12070,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
-                                    LegendInteractive.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11822,7 +12134,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
                                     mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapLegendElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -11849,7 +12161,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                mapLegendElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                 mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                     this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -12069,14 +12381,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
                 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);
-                }
-                var 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 {
                 var element = document.getElementsByClassName('highlightMapStyle')[0];
@@ -12100,21 +12405,35 @@ var Highlight = /** @__PURE__ @class */ (function () {
                 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
+    Highlight.prototype.handleHighlight = function (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);
+        }
+        var 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
     Highlight.prototype.mapHighlight = function (targetEle, shapeData, data) {
         var _this = this;
@@ -12125,14 +12444,14 @@ var Highlight = /** @__PURE__ @class */ (function () {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         var border = {
-            color: this.highlightSettings.border.color,
-            width: this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };
         var eventArgs = {
             opacity: this.highlightSettings.opacity,
-            fill: targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
-                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none',
+            fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
+                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
             border: border,
             name: itemHighlight,
             target: targetEle.id,
@@ -12273,24 +12592,31 @@ var Selection = /** @__PURE__ @class */ (function () {
                 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);
-                }
-                var 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
+    Selection.prototype.selectElement = function (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);
+        }
+        var 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
@@ -12315,15 +12641,16 @@ var Selection = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Selection.prototype.selectMap = function (targetElement, shapeData, data) {
         var _this = this;
+        var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
         var selectionsettings = this.selectionsettings;
         var border = {
-            color: this.selectionsettings.border.color,
-            width: this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale),
+            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
+            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
             opacity: this.selectionsettings.border.opacity
         };
         var eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none',
+            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -12346,9 +12673,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                     }
                     if (targetElement.id.indexOf('NavigationIndex') > -1) {
                         var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
-                        var layerIndex = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                        targetElement.setAttribute('stroke-width', _this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
-                        targetElement.setAttribute('stroke', _this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                        var layerIndex_1 = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                        targetElement.setAttribute('stroke-width', _this.maps.layers[layerIndex_1].navigationLineSettings[index].width.toString());
+                        targetElement.setAttribute('stroke', _this.maps.layers[layerIndex_1].navigationLineSettings[index].color);
                     }
                 }
                 else {
@@ -12374,9 +12701,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                         }
                         if (ele.id.indexOf('NavigationIndex') > -1) {
                             var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
-                            var layerIndex = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                            ele.setAttribute('stroke-width', _this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
-                            ele.setAttribute('stroke', _this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                            var layerIndex_2 = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                            ele.setAttribute('stroke-width', _this.maps.layers[layerIndex_2].navigationLineSettings[index].width.toString());
+                            ele.setAttribute('stroke', _this.maps.layers[layerIndex_2].navigationLineSettings[index].color);
                         }
                     }
                     if (!getElement(_this.selectionType + 'selectionMap')) {
@@ -12517,8 +12844,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         if (istooltipRender) {
             if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
-                option.textStyle.fontFamily = this.maps.themeStyle.fontFamily || option.textStyle.fontFamily;
-                option.textStyle.opacity = this.maps.themeStyle.tooltipTextOpacity || option.textStyle.opacity;
                 var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
                     return;
@@ -12635,9 +12960,13 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 option.template = option.template[Object.keys(option.template)[0]];
             }
             templateData = this.setTooltipContent(option, templateData);
+            var tooltipTextStyle = {
+                color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
+                fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
+            };
             var tooltipOption = {
                 location: location, text: tooltipContent, data: templateData,
-                textStyle: option.textStyle,
+                textStyle: tooltipTextStyle,
                 template: option.template
             };
             tooltipArgs = {
@@ -12653,6 +12982,10 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                     _this.maps['isProtectedOnChange'] = true;
                     tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
                         || _this.maps.themeStyle.tooltipFontColor;
+                    tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
+                        || _this.maps.themeStyle.fontFamily;
+                    tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
+                        || _this.maps.themeStyle.tooltipTextOpacity;
                     if (tooltipArgs.cancel) {
                         _this.svgTooltip = new Tooltip({
                             enable: true,
@@ -12935,8 +13268,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
             if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                 document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
             }
+            this.markerLineAnimation(map);
             map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
             var element1 = document.getElementById(this.maps.element.id + '_tiles');
+            var animationDuration = this.maps.layersCollection[0].animationDuration;
             setTimeout(function () {
                 // if (type === 'ZoomOut') {
                 //     element1.removeChild(element1.children[element1.childElementCount - 1]);
@@ -12950,7 +13285,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                     document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                 }
-            }, 250);
+            }, animationDuration);
         }
         this.maps.zoomNotApplied = false;
     };
@@ -13124,11 +13459,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
      */
     Zoom.prototype.animateTransform = function (element, animate$$1, x, y, scale) {
         var duration = this.currentLayer.animationDuration;
-        if (!animate$$1 || duration === 0) {
+        if (!animate$$1 || duration === 0 || this.maps.isTileMap) {
             element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             return;
         }
-        zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        if (!this.maps.isTileMap) {
+            zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        }
     };
     Zoom.prototype.applyTransform = function (animate$$1) {
         var layerIndex;
@@ -13175,12 +13512,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
+                            var markerAnimation = void 0;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 for (var k = 0; k < currentEle.childElementCount; k++) {
                                     this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate$$1);
                                     var layerIndex_1 = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     var dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0;
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     var markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (var x_1 = 0; x_1 < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
@@ -13191,9 +13530,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                             this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if (!this.maps.isTileMap && this.currentLayer.animationDuration > 0) {
-                                        markerStyle = 'visibility:hidden';
-                                        currentEle.setAttribute('style', markerStyle);
+                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (this.maps.isTileMap) {
+                                            var groupElement = document.querySelector('.GroupElement');
+                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
+                                                groupElement.style.display = 'none';
+                                            }
+                                        }
+                                        else {
+                                            markerStyle = 'visibility:hidden';
+                                            currentEle.setAttribute('style', markerStyle);
+                                        }
                                     }
                                 }
                                 if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
@@ -13292,7 +13639,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 this.maps.arrangeTemplate();
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate$$1 || this.currentLayer.animationDuration === 0) {
+                if (!animate$$1 || this.currentLayer.animationDuration === 0 || this.maps.isTileMap) {
                     this.processTemplate(x, y, scale, this.maps);
                 }
             }
@@ -13411,7 +13758,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
      */
     Zoom.prototype.processTemplate = function (x, y, scale, maps) {
         for (var i = 0; i < this.templateCount; i++) {
-            this.currentLayer = maps.layersCollection[i];
             var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             var markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
                 i + '_Markers_Template_Group');
@@ -13642,6 +13988,23 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    Zoom.prototype.markerLineAnimation = function (map) {
+        if (map.isTileMap) {
+            for (var i = 0; i < map.layersCollection.length; i++) {
+                var markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                var lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                if (!isNullOrUndefined(markerTemplateElement)) {
+                    markerTemplateElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(lineElement)) {
+                    lineElement.style.visibility = 'hidden';
+                }
+            }
+        }
+    };
+    /**
+     * @private
+     */
     Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
         var map = this.maps;
         var panArgs;
@@ -13660,6 +14023,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
         yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
         this.maps.mergeCluster();
         if (!map.isTileMap) {
+            var legendElement = document.getElementById(map.element.id + '_Legend_Group');
+            var legendHeight = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
             x = translatePoint.x - xDifference / scale;
             y = translatePoint.y - yDifference / scale;
             var layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
@@ -13667,7 +14032,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                 ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
             var 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
             var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
@@ -13774,41 +14139,45 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
             map.scale = Math.pow(2, tileZoomFactor - 1);
             map.tileZoomLevel = tileZoomFactor;
-            map.zoomSettings.zoomFactor = zoomFactor;
-            var position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
-            this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
-            if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+            if (map.previousScale !== map.scale || map.isReset) {
+                map.zoomSettings.zoomFactor = zoomFactor;
+                var position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
+                this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
+                if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                }
+                this.triggerZoomEvent(prevTilePoint, prevLevel, type);
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+                if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+                }
+                if (document.querySelector('.GroupElement')) {
+                    document.querySelector('.GroupElement').style.display = 'none';
+                }
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                var element1 = document.getElementById(this.maps.element.id + '_tiles');
+                var animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(function () {
+                    _this.applyTransform(true);
+                    if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    }
+                }, animationDuration);
             }
-            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);
-            var element1 = document.getElementById(this.maps.element.id + '_tiles');
-            setTimeout(function () {
-                _this.applyTransform(true);
-                if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
-                }
-            }, 250);
+            this.maps.zoomNotApplied = false;
         }
-        this.maps.zoomNotApplied = false;
     };
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
-            opacity: 0.3
+            opacity: map.theme.toLowerCase() === 'fluentuidark' ? 0.6 : 0.3
         });
         var kitHeight = 16;
         var kitWidth = 16;
@@ -14066,8 +14435,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 x = (size.width - toolBarSize.width) - padding;
                 break;
         }
-        element.style.left = x + 'px';
-        element.style.top = y + 'px';
+        var extraPosition = map.getExtraPosition();
+        element.style.left = x + extraPosition.x + 'px';
+        element.style.top = y + extraPosition.y + 'px';
         var color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         var css = ' .e-maps-toolbar:hover > circle { stroke:' + color + '; } .e-maps-toolbar:hover > path { fill: ' + color + ' ;  stroke: ' + color + '; }' +
             '.e-maps-toolbar:hover { cursor: pointer; } .e-maps-cursor-disable:hover { cursor: not-allowed; } .e-maps-panning:hover { cursor: pointer; } ' +
@@ -14211,14 +14581,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                         }
                     }
                 }
             }
             else {
-                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '0.3');
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                 if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');