@syncfusion/ej2-maps 20.1.55 → 20.2.38

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

@@ -735,6 +735,8 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     const opacity = shapeCustom['opacity'];
     let rectOptions;
     const pathOptions = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
+    size.width = typeof (size.width) === 'string' ? parseInt(size.width, 10) : size.width;
+    size.height = typeof (size.height) === 'string' ? parseInt(size.height, 10) : size.height;
     if (shape === 'Circle') {
         const radius = (size.width + size.height) / 4;
         const circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
@@ -1966,6 +1968,10 @@ function getTranslate(mapObject, layer, animate) {
         }
         else {
             if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                 mapWidth *= scaleFactor;
                 mapHeight *= scaleFactor;
@@ -2015,7 +2021,7 @@ function getTranslate(mapObject, layer, animate) {
                         mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
+                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1 || mapObject.mapScaleValue <= 1.05) && !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)));
@@ -2838,6 +2844,7 @@ function changeBorderWidth(element, index, scale, maps) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             const borderWidth = maps.layersCollection[index].shapeSettings.border.width;
+            const circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2858,8 +2865,8 @@ function changeBorderWidth(element, index, scale, maps) {
                 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());
+            if (element.id.indexOf('_Point') > -1 || element.id.indexOf('_MultiPoint') > -1) {
+                childNode.setAttribute('r', (circleRadius / scale).toString());
             }
         }
     }
@@ -3524,6 +3531,7 @@ function getThemeStyle(theme) {
                 backgroundColor: color,
                 areaBackgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#DADADA',
                 legendTextColor: '#DADADA',
@@ -3543,6 +3551,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#000000',
                 areaBackgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
@@ -3723,6 +3732,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#FFFFFF',
                 areaBackgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontSize: '14px',
                 subTitleFontColor: '#424242',
                 legendTitleFontColor: '#757575',
                 legendTextColor: '#757575',
@@ -4141,7 +4151,7 @@ __decorate$1([
 class SubTitleSettings extends CommonTitleSettings {
 }
 __decorate$1([
-    Complex({ size: Theme.mapsSubTitleFont.size, fontWeight: null }, Font)
+    Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
 ], SubTitleSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('Center')
@@ -4152,7 +4162,7 @@ __decorate$1([
 class TitleSettings extends CommonTitleSettings {
 }
 __decorate$1([
-    Complex({ size: Theme.mapsTitleFont.size, fontWeight: null }, Font)
+    Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
 ], TitleSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('Center')
@@ -4281,7 +4291,7 @@ __decorate$1([
     Property('')
 ], LegendSettings.prototype, "height", void 0);
 __decorate$1([
-    Complex({}, Font)
+    Complex({ fontFamily: null }, Font)
 ], LegendSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property(15)
@@ -4302,7 +4312,7 @@ __decorate$1([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
 __decorate$1([
-    Complex(Theme.legendTitleFont, Font)
+    Complex({ size: Theme.legendTitleFont.size, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: Theme.legendTitleFont.fontWeight, fontFamily: null }, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
 __decorate$1([
     Property('Bottom')
@@ -4545,7 +4555,7 @@ __decorate$1([
     Property('Geometry')
 ], LayerSettings.prototype, "layerType", void 0);
 __decorate$1([
-    Property('https://a.tile.openstreetmap.org/level/tileX/tileY.png')
+    Property('')
 ], LayerSettings.prototype, "urlTemplate", void 0);
 __decorate$1([
     Property(true)
@@ -4702,11 +4712,12 @@ class Marker {
                         if (currentLayer.markerClusterSettings.allowClustering) {
                             this.maps.svgObject.appendChild(this.markerSVGObject);
                             this.maps.element.appendChild(this.maps.svgObject);
-                            if (currentLayer.layerType !== 'OSM' || !this.maps.zoomSettings.enable) {
-                                clusterTemplate(currentLayer, this.markerSVGObject, this.maps, layerIndex, this.markerSVGObject, layerElement, true, false);
+                            if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
+                                && this.maps.zoomSettings.enable) {
+                                layerElement.appendChild(this.markerSVGObject);
                             }
                             else {
-                                layerElement.appendChild(this.markerSVGObject);
+                                clusterTemplate(currentLayer, this.markerSVGObject, this.maps, layerIndex, this.markerSVGObject, layerElement, true, false);
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             this.maps.renderReactTemplates();
@@ -5256,9 +5267,14 @@ class BingMap {
             }
             quadKey = quadKey + '' + digit;
         }
-        const subDomain = subDomains[Math.min(parseInt(quadKey.substr(quadKey.length - 1, 1), 10), subDomains.length)];
-        imageUrl = imageUrl.replace('{quadkey}', quadKey).replace('{subdomain}', subDomain);
-        return imageUrl += '&mkt=' + language + '&ur=IN&Key=' + key;
+        if (!isNullOrUndefined(subDomains)) {
+            const subDomain = subDomains[Math.min(parseInt(quadKey.substr(quadKey.length - 1, 1), 10), subDomains.length)];
+            imageUrl = imageUrl.replace('{quadkey}', quadKey).replace('{subdomain}', subDomain);
+            return imageUrl += '&mkt=' + language + '&ur=IN&Key=' + key;
+        }
+        else {
+            return '';
+        }
     }
 }
 
@@ -5527,8 +5543,7 @@ class LayerPanel {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !isNullOrUndefined(this.mapObject.legendModule) &&
-                    this.mapObject.legendModule.totalPages.length > 0 ? this.mapObject.legendModule.legendTotalRect.height : areaRect.height
+                width: areaRect.width, height: areaRect.height
             }));
         }
         this.layerGroup.appendChild(this.clipRectElement);
@@ -5539,6 +5554,14 @@ class LayerPanel {
             this.currentLayer = layer;
             this.processLayers(layer, index);
         });
+        if (!isNullOrUndefined(this.mapObject.legendModule) && this.mapObject.legendSettings.position === 'Float') {
+            if (this.mapObject.isTileMap) {
+                this.layerGroup.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+            else {
+                this.mapObject.svgObject.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+        }
     }
     /**
      * Tile rendering
@@ -5697,9 +5720,21 @@ class LayerPanel {
         };
         this.mapObject.trigger('layerRendering', eventArgs, (observedArgs) => {
             if (!eventArgs.cancel && eventArgs.visible) {
-                if (layer.layerType !== 'Geometry') {
+                if (layer.layerType === 'OSM') {
+                    layer.urlTemplate = 'https://a.tile.openstreetmap.org/level/tileX/tileY.png';
+                }
+                if (layer.layerType === 'Google') {
+                    layer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
+                }
+                if (layer.layerType !== 'Geometry' || (isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                     if (layer.layerType !== 'Bing' || this.bing) {
-                        this.renderTileLayer(this, layer, layerIndex);
+                        if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
+                            const bing = new BingMap(this.mapObject);
+                            this.bingMapCalculation(layer, layerIndex, this, bing);
+                        }
+                        else {
+                            this.renderTileLayer(this, layer, layerIndex);
+                        }
                     }
                     else if (layer.key && layer.key.length > 1) {
                         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -5768,6 +5803,17 @@ class LayerPanel {
             this.mapObject.baseMapBounds = null;
         }
     }
+    bingMapCalculation(layer, layerIndex, proxy, bing) {
+        bing.imageUrl = layer.urlTemplate;
+        bing.subDomains = ['t0', 't1', 't2', 't3'];
+        bing.maxZoom = '21';
+        proxy.mapObject['bingMap'] = bing;
+        proxy.renderTileLayer(proxy, layer, layerIndex, bing);
+        this.mapObject.arrangeTemplate();
+        if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
+            this.mapObject.zoomModule.applyTransform(true);
+        }
+    }
     bubbleCalculation(bubbleSettings, range) {
         if (bubbleSettings.dataSource != null && bubbleSettings != null) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5959,60 +6005,66 @@ class LayerPanel {
                             }
                             break;
                         case 'LineString':
-                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            currentShapeData.map((lineData) => {
-                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                            currentShapeData.map((lineData, index) => {
+                                if (index === 0) {
+                                    path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                }
+                                else {
+                                    path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                }
                             });
                             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);
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = this.mapObject.renderer.drawPath(pathOptions);
+                            }
+                            break;
+                        case 'MultiLineString':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map((multilineData) => {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                multilineData.map((lineData, index) => {
+                                    if (index === 0) {
+                                        path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                    }
+                                    else {
+                                        path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                    }
+                                });
+                            });
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                 pathEle = this.mapObject.renderer.drawPath(pathOptions);
                             }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const pointData = currentShapeData['point'];
-                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / this.currentFactor;
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
+                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                             break;
+                        case 'MultiPoint':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map((multiPointData, index) => {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                const pointData = multiPointData['point'];
+                                const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
+                                circleOptions = new CircleOption((shapeID + "_multiLine_" + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
+                                pathEle = this.mapObject.renderer.drawCircle(circleOptions);
+                                this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
+                            });
+                            break;
                         case 'Path':
                             path = currentShapeData['point'];
                             pathOptions = new PathOption(shapeID, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                             pathEle = this.mapObject.renderer.drawPath(pathOptions);
                             break;
                     }
-                    if (!isNullOrUndefined(pathEle)) {
-                        const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
-                            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
-                        let properties;
-                        for (let j = 0; j < property.length; j++) {
-                            if (!isNullOrUndefined(currentShapeData['property'])) {
-                                properties = property[j];
-                                break;
-                            }
-                        }
-                        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
-                            (currentShapeData['property'][properties]) : ''));
-                        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 3).toString());
-                        if (drawingType === 'LineString') {
-                            pathEle.setAttribute('style', 'outline:none');
-                        }
-                        maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-                        if (this.mapObject.toggledShapeElementId) {
-                            for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
-                                const styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
-                                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
-                                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
-                                    pathEle.setAttribute('fill', styleProperty.fill);
-                                    pathEle.setAttribute('stroke', styleProperty.border.color);
-                                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
-                                }
-                            }
-                        }
-                        groupElement.appendChild(pathEle);
+                    if (!isNullOrUndefined(pathEle) && drawingType !== 'MultiPoint') {
+                        this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
                     }
                     if (i === this.currentLayer.layerData.length - 1) {
                         this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
@@ -6026,6 +6078,49 @@ class LayerPanel {
             this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
         }
     }
+    /**
+     * layer features as bubble, marker, datalabel, navigation line.
+     *
+     * @param {groupElement} Element - Specifies the element to append the group
+     * @param {pathEle} Element - Specifies the svg element
+     * @param {drawingType} string - Specifies the data type
+     * @param {currentShapeData} any - Specifies the layer of shapedata.
+     * @param {index} number - Specifies the tab index.
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, index) {
+        const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
+            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
+        let properties;
+        for (let j = 0; j < property.length; j++) {
+            if (!isNullOrUndefined(currentShapeData['property'])) {
+                properties = property[j];
+                break;
+            }
+        }
+        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
+            (currentShapeData['property'][properties]) : ''));
+        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
+            pathEle.setAttribute('style', 'outline:none');
+        }
+        maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
+        if (this.mapObject.toggledShapeElementId) {
+            for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
+                const styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
+                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
+                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
+                    pathEle.setAttribute('fill', styleProperty.fill);
+                    pathEle.setAttribute('stroke', styleProperty.border.color);
+                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
+                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
+                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
+                }
+            }
+        }
+        groupElement.appendChild(pathEle);
+    }
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
@@ -6207,7 +6302,8 @@ class LayerPanel {
                 break;
             case 'linestring':
                 const extraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1;
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((points, index) => {
                     latitude = points[1];
@@ -6222,31 +6318,61 @@ class LayerPanel {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            case 'point': {
-                let arrayCollections = false;
-                const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
+            case 'multilinestring':
+                const extraSpaces = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                const multiLineData = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map((points, index) => {
-                    if (Object.prototype.toString.call(points) === '[object Array]') {
+                coordinates.map((multiPoints) => {
+                    newData = [];
+                    multiPoints.map((points) => {
                         latitude = points[1];
                         longitude = points[0];
-                        arrayCollections = true;
                         const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                        this.currentLayer.layerData.push({
-                            point: point, type: type, lat: latitude, lng: longitude, property: properties
+                        this.calculateBox(point, extraSpaces);
+                        newData.push({
+                            point: point, lat: latitude, lng: longitude
                         });
-                    }
+                    });
+                    multiLineData.push(newData);
+                });
+                multiLineData['property'] = properties;
+                multiLineData['type'] = type;
+                this.currentLayer.layerData.push(multiLineData);
+                break;
+            case 'point':
+                const pointExtraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                latitude = coordinates[1];
+                longitude = coordinates[0];
+                const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                this.calculateBox(point, pointExtraSpace);
+                this.currentLayer.layerData.push({
+                    point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
-                if (!arrayCollections) {
-                    latitude = coordinates[1];
-                    longitude = coordinates[0];
+                break;
+            case 'multipoint': {
+                const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                newData = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                coordinates.map((points) => {
+                    latitude = points[1];
+                    longitude = points[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
                     this.calculateBox(point, extraSpace);
-                    this.currentLayer.layerData.push({
-                        point: point, type: type, lat: latitude, lng: longitude, property: properties
+                    newData.push({
+                        point: point, lat: latitude, lng: longitude
                     });
-                }
+                });
+                newData['property'] = properties;
+                newData['type'] = type;
+                this.currentLayer.layerData.push(newData);
                 break;
             }
             case 'path':
@@ -6258,12 +6384,12 @@ class LayerPanel {
     }
     calculateBox(point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
         }
         else {
-            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
             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']['x'] = Math.max(this.rectBounds['max']['x'], point.x + extraSpace);
             this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
         }
     }
@@ -6281,6 +6407,10 @@ class LayerPanel {
             const end = convertGeoToPoint(bounds.latitude.max, bounds.longitude.max, null, layer, this.mapObject);
             mapHeight = end.y - start.y;
             mapWidth = end.x - start.x;
+            if (mapHeight === 0 || mapWidth === 0) {
+                mapWidth = mapSize.width / 2;
+                mapHeight = mapSize.height;
+            }
         }
         else {
             mapHeight = mapWidth = 500;
@@ -6374,15 +6504,28 @@ class LayerPanel {
                             this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'multilinestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map((multiPoint, index) => {
+                            multiPoint.map((point, index) => {
+                                this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
+                            });
+                        });
+                        break;
                     case 'linestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map((point, index) => {
-                            this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                            this.calculateRectBox(point, 'linestring', index === 0 ? true : false);
                         });
                         break;
                     case 'point':
                         this.calculateRectBox(coordinates, 'point');
                         break;
+                    case 'multipoint':
+                        coordinates.map((point, index) => {
+                            this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
+                        });
+                        break;
                 }
             }
         });
@@ -6419,7 +6562,7 @@ class LayerPanel {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateRectBox(coordinates, type, isFirstItem) {
-        if (type !== 'LineString' && type !== 'point') {
+        if ((type !== 'linestring' && type !== 'multilinestring') && (type !== 'point' && type !== 'multipoint')) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(coordinates, (currentCoords) => {
                 if (isNullOrUndefined(this.mapObject.baseMapBounds)) {
@@ -6488,7 +6631,7 @@ class LayerPanel {
                         const tile = new Tile(tileI % ycount, j);
                         tile.left = x;
                         tile.top = y;
-                        if (baseLayer.layerType === 'Bing') {
+                        if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             const key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                         }
@@ -6516,10 +6659,12 @@ class LayerPanel {
             if (!(layer.type === 'SubLayer' && layer.visible)) {
                 continue;
             }
-            if (layer.layerType === 'OSM' || layer.layerType === 'Bing') {
+            if ((layer.layerType !== 'Geometry' && layer.layerType !== 'GoogleStaticMap') || (layer.layerType === 'Geometry' &&
+                isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                 for (const baseTile of proxTiles) {
                     const subtile = extend({}, baseTile, {}, true);
                     if (layer.layerType === 'Bing') {
+                        bing = new BingMap(this.mapObject);
                         subtile.src = bing.getBingMap(subtile, layer.key, layer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                     }
                     else {
@@ -6578,6 +6723,8 @@ class LayerPanel {
                 let id = 0;
                 for (const tile of this.tiles) {
                     const imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
                     const mapId = this.mapObject.element.id;
                     imgElement.onload = () => {
@@ -7195,16 +7342,7 @@ let Maps = class Maps extends Component {
     }
     renderMap() {
         if (this.legendModule && this.legendSettings.visible) {
-            if (!this.isTileMap) {
-                this.legendModule.renderLegend();
-            }
-            else {
-                const layerCount = this.layersCollection.length - 1;
-                if (!this.layersCollection[layerCount].isBaseLayer) {
-                    this.isTileMapSubLayer = true;
-                    this.legendModule.renderLegend();
-                }
-            }
+            this.legendModule.renderLegend();
         }
         this.createTile();
         if (this.zoomSettings.enable && this.zoomModule) {
@@ -7287,12 +7425,16 @@ let Maps = class Maps extends Component {
                 bottom = svg.bottom - tile.bottom - element.offsetTop;
                 top = parseFloat(tileElement.style.top) + element.offsetTop;
             }
-            top = (bottom <= 11) ? top : (top * 2);
-            left = (bottom <= 11) ? left : (left * 2);
+            top = (bottom <= 11) ? top : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top * 2);
+            left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top + 'px';
             tileElement.style.left = left + 'px';
             tileElement1.style.top = top + 'px';
             tileElement1.style.left = left + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.height = tileElement1.style.height = this.legendModule.legendTotalRect.height + 'px';
+                tileElement.style.width = tileElement1.style.width = this.legendModule.legendTotalRect.width + 'px';
+            }
         }
         this.arrangeTemplate();
         if (this.annotationsModule) {
@@ -7418,12 +7560,21 @@ let Maps = class Maps extends Component {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            const tileRect = getElementByID(this.element.id + '_tile_parent').getBoundingClientRect();
-            const tileSvgRect = getElementByID(this.element.id + '_Tile_SVG').getBoundingClientRect();
+            let tileElement = getElementByID(this.element.id + '_tile_parent');
+            let tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            const tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
+            const tileRect = tileElement.getBoundingClientRect();
+            const tileSvgRect = tileSvgElement.getBoundingClientRect();
             left = (tileRect.left - tileSvgRect.left);
             top = (tileRect.top - tileSvgRect.top);
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.left = left + 'px';
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.top = top + 'px';
+            tileSvgParentElement.style.left = left + 'px';
+            tileSvgParentElement.style.top = top + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
+                tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
+            }
             const markerTemplateElements = document.getElementsByClassName('template');
             if (!isNullOrUndefined(markerTemplateElements) && markerTemplateElements.length > 0) {
                 for (let i = 0; i < markerTemplateElements.length; i++) {
@@ -7441,7 +7592,7 @@ let Maps = class Maps extends Component {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (let i = 0; i < elements.childNodes.length; i++) {
                     const childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g') {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
                         const layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (let j = 0; j < childElement.childNodes.length; j++) {
                             const childNode = childElement.childNodes[j];
@@ -7478,7 +7629,7 @@ let Maps = class Maps extends Component {
         }
         const templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
-            getElementByID(this.element.id + '_Layer_Collections') && this.layers[this.layers.length - 1].layerType !== 'OSM') {
+            getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
             for (let i = 0; i < templateElements.length; i++) {
                 let offSetLetValue = 0;
                 let offSetTopValue = 0;
@@ -7513,10 +7664,7 @@ let Maps = class Maps extends Component {
         const mainLayer = this.layersCollection[0];
         const padding = 0;
         if (mainLayer.isBaseLayer && (mainLayer.layerType === 'OSM' || mainLayer.layerType === 'Bing' ||
-            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google')) {
-            if (mainLayer.layerType === 'Google') {
-                mainLayer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
-            }
+            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google' || (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== ''))) {
             removeElement(this.element.id + '_tile_parent');
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
@@ -7563,7 +7711,7 @@ let Maps = class Maps extends Component {
             const baseLayer = mainLayers[i];
             if (baseLayer.visible && baseIndex === i) {
                 baseLayer.isBaseLayer = true;
-                this.isTileMap = (baseLayer.layerType === 'Geometry') ? false : true;
+                this.isTileMap = (baseLayer.layerType === 'Geometry' && !isNullOrUndefined(baseLayer.shapeData)) ? false : true;
                 this.layersCollection.push(baseLayer);
                 break;
             }
@@ -7610,12 +7758,19 @@ let Maps = class Maps extends Component {
      * @private
      */
     renderTitle(title, type, bounds, groupEle) {
-        const style = title.textStyle;
+        const style = {
+            size: title.textStyle.size,
+            color: title.textStyle.color,
+            fontFamily: title.textStyle.fontFamily,
+            fontWeight: title.textStyle.fontWeight,
+            fontStyle: title.textStyle.fontStyle,
+            opacity: title.textStyle.opacity
+        };
         let height;
         const width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
-        style.fontFamily = this.themeStyle.fontFamily || style.fontFamily;
+        style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
         style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
-        style.size = this.themeStyle.titleFontSize || style.size;
+        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || Theme.mapsSubTitleFont.size);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
@@ -7785,6 +7940,7 @@ let Maps = class Maps extends Component {
             const id = event.target['id'];
             event.preventDefault();
             if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
+                this.mapAreaRect = this.legendModule.initialMapAreaRect;
                 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' });
@@ -7979,7 +8135,7 @@ let Maps = class Maps extends Component {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -8133,7 +8289,7 @@ let Maps = class Maps extends Component {
             removeElement(this.element.id + '_EJ2_LegendTitle_Tooltip');
         }
         if ((targetId === (this.element.id + '_Map_title')) && (event.target.textContent.indexOf('...') > -1)) {
-            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
+            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size || this.themeStyle.titleFontSize, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
         }
         else {
             removeElement(this.element.id + '_EJ2_Title_Tooltip');
@@ -8167,6 +8323,7 @@ let Maps = class Maps extends Component {
                     this.refreshing = true;
                     this.wireEVents();
                     this.render();
+                    this.refreshing = false;
                 }, 500);
             }
         }
@@ -8561,7 +8718,8 @@ let Maps = class Maps extends Component {
                             if (!isNullOrUndefined(newProp.layers[x])) {
                                 const collection = Object.keys(newProp.layers[x]);
                                 for (const collectionProp of collection) {
-                                    if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
+                                    if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') || (isNullOrUndefined(this.layers[x].shapeData)
+                                        && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
                                         this.isReset = true;
                                     }
                                     else if (collectionProp === 'markerSettings') {
@@ -8841,6 +8999,28 @@ let Maps = class Maps extends Component {
         }
         return null;
     }
+    /**
+     * This method is used to get the Bing maps URL.
+     *
+     * @param {string} url - Specifies the URL of the maps.
+     * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
+     */
+    getBingUrlTemplate(url) {
+        const promise = new Promise((resolve, reject) => {
+            const ajax = new Ajax({
+                url: url
+            });
+            ajax.onSuccess = (json) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const jsonObject = JSON.parse(json);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const resource = jsonObject['resourceSets'][0]['resources'][0];
+                resolve(resource['imageUrl']);
+            };
+            ajax.send();
+        });
+        return promise;
+    }
     /**
      * To find visibility of layers and markers for required modules load.
      *
@@ -9184,12 +9364,8 @@ class Bubble {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             const shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
-                if (layerData[i]['type'] === 'Point') {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    shapePoints.push(this.getPoints(layerData[i], []));
-                }
-                else if (!layerData[i]['_isMultiPolygon']) {
+            if (shapeDataLayerPathValue === shapePathValue && (layerData[i].type !== 'LineString' && layerData[i].type !== 'MultiLineString' && layerData[i]['type'] !== 'Point' && layerData[i]['type'] !== 'MultiPoint')) {
+                if (!layerData[i]['_isMultiPolygon']) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
                     currentLength = shapePoints[shapePoints.length - 1].length;
@@ -9512,7 +9688,7 @@ class DataLabel {
         layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
         if (!isNullOrUndefined(shapes['property'])) {
             shapePoint = [[]];
-            if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point') {
+            if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 shapePoint.push(this.getPoint(layerData[index], []));
                 currentLength = shapePoint[shapePoint.length - 1].length;
@@ -9521,21 +9697,9 @@ class DataLabel {
                     midIndex = shapePoint.length - 1;
                 }
             }
-            else {
+            else if (layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const layer = layerData[index];
-                if (layer['type'] === 'Point') {
-                    isPoint = true;
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const layerPoints = [];
-                    layerPoints.push(this.getPoint(layerData, []));
-                    shapePoint = layerPoints;
-                    currentLength = shapePoint[shapePoint.length - 1].length;
-                    if (pointsLength < currentLength) {
-                        pointsLength = currentLength;
-                        midIndex = shapePoint.length - 1;
-                    }
-                }
                 for (let j = 0; j < layer.length; j++) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoint.push(this.getPoint(layer[j], []));
@@ -9780,10 +9944,21 @@ class DataLabel {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getPoint(shapes, points) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        shapes.map((current, index) => {
-            points.push(new Point(current['point']['x'], current['point']['y']));
-        });
+        if (shapes['type'] === 'MultiLineString') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map((current) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                current.map((shape) => {
+                    points.push(new Point(shape['point']['x'], shape['point']['y']));
+                });
+            });
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map((current, index) => {
+                points.push(new Point(current['point']['x'], current['point']['y']));
+            });
+        }
         return points;
     }
     /**
@@ -9975,6 +10150,10 @@ class Legend {
          * @private
          */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.initialMapAreaRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -10033,6 +10212,7 @@ class Legend {
         this.heightIncrement = 0;
         this.defsElement = this.maps.renderer.createDefs();
         this.maps.svgObject.appendChild(this.defsElement);
+        this.initialMapAreaRect = this.maps.mapAreaRect;
         this.calculateLegendBounds();
         this.drawLegend();
     }
@@ -10070,9 +10250,9 @@ class Legend {
                         }
                     }
                 }
-                else {
-                    this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
-                }
+            }
+            if (legend.type === 'Markers') {
+                this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
             }
         });
         if (this.legendCollection.length > 0) {
@@ -10263,8 +10443,9 @@ class Legend {
                                 }
                             }
                             else {
+                                let padding = 10;
                                 shapeX = shapeLocation[j - 1].x;
-                                shapeY = prevPositionY + topPadding + (shapeHeight / 2);
+                                shapeY = prevPositionY + padding + (shapeHeight / 2);
                             }
                         }
                     }
@@ -10367,7 +10548,14 @@ class Legend {
         const legend = map.legendSettings;
         const render = map.renderer;
         let textOptions;
-        const textFont = legend.textStyle;
+        const textFont = {
+            size: legend.textStyle.size,
+            color: legend.textStyle.color,
+            fontFamily: legend.textStyle.fontFamily,
+            fontWeight: legend.textStyle.fontWeight,
+            fontStyle: legend.textStyle.fontStyle,
+            opacity: legend.textStyle.opacity
+        };
         this.legendGroup = render.createGroup({ id: map.element.id + '_Legend_Group' });
         if (legend.mode === 'Interactive') {
             for (let i = 0; i < this.legendRenderingCollections.length; i++) {
@@ -10383,7 +10571,7 @@ class Legend {
                 textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
                 const rectOptions = new RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
-                textFont.fontFamily = map.themeStyle.fontFamily || textFont.fontFamily;
+                textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                 textFont.size = map.themeStyle.legendFontSize || textFont.size;
                 renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
                 this.legendGroup.appendChild(render.drawRectangle(rectOptions));
@@ -10438,7 +10626,7 @@ class Legend {
                 };
                 legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily : this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -10514,7 +10702,9 @@ class Legend {
                             'opacity': 1,
                             'dominant-baseline': ''
                         };
-                        pagingGroup.appendChild(render.createText(pageTextOptions, pagingText));
+                        let pagingTextElement = render.createText(pageTextOptions, pagingText);
+                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
                     this.legendToggle();
@@ -10526,6 +10716,7 @@ class Legend {
         let shapeIndex;
         let layerIndex;
         let dataIndex;
+        let pointIndex;
         const legend = this.maps.legendSettings;
         const textEle = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
             document.getElementById(targetElement.id + '_Text');
@@ -10613,12 +10804,20 @@ class Legend {
                     }
                     if (enable) {
                         for (let j = 0; j < data.length; j++) {
+                            let shapeElement;
                             shapeIndex = data[j]['shapeIndex'];
                             layerIndex = data[j]['layerIndex'];
                             dataIndex = data[j]['dataIndex'];
-                            const shapeEle = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
-                            if (shapeEle !== null) {
+                            pointIndex = data[j]['pointIndex'];
+                            if (pointIndex === -1) {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                            }
+                            else {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                            }
+                            if (shapeElement !== null) {
                                 let shapeMatch = true;
                                 if (this.maps.legendSelectionCollection !== null) {
                                     for (let i = 0; i < this.maps.legendSelectionCollection.length; i++) {
@@ -10635,13 +10834,13 @@ class Legend {
                                     }
                                     length = this.legendHighlightCollection.length;
                                     const legendHighlightColor = this.legendHighlightCollection[length - 1]['legendOldFill'];
-                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     const shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
-                                    const shapeOldFillColor = shapeEle.getAttribute('fill');
+                                    const shapeOldFillColor = shapeElement.getAttribute('fill');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
                                     const shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
                                     this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
-                                    this.setColor(shapeEle, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                     this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                 }
                                 else if (value === 'selection') {
@@ -10664,12 +10863,12 @@ class Legend {
                                     }
                                     selectLength = this.maps.legendSelectionCollection.length;
                                     const legendSelectionColor = this.maps.legendSelectionCollection[selectLength - 1]['legendOldFill'];
-                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     this.maps.legendSelectionCollection[selectLength - 1]['shapeOldFillColor'] = this.shapePreviousColor;
                                     this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    this.setColor(shapeEle, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    if (this.maps.selectedElementId.indexOf(shapeEle.getAttribute('id')) === -1) {
-                                        this.maps.selectedElementId.push(shapeEle.getAttribute('id'));
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
+                                    if (this.maps.selectedElementId.indexOf(shapeElement.getAttribute('id')) === -1) {
+                                        this.maps.selectedElementId.push(shapeElement.getAttribute('id'));
                                     }
                                     if (j === data.length - 1) {
                                         this.maps.legendSelection = false;
@@ -10684,14 +10883,15 @@ class Legend {
         }
     }
     setColor(element, fill, opacity, borderColor, borderWidth, type) {
+        const isLineStringShape = (element.parentElement.id.indexOf('LineString') > -1);
         if (type === 'selection') {
-            maintainStyleClass('ShapeselectionMap', 'ShapeselectionMapStyle', fill, opacity, borderColor, borderWidth, this.maps);
-            element.setAttribute('class', 'ShapeselectionMapStyle');
+            maintainStyleClass((isLineStringShape ? 'LineselectionMap' : 'ShapeselectionMap'), (isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle'), (isLineStringShape ? 'transparent' : fill), opacity, (isLineStringShape ? fill : borderColor), borderWidth, this.maps);
+            element.setAttribute('class', isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle');
         }
         else {
-            element.setAttribute('fill', fill);
+            element.setAttribute('fill', isLineStringShape ? 'transparent' : fill);
             element.setAttribute('fill-opacity', opacity);
-            element.setAttribute('stroke', borderColor);
+            element.setAttribute('stroke', isLineStringShape ? fill : borderColor);
             element.setAttribute('stroke-width', (Number(borderWidth) / this.maps.scale).toString());
         }
     }
@@ -10734,7 +10934,8 @@ class Legend {
             const dataCount = shapeElements.length;
             for (let j = 0; j < dataCount; j++) {
                 const shapeElement = getElement(shapeElements[j]);
-                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle' ||
+                    shapeElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(shapeElement);
                     const selectedElementIdIndex = this.maps.selectedElementId.indexOf(shapeElement.id);
                     if (selectedElementIdIndex !== -1) {
@@ -10812,12 +11013,14 @@ class Legend {
                         this.maps.legendSelectionClass = module;
                     }
                     else {
-                        if ((checkSelection <= 1) && targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                        if ((checkSelection <= 1) && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                            || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                             if (!this.maps.layers[layerIndex].selectionSettings.enableMultiSelect) {
                                 this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                             }
                             else {
-                                if (checkSelection <= 1 && targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                                if (checkSelection <= 1 && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                                    || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                                     this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                                 }
                             }
@@ -10904,7 +11107,8 @@ class Legend {
                             }
                         }
                     }
-                    if (selectionEle && (selectionEle['IsSelected'] && targetElement.getAttribute('class') === 'ShapeselectionMapStyle')) {
+                    if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                        || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         let multiSelection = 0;
@@ -10995,7 +11199,7 @@ class Legend {
         }
         for (let j = 0; j < this.maps.selectedLegendElementId.length; j++) {
             const idIndex = this.maps.legendSettings.mode === 'Interactive' ?
-                'container_Legend_Index_' : 'container_Legend_Shape_Index_';
+                this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
             const selectedElement = idIndex + this.maps.selectedLegendElementId[j];
             const legendElement = document.getElementById(selectedElement);
             if (!isNullOrUndefined(legendElement)) {
@@ -11047,6 +11251,7 @@ class Legend {
         let shapeIndex;
         let layerIndex;
         let dataIndex;
+        let pointIndex;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const collection = this.maps.legendModule.legendCollection;
         const legend = this.maps.legendSettings;
@@ -11059,15 +11264,23 @@ class Legend {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const currentElement = { Elements: [] };
             for (let j = 0; j < data.length; j++) {
+                let shapeElement;
                 shapeIndex = data[j]['shapeIndex'];
                 layerIndex = data[j]['layerIndex'];
                 dataIndex = data[j]['dataIndex'];
-                const shapeEle = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
-                if (targetElement === shapeEle) {
+                pointIndex = data[j]['pointIndex'];
+                if (pointIndex === -1) {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                }
+                else {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                }
+                if (targetElement === shapeElement) {
                     process = true;
                 }
-                elements.push(shapeEle);
+                elements.push(shapeElement);
             }
             if (process) {
                 if (isNullOrUndefined(currentElement['LegendEle'])) {
@@ -11085,16 +11298,25 @@ class Legend {
         let shapeIndex;
         let layerIndex;
         let dataIndex;
+        let pointIndex;
         const idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const data = this.maps.legendModule.legendCollection[idIndex]['data'];
         const legendShapeElements = [];
         for (let i = 0; i < data.length; i++) {
+            let shapeElement;
             shapeIndex = data[i]['shapeIndex'];
             layerIndex = data[i]['layerIndex'];
             dataIndex = data[i]['dataIndex'];
-            const shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            pointIndex = data[i]['pointIndex'];
+            if (pointIndex === -1) {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            }
+            else {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+            }
             if (!isNullOrUndefined(shapeElement)) {
                 legendShapeElements.push(shapeElement.id);
             }
@@ -11162,9 +11384,11 @@ class Legend {
         const renderOptions = new RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
         this.legendGroup.appendChild(map.renderer.drawRectangle(renderOptions));
         this.getLegendAlignment(map, this.legendBorderRect.width, this.legendBorderRect.height, legend);
-        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-(this.legendBorderRect.x))) + ' ' +
+        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-this.legendBorderRect.x)) + ' ' +
             (this.translate.y + (-(this.legendBorderRect.y))) + ' )');
-        map.svgObject.appendChild(this.legendGroup);
+        if (legend.position !== 'Float') {
+            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;
@@ -11176,7 +11400,16 @@ class Legend {
         this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
             (this.currentPage + 1);
         this.legendGroup = this.maps.renderer.createGroup({ id: this.maps.element.id + '_Legend_Group' });
+        this.maps.mapAreaRect = this.initialMapAreaRect;
         this.drawLegendItem(this.currentPage);
+        if (!isNullOrUndefined(this.maps.legendModule) && this.maps.legendSettings.position === 'Float') {
+            if (this.maps.isTileMap) {
+                this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.legendModule.legendGroup);
+            }
+            else {
+                this.maps.svgObject.appendChild(this.maps.legendModule.legendGroup);
+            }
+        }
         if (querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id)) {
             querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id).style.pointerEvents = 'none';
         }
@@ -11194,53 +11427,60 @@ class Legend {
         const areaWidth = totalRect.width;
         const totalWidth = map.availableSize.width;
         const totalHeight = map.availableSize.height;
+        const locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
+        const locationY = !isNullOrUndefined(legend.location.y) ? legend.location.y : 0;
         if (legend.position === 'Float') {
-            this.translate = legend.location;
+            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) : new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
+            this.legendTotalRect = map.mapAreaRect;
         }
         else {
             switch (legend.position) {
                 case 'Top':
                 case 'Bottom':
-                    totalRect.height = (areaHeight - height);
+                    totalRect.height = (legend.position === 'Top') ? (areaHeight - height) : (areaHeight - height - (spacing * 2));
                     x = (totalWidth / 2) - (width / 2);
                     y = (legend.position === 'Top') ? areaY : (areaY + totalRect.height);
-                    totalRect.y = (legend.position === 'Top') ? areaY + height + spacing : areaY;
+                    totalRect.y = (legend.position === 'Top') ? areaY + height + (map.isTileMap ? (spacing / 2) : spacing) : areaY - (spacing / 2);
                     break;
                 case 'Left':
                 case 'Right':
-                    totalRect.width = (areaWidth - width);
-                    x = (legend.position === 'Left') ? areaX : (areaX + totalRect.width) - spacing;
+                    totalRect.width = (areaWidth - width - map.mapAreaRect.x);
+                    x = (legend.position === 'Left') ? areaX + (spacing / 2) : (areaX + totalRect.width + spacing);
                     y = (totalHeight / 2) - (height / 2);
-                    totalRect.x = (legend.position === 'Left') ? areaX + width : areaX;
+                    totalRect.x = (legend.position === 'Left') ? areaX + width + spacing : areaX;
                     break;
             }
             switch (legend.alignment) {
                 case 'Near':
                     if (legend.position === 'Top' || legend.position === 'Bottom') {
-                        x = totalRect.x;
+                        x = totalRect.x - (legend.mode === 'Interactive' ? spacing : 0);
                     }
                     else {
-                        y = totalRect.y;
+                        y = totalRect.y - (!(legend.height && legend.width) && legend.mode === 'Interactive' ? map.mapAreaRect.x : 0);
                     }
                     break;
                 case 'Far':
                     if (legend.position === 'Top' || legend.position === 'Bottom') {
-                        x = (totalWidth - width) - spacing;
+                        x = (totalWidth - width) - (legend.mode === 'Interactive' ? 0 : spacing);
                     }
                     else {
-                        y = totalHeight - height;
+                        y = totalHeight - height - (legend.mode === 'Default' ? spacing : 0);
                     }
                     break;
             }
             if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
-                this.legendTotalRect = map.totalRect = totalRect;
+                this.legendTotalRect = map.mapAreaRect = map.totalRect = totalRect;
             }
             else {
+                map.totalRect = null;
                 if ((legend.height || legend.width) && legend.mode === 'Interactive') {
                     map.totalRect = totalRect;
                 }
                 this.legendTotalRect = map.mapAreaRect = totalRect;
             }
+            if (legend.position === 'Left') {
+                map.mapAreaRect.width = totalRect.width;
+            }
             this.translate = new Point(x, y);
         }
     }
@@ -11361,6 +11601,13 @@ class Legend {
                     borderColor: legend.shapeBorder.color, borderWidth: legend.shapeBorder.width
                 });
             }
+            else {
+                for (let i = 0; i < this.legendCollection.length; i++) {
+                    if (this.legendCollection[i]['text'] === legendText && this.legendCollection[i]['fill'] === legendFill) {
+                        this.legendCollection[i].data.push(newColllection[0]);
+                    }
+                }
+            }
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11555,15 +11802,16 @@ class Legend {
         const width = 10;
         const direction = (legend.orientation === 'None') ? (legend.position === 'Top' || legend.position === 'Bottom')
             ? 'Horizontal' : 'Vertical' : legend.orientation;
+        rect.y = legend.position === 'Float' && this.maps.isTileMap ? rect.y - this.maps.mapAreaRect.y : rect.y;
         if (direction === 'Horizontal') {
             if (!legend.invertedPointer) {
-                locX = rect.x + (rect.width / 2);
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y;
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                     ' L ' + (locX + width) + ' ' + (locY - height) + ' Z ';
             }
             else {
-                locX = rect.x + (rect.width / 2);
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY + height) +
                     ' L ' + (locX + width) + ' ' + (locY + height) + ' Z ';
@@ -11571,20 +11819,25 @@ class Legend {
         }
         else {
             if (!legend.invertedPointer) {
-                locX = rect.x + (rect.width);
+                locX = rect.x + rect.width - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height / 2);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX + width) + ' ' + (locY - height) +
                     ' L ' + (locX + width) + ' ' + (locY + height) + ' z ';
             }
             else {
-                locX = rect.x;
+                locX = rect.x - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height / 2);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                     ' L ' + (locX - width) + ' ' + (locY + height) + ' z ';
             }
         }
         const pathOptions = new PathOption(id, fill, strokeWidth, stroke, 1, 1, '', path);
-        this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
+        if (legend.position === 'Float' && this.maps.isTileMap) {
+            this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.renderer.drawPath(pathOptions));
+        }
+        else {
+            this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
+        }
     }
     wireEvents(element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -11945,10 +12198,20 @@ class Legend {
                 const shapeDataValueCase = !isNullOrUndefined(shapeData['properties'][shapePath])
                     && isNaN(shapeData['properties'][shapePath]) ? shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
-                    legendData.push({
-                        layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
-                        name: data[dataPath], value: value
-                    });
+                    if (shapeData['geometry']['type'] != 'MultiPoint') {
+                        legendData.push({
+                            layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                            name: data[dataPath], value: value, pointIndex: -1
+                        });
+                    }
+                    else {
+                        for (let j = 0; j < shapeData['geometry'].coordinates.length; j++) {
+                            legendData.push({
+                                layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                                name: data[dataPath], value: value, pointIndex: j
+                            });
+                        }
+                    }
                 }
             }
         }
@@ -12059,7 +12322,8 @@ class Highlight {
             targetEle.getAttribute('class') !== 'ShapeselectionMapStyle' && !isTouch &&
             targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
-            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle') {
+            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
             layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let shapeData;
@@ -12069,8 +12333,9 @@ class Highlight {
             let dataIndex;
             if (targetEle.id.indexOf('shapeIndex') > -1) {
                 shapeIn = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features'] ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIn]['properties'] : null;
+                shapeData = this.maps.layers[layerIndex].shapeData['features'] &&
+                    !isNullOrUndefined(this.maps.layersCollection[layerIndex].layerData[shapeIn]) ?
+                    this.maps.layersCollection[layerIndex].layerData[shapeIn]['property'] : null;
                 dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.highlightSettings = this.maps.layers[layerIndex].highlightSettings;
@@ -12142,7 +12407,8 @@ class Highlight {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleHighlight(targetElement, layerIndex, data, shapeData) {
-        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule
+            && this.maps.legendSettings.type === 'Layers') {
             this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
         }
         const selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
@@ -12160,7 +12426,7 @@ class Highlight {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         const border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
             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
         };
@@ -12275,8 +12541,12 @@ class Selection {
             const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
             if (targetElement.id.indexOf('shapeIndex') > -1) {
                 shapeIndex = parseInt(targetElement.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                shapeData = !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['features'])
+                    && this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] :
+                    !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['geometries'])
+                        && this.maps.layers[layerIndex].shapeData['geometries']['length'] > shapeIndex ?
+                        this.maps.layers[layerIndex].shapeData['geometries'][shapeIndex]['properties'] : null;
                 dataIndex = parseInt(targetElement.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.selectionsettings = this.maps.layers[layerIndex].selectionSettings;
@@ -12356,15 +12626,17 @@ class Selection {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectMap(targetElement, shapeData, data) {
         const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         const selectionsettings = this.selectionsettings;
         const border = {
-            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),
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) : this.selectionsettings.border.color,
+            width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
+                (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
         };
         const eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
+            fill: isLineStringShape ? 'transparent' : (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none'),
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -12376,7 +12648,8 @@ class Selection {
         this.maps.trigger('itemSelection', eventArgs, (observedArgs) => {
             eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ? this.selectionsettings.opacity : this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
-                if (targetElement.getAttribute('class') === this.selectionType + 'selectionMapStyle') {
+                if (targetElement.getAttribute('class') === this.selectionType + 'selectionMapStyle'
+                    || targetElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(targetElement);
                     this.removedSelectionList(targetElement);
                     for (let m = 0; m < this.maps.shapeSelectionItem.length; m++) {
@@ -12395,14 +12668,23 @@ class Selection {
                 else {
                     const layetElement = getElementByID(this.maps.element.id + '_Layer_Collections');
                     if (!this.selectionsettings.enableMultiSelect &&
-                        layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length > 0) {
-                        const eleCount = layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length;
+                        (layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length > 0 ||
+                            layetElement.getElementsByClassName('LineselectionMapStyle').length > 0)) {
+                        let eleCount = layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length;
                         let ele;
                         for (let k = 0; k < eleCount; k++) {
                             ele = layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle')[0];
                             removeClass(ele);
                             this.removedSelectionList(ele);
                         }
+                        if (layetElement.getElementsByClassName('LineselectionMapStyle').length > 0) {
+                            eleCount = layetElement.getElementsByClassName('LineselectionMapStyle').length;
+                            for (let k = 0; k < eleCount; k++) {
+                                ele = layetElement.getElementsByClassName('LineselectionMapStyle')[0];
+                                removeClass(ele);
+                                this.removedSelectionList(ele);
+                            }
+                        }
                         if (this.selectionType === 'Shape') {
                             this.maps.shapeSelectionItem = [];
                             const selectionLength = this.maps.selectedElementId.length;
@@ -12420,13 +12702,24 @@ class Selection {
                             ele.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
                         }
                     }
-                    if (!getElement(this.selectionType + 'selectionMap')) {
-                        document.body.appendChild(createStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs));
+                    if (!isLineStringShape) {
+                        if (!getElement(this.selectionType + 'selectionMap')) {
+                            document.body.appendChild(createStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', this.selectionType + 'selectionMapStyle');
                     }
                     else {
-                        customizeStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs);
+                        if (!getElement('LineselectionMap')) {
+                            document.body.appendChild(createStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', 'LineselectionMapStyle');
                     }
-                    targetElement.setAttribute('class', this.selectionType + 'selectionMapStyle');
                     if (targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
                         this.maps.shapeSelectionClass = getElement(this.selectionType + 'selectionMap');
                         this.maps.selectedElementId.push(targetElement.getAttribute('id'));
@@ -12903,8 +13196,6 @@ class Zoom {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.shapeZoomLocation = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.intersect = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.mouseDownLatLong = { x: 0, y: 0 };
@@ -12943,25 +13234,38 @@ class Zoom {
         const minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         const prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && (type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)) {
+        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+            || map.isReset)) {
             const availSize = map.mapAreaRect;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const minBounds = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const maxBounds = map.baseMapRectBounds['max'];
-            const mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
-            const mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            const point = map.translatePoint;
-            let translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-            let translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-            const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+            let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+            let translatePointX;
+            let translatePointY;
+            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                const point = map.translatePoint;
+                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = newZoomFactor;
             if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                 map.translatePoint = map.previousPoint;
-                map.scale = map.previousScale;
+                map.scale = map.mapScaleValue = map.previousScale;
             }
             else {
                 this.applyTransform();
@@ -13017,6 +13321,14 @@ class Zoom {
         }
         this.maps.zoomNotApplied = false;
     }
+    calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
+        mapTotalWidth *= newZoomFactor;
+        mapTotalHeight *= newZoomFactor;
+        let widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        return new Point(translatePointX, translatePointY);
+    }
     triggerZoomEvent(prevTilePoint, prevLevel, type) {
         const map = this.maps;
         let zoomArgs;
@@ -13133,22 +13445,34 @@ class Zoom {
         this.lastScale = scale;
         this.pinchFactor *= newScale;
         this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
-        const zoomCalculationFactor = this.pinchFactor;
+        let zoomCalculationFactor = this.pinchFactor;
         let isZoomCancelled;
         if (!map.isTileMap) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const minBounds = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const maxBounds = map.baseMapRectBounds['max'];
-            const mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            const mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+            let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+            let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             const translatePoint = map.translatePoint;
-            const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
-            let translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
-            let translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            let translatePointX;
+            let translatePointY;
+            if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
+                translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
+                translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = zoomCalculationFactor;
             isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
             if (isZoomCancelled) {
@@ -13257,11 +13581,10 @@ class Zoom {
                                     layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
                                 }
                             }
-                            else {
+                            else if (currentEle.id.indexOf('Legend') == -1) {
                                 changeBorderWidth(currentEle, this.index, scale, this.maps);
                                 this.maps.zoomTranslatePoint = this.maps.translatePoint;
                                 this.animateTransform(currentEle, animate$$1, x, y, scale);
-                                this.shapeZoomLocation = currentEle.childNodes;
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
@@ -13368,7 +13691,7 @@ class Zoom {
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this.zoomshapewidth = this.shapeZoomLocation[labelIndex].getBoundingClientRect();
+                                    this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
                                     this.maps.zoomShapeCollection.push(this.zoomshapewidth);
                                     this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', animate$$1);
                                     const dataLabel = this.maps.layers[this.index].dataLabelSettings;
@@ -13584,7 +13907,7 @@ class Zoom {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = (this.zoomshapewidth['width'] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.innerHTML = text;
                         }
                         else {
@@ -13594,7 +13917,7 @@ class Zoom {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             text = zoomtrimLabel;
                             element.innerHTML = text;
                         }
@@ -13632,7 +13955,7 @@ class Zoom {
                                     || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim(this.zoomshapewidth['width'], trimmedLable, style);
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
                                     }
                                     element.innerHTML = trimmedLable;
                                 }
@@ -13658,11 +13981,11 @@ class Zoom {
                         }
                         this.intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             element.innerHTML = trimmedLable;
                         }
                     }
-                    else {
+                    if (animate$$1 || duration > 0) {
                         smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                     }
                 }
@@ -13783,7 +14106,7 @@ class Zoom {
             const layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
             const elementRect = getElementByID(map.element.id + '_svg').getBoundingClientRect();
             const panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
-                ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
+                ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             const panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13872,16 +14195,28 @@ class Zoom {
             const min = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const max = map.baseMapRectBounds['max'];
-            const mapWidth = Math.abs(max['x'] - min['x']);
-            const mapHeight = Math.abs(min['y'] - max['y']);
-            let translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
-            let translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
-            const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
-                : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
-                : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            let mapWidth = Math.abs(max['x'] - min['x']);
+            let mapHeight = Math.abs(min['y'] - max['y']);
+            let translatePointX;
+            let translatePointY;
+            if (zoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
+                zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
+            }
+            else {
+                translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
+                translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
+                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
+                    : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
+                    : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.zoomTranslatePoint = map.translatePoint;
             map.scale = zoomFactor;
             if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
@@ -14196,7 +14531,12 @@ class Zoom {
                 x = (size.width / 2) - (toolBarSize.width / 2);
                 break;
             case 'Far':
-                x = (size.width - toolBarSize.width) - padding;
+                if (!isNullOrUndefined(map.legendModule) && map.legendSettings.position === 'Left') {
+                    x = size.width + size.x - toolBarSize.width - padding;
+                }
+                else {
+                    x = (size.width - toolBarSize.width) - padding;
+                }
                 break;
         }
         let extraPosition = map.getExtraPosition();
@@ -14252,6 +14592,7 @@ class Zoom {
                 }
                 else {
                     map.mapScaleValue = value - delta;
+                    map.isReset = (map.mapScaleValue < 1) ? true : false;
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.mapScaleValue === 1) {
                         map.markerCenterLatitude = null;