@syncfusion/ej2-maps 20.1.59 → 20.2.36

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

@@ -788,6 +788,8 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     var opacity = shapeCustom['opacity'];
     var rectOptions;
     var 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') {
         var radius = (size.width + size.height) / 4;
         var circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
@@ -2022,6 +2024,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;
@@ -2071,7 +2077,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)));
@@ -2895,6 +2901,7 @@ function changeBorderWidth(element, index, scale, maps) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             var borderWidth = maps.layersCollection[index].shapeSettings.border.width;
+            var circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2915,8 +2922,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());
             }
         }
     }
@@ -3583,6 +3590,7 @@ function getThemeStyle(theme) {
                 backgroundColor: color,
                 areaBackgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#DADADA',
                 legendTextColor: '#DADADA',
@@ -3602,6 +3610,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#000000',
                 areaBackgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
@@ -3782,6 +3791,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#FFFFFF',
                 areaBackgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontSize: '14px',
                 subTitleFontColor: '#424242',
                 legendTitleFontColor: '#757575',
                 legendTextColor: '#757575',
@@ -4306,7 +4316,7 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __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')
@@ -4322,7 +4332,7 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __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')
@@ -4466,7 +4476,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate$1([
-        Complex({}, Font)
+        Complex({ fontFamily: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property(15)
@@ -4487,7 +4497,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         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')
@@ -4750,7 +4760,7 @@ var LayerSettings = /** @__PURE__ @class */ (function (_super) {
         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)
@@ -4921,11 +4931,12 @@ var Marker = /** @__PURE__ @class */ (function () {
                         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();
@@ -5477,9 +5488,14 @@ var BingMap = /** @__PURE__ @class */ (function () {
             }
             quadKey = quadKey + '' + digit;
         }
-        var 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)) {
+            var 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 '';
+        }
     };
     return BingMap;
 }());
@@ -5752,8 +5768,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !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);
@@ -5764,6 +5779,14 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             _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
@@ -5923,9 +5946,21 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         };
         this.mapObject.trigger('layerRendering', eventArgs, function (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) {
+                            var 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
@@ -5994,6 +6029,17 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             this.mapObject.baseMapBounds = null;
         }
     };
+    LayerPanel.prototype.bingMapCalculation = function (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);
+        }
+    };
     LayerPanel.prototype.bubbleCalculation = function (bubbleSettings, range) {
         if (bubbleSettings.dataSource != null && bubbleSettings != null) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6186,60 +6232,66 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             }
                             break;
                         case 'LineString':
-                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            currentShapeData.map(function (lineData) {
-                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                            currentShapeData.map(function (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(function (multilineData) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                multilineData.map(function (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
                             var pointData = currentShapeData['point'];
-                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / _this.currentFactor;
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
+                            var 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(function (multiPointData, index) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                var pointData = multiPointData['point'];
+                                var 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)) {
-                        var property = (Object.prototype.toString.call(_this.currentLayer.shapePropertyPath) === '[object Array]' ?
-                            _this.currentLayer.shapePropertyPath : [_this.currentLayer.shapePropertyPath]);
-                        var properties = void 0;
-                        for (var 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 (var j = 0; j < _this.mapObject.toggledShapeElementId.length; j++) {
-                                var 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);
@@ -6257,6 +6309,49 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             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
+    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, currentShapeData, index) {
+        var property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
+            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
+        var properties;
+        for (var 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 (var j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
+                var 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.
      *
@@ -6444,7 +6539,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 break;
             case 'linestring':
                 var extraSpace_1 = !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(function (points, index) {
                     latitude = points[1];
@@ -6459,31 +6555,61 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            case 'point': {
-                var arrayCollections_1 = false;
-                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
+            case 'multilinestring':
+                var extraSpaces_1 = !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;
+                var multiLineData_1 = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map(function (points, index) {
-                    if (Object.prototype.toString.call(points) === '[object Array]') {
+                coordinates.map(function (multiPoints) {
+                    newData = [];
+                    multiPoints.map(function (points) {
                         latitude = points[1];
                         longitude = points[0];
-                        arrayCollections_1 = true;
                         var 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_1);
+                        newData.push({
+                            point: point, lat: latitude, lng: longitude
                         });
-                    }
+                    });
+                    multiLineData_1.push(newData);
+                });
+                multiLineData_1['property'] = properties;
+                multiLineData_1['type'] = type;
+                this.currentLayer.layerData.push(multiLineData_1);
+                break;
+            case 'point':
+                var 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];
+                var 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_1) {
-                    latitude = coordinates[1];
-                    longitude = coordinates[0];
-                    var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                    this.calculateBox(point, extraSpace_2);
-                    this.currentLayer.layerData.push({
-                        point: point, type: type, lat: latitude, lng: longitude, property: properties
+                break;
+            case 'multipoint': {
+                var extraSpace_2 = (!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(function (points) {
+                    latitude = points[1];
+                    longitude = points[0];
+                    var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
+                    _this.calculateBox(point, extraSpace_2);
+                    newData.push({
+                        point: point, lat: latitude, lng: longitude
                     });
-                }
+                });
+                newData['property'] = properties;
+                newData['type'] = type;
+                this.currentLayer.layerData.push(newData);
                 break;
             }
             case 'path':
@@ -6495,12 +6621,12 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     };
     LayerPanel.prototype.calculateBox = function (point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+            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);
         }
     };
@@ -6518,6 +6644,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             var 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;
@@ -6612,15 +6742,28 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             _this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'multilinestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map(function (multiPoint, index) {
+                            multiPoint.map(function (point, index) {
+                                _this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
+                            });
+                        });
+                        break;
                     case 'linestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (point, index) {
-                            _this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                            _this.calculateRectBox(point, 'linestring', index === 0 ? true : false);
                         });
                         break;
                     case 'point':
                         _this.calculateRectBox(coordinates, 'point');
                         break;
+                    case 'multipoint':
+                        coordinates.map(function (point, index) {
+                            _this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
+                        });
+                        break;
                 }
             }
         });
@@ -6659,7 +6802,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
         var _this = this;
-        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, function (currentCoords) {
                 if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
@@ -6728,7 +6871,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         var 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 !== '')) {
                             var key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                         }
@@ -6757,11 +6900,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             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 (var _b = 0, proxTiles_1 = proxTiles; _b < proxTiles_1.length; _b++) {
                     var baseTile = proxTiles_1[_b];
                     var 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 {
@@ -6821,6 +6966,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 var id = 0;
                 var _loop_3 = function (tile) {
                     var imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
                     var mapId = _this.mapObject.element.id;
                     imgElement.onload = function () {
@@ -7474,16 +7621,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     Maps.prototype.renderMap = function () {
         if (this.legendModule && this.legendSettings.visible) {
-            if (!this.isTileMap) {
-                this.legendModule.renderLegend();
-            }
-            else {
-                var 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) {
@@ -7566,12 +7704,16 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 bottom = svg.bottom - tile.bottom - element.offsetTop;
                 top_1 = parseFloat(tileElement.style.top) + element.offsetTop;
             }
-            top_1 = (bottom <= 11) ? top_1 : (top_1 * 2);
-            left = (bottom <= 11) ? left : (left * 2);
+            top_1 = (bottom <= 11) ? top_1 : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top_1 * 2);
+            left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top_1 + 'px';
             tileElement.style.left = left + 'px';
             tileElement1.style.top = top_1 + '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) {
@@ -7697,12 +7839,21 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            var tileRect = getElementByID(this.element.id + '_tile_parent').getBoundingClientRect();
-            var tileSvgRect = getElementByID(this.element.id + '_Tile_SVG').getBoundingClientRect();
+            var tileElement = getElementByID(this.element.id + '_tile_parent');
+            var tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            var tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
+            var tileRect = tileElement.getBoundingClientRect();
+            var 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';
+            }
             var markerTemplateElements = document.getElementsByClassName('template');
             if (!isNullOrUndefined(markerTemplateElements) && markerTemplateElements.length > 0) {
                 for (var i = 0; i < markerTemplateElements.length; i++) {
@@ -7720,7 +7871,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (var i = 0; i < elements.childNodes.length; i++) {
                     var childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g') {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
                         var layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (var j = 0; j < childElement.childNodes.length; j++) {
                             var childNode = childElement.childNodes[j];
@@ -7757,7 +7908,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         var 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 (var i = 0; i < templateElements.length; i++) {
                 var offSetLetValue = 0;
                 var offSetTopValue = 0;
@@ -7792,10 +7943,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         var mainLayer = this.layersCollection[0];
         var 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');
@@ -7843,7 +7991,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var 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;
             }
@@ -7890,12 +8038,19 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Maps.prototype.renderTitle = function (title, type, bounds, groupEle) {
-        var style = title.textStyle;
+        var 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
+        };
         var height;
         var 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' });
@@ -8065,6 +8220,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var 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' });
@@ -8414,7 +8570,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             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');
@@ -8848,7 +9004,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                                 var collection = Object.keys(newProp.layers[x]);
                                 for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
                                     var collectionProp = collection_1[_b];
-                                    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') {
@@ -9131,6 +9288,28 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         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.
+     */
+    Maps.prototype.getBingUrlTemplate = function (url) {
+        var promise = new Promise(function (resolve, reject) {
+            var ajax = new Ajax({
+                url: url
+            });
+            ajax.onSuccess = function (json) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var jsonObject = JSON.parse(json);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var resource = jsonObject['resourceSets'][0]['resources'][0];
+                resolve(resource['imageUrl']);
+            };
+            ajax.send();
+        });
+        return promise;
+    };
     /**
      * To find visibility of layers and markers for required modules load.
      *
@@ -9485,12 +9664,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             var shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue && 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;
@@ -9815,7 +9990,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         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;
@@ -9824,21 +9999,9 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     midIndex = shapePoint.length - 1;
                 }
             }
-            else {
+            else if (layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var layer_1 = layerData[index];
-                if (layer_1['type'] === 'Point') {
-                    isPoint = true;
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var layerPoints = [];
-                    layerPoints.push(this.getPoint(layerData, []));
-                    shapePoint = layerPoints;
-                    currentLength = shapePoint[shapePoint.length - 1].length;
-                    if (pointsLength < currentLength) {
-                        pointsLength = currentLength;
-                        midIndex = shapePoint.length - 1;
-                    }
-                }
                 for (var j = 0; j < layer_1.length; j++) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoint.push(this.getPoint(layer_1[j], []));
@@ -10083,10 +10246,21 @@ var DataLabel = /** @__PURE__ @class */ (function () {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DataLabel.prototype.getPoint = function (shapes, points) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        shapes.map(function (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(function (current) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                current.map(function (shape) {
+                    points.push(new Point(shape['point']['x'], shape['point']['y']));
+                });
+            });
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map(function (current, index) {
+                points.push(new Point(current['point']['x'], current['point']['y']));
+            });
+        }
         return points;
     };
     /**
@@ -10280,6 +10454,10 @@ var Legend = /** @__PURE__ @class */ (function () {
          * @private
          */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.initialMapAreaRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -10338,6 +10516,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         this.heightIncrement = 0;
         this.defsElement = this.maps.renderer.createDefs();
         this.maps.svgObject.appendChild(this.defsElement);
+        this.initialMapAreaRect = this.maps.mapAreaRect;
         this.calculateLegendBounds();
         this.drawLegend();
     };
@@ -10377,9 +10556,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                         }
                     }
                 }
-                else {
-                    _this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
-                }
+            }
+            if (legend.type === 'Markers') {
+                _this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
             }
         });
         if (this.legendCollection.length > 0) {
@@ -10570,8 +10749,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 }
                             }
                             else {
+                                var padding = 10;
                                 shapeX = shapeLocation[j - 1].x;
-                                shapeY = prevPositionY + topPadding + (shapeHeight / 2);
+                                shapeY = prevPositionY + padding + (shapeHeight / 2);
                             }
                         }
                     }
@@ -10674,7 +10854,14 @@ var Legend = /** @__PURE__ @class */ (function () {
         var legend = map.legendSettings;
         var render = map.renderer;
         var textOptions;
-        var textFont = legend.textStyle;
+        var 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 (var i = 0; i < this.legendRenderingCollections.length; i++) {
@@ -10690,7 +10877,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                 textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
                 var 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));
@@ -10745,7 +10932,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                 };
                 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();
@@ -10821,7 +11008,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                             'opacity': 1,
                             'dominant-baseline': ''
                         };
-                        pagingGroup.appendChild(render.createText(pageTextOptions, pagingText));
+                        var pagingTextElement = render.createText(pageTextOptions, pagingText);
+                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
                     this.legendToggle();
@@ -10833,6 +11022,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeIndex;
         var layerIndex;
         var dataIndex;
+        var pointIndex;
         var legend = this.maps.legendSettings;
         var textEle = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
             document.getElementById(targetElement.id + '_Text');
@@ -10920,12 +11110,20 @@ var Legend = /** @__PURE__ @class */ (function () {
                     }
                     if (enable) {
                         for (var j = 0; j < data.length; j++) {
+                            var shapeElement = void 0;
                             shapeIndex = data[j]['shapeIndex'];
                             layerIndex = data[j]['layerIndex'];
                             dataIndex = data[j]['dataIndex'];
-                            var 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) {
                                 var shapeMatch = true;
                                 if (this.maps.legendSelectionCollection !== null) {
                                     for (var i_1 = 0; i_1 < this.maps.legendSelectionCollection.length; i_1++) {
@@ -10942,13 +11140,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     }
                                     length = this.legendHighlightCollection.length;
                                     var legendHighlightColor = this.legendHighlightCollection[length - 1]['legendOldFill'];
-                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     var shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
-                                    var shapeOldFillColor = shapeEle.getAttribute('fill');
+                                    var shapeOldFillColor = shapeElement.getAttribute('fill');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
                                     var 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') {
@@ -10971,12 +11169,12 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     }
                                     selectLength = this.maps.legendSelectionCollection.length;
                                     var 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;
@@ -10991,14 +11189,15 @@ var Legend = /** @__PURE__ @class */ (function () {
         }
     };
     Legend.prototype.setColor = function (element, fill, opacity, borderColor, borderWidth, type) {
+        var 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());
         }
     };
@@ -11041,7 +11240,8 @@ var Legend = /** @__PURE__ @class */ (function () {
             var dataCount = shapeElements.length;
             for (var j = 0; j < dataCount; j++) {
                 var shapeElement = getElement(shapeElements[j]);
-                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle' ||
+                    shapeElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(shapeElement);
                     var selectedElementIdIndex = this.maps.selectedElementId.indexOf(shapeElement.id);
                     if (selectedElementIdIndex !== -1) {
@@ -11119,12 +11319,14 @@ var Legend = /** @__PURE__ @class */ (function () {
                         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);
                                 }
                             }
@@ -11211,7 +11413,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                             }
                         }
                     }
-                    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
                         var element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         var multiSelection = 0;
@@ -11302,7 +11505,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         }
         for (var j = 0; j < this.maps.selectedLegendElementId.length; j++) {
             var 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_';
             var selectedElement = idIndex + this.maps.selectedLegendElementId[j];
             var legendElement = document.getElementById(selectedElement);
             if (!isNullOrUndefined(legendElement)) {
@@ -11354,6 +11557,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeIndex;
         var layerIndex;
         var dataIndex;
+        var pointIndex;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var collection = this.maps.legendModule.legendCollection;
         var legend = this.maps.legendSettings;
@@ -11366,15 +11570,23 @@ var Legend = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var currentElement = { Elements: [] };
             for (var j = 0; j < data.length; j++) {
+                var shapeElement = void 0;
                 shapeIndex = data[j]['shapeIndex'];
                 layerIndex = data[j]['layerIndex'];
                 dataIndex = data[j]['dataIndex'];
-                var 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'])) {
@@ -11392,16 +11604,25 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeIndex;
         var layerIndex;
         var dataIndex;
+        var pointIndex;
         var idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var data = this.maps.legendModule.legendCollection[idIndex]['data'];
         var legendShapeElements = [];
         for (var i = 0; i < data.length; i++) {
+            var shapeElement = void 0;
             shapeIndex = data[i]['shapeIndex'];
             layerIndex = data[i]['layerIndex'];
             dataIndex = data[i]['dataIndex'];
-            var 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);
             }
@@ -11469,9 +11690,11 @@ var Legend = /** @__PURE__ @class */ (function () {
         var 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;
@@ -11483,7 +11706,16 @@ var Legend = /** @__PURE__ @class */ (function () {
         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';
         }
@@ -11501,53 +11733,60 @@ var Legend = /** @__PURE__ @class */ (function () {
         var areaWidth = totalRect.width;
         var totalWidth = map.availableSize.width;
         var totalHeight = map.availableSize.height;
+        var locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
+        var 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);
         }
     };
@@ -11676,6 +11915,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                     borderColor: legend.shapeBorder.color, borderWidth: legend.shapeBorder.width
                 });
             }
+            else {
+                for (var 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
@@ -11877,15 +12123,16 @@ var Legend = /** @__PURE__ @class */ (function () {
         var width = 10;
         var 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 ';
@@ -11893,20 +12140,25 @@ var Legend = /** @__PURE__ @class */ (function () {
         }
         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 ';
             }
         }
         var 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));
+        }
     };
     Legend.prototype.wireEvents = function (element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -12267,10 +12519,20 @@ var Legend = /** @__PURE__ @class */ (function () {
                 var 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 (var j = 0; j < shapeData['geometry'].coordinates.length; j++) {
+                            legendData.push({
+                                layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                                name: data[dataPath], value: value, pointIndex: j
+                            });
+                        }
+                    }
                 }
             }
         }
@@ -12382,7 +12644,8 @@ var Highlight = /** @__PURE__ @class */ (function () {
             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
             var shapeData = void 0;
@@ -12392,8 +12655,9 @@ var Highlight = /** @__PURE__ @class */ (function () {
             var dataIndex = void 0;
             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;
@@ -12465,7 +12729,8 @@ var Highlight = /** @__PURE__ @class */ (function () {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Highlight.prototype.handleHighlight = function (targetElement, layerIndex, data, shapeData) {
-        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+        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);
         }
         var selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
@@ -12484,7 +12749,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         var 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
         };
@@ -12600,8 +12865,12 @@ var Selection = /** @__PURE__ @class */ (function () {
             var 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;
@@ -12682,15 +12951,17 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.selectMap = function (targetElement, shapeData, data) {
         var _this = this;
         var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        var isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         var selectionsettings = this.selectionsettings;
         var 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
         };
         var 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,
@@ -12702,7 +12973,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.maps.trigger('itemSelection', eventArgs, function (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 (var m = 0; m < _this.maps.shapeSelectionItem.length; m++) {
@@ -12721,7 +12993,8 @@ var Selection = /** @__PURE__ @class */ (function () {
                 else {
                     var layetElement = getElementByID(_this.maps.element.id + '_Layer_Collections');
                     if (!_this.selectionsettings.enableMultiSelect &&
-                        layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length > 0) {
+                        (layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length > 0 ||
+                            layetElement.getElementsByClassName('LineselectionMapStyle').length > 0)) {
                         var eleCount = layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length;
                         var ele = void 0;
                         for (var k = 0; k < eleCount; k++) {
@@ -12729,6 +13002,14 @@ var Selection = /** @__PURE__ @class */ (function () {
                             removeClass(ele);
                             _this.removedSelectionList(ele);
                         }
+                        if (layetElement.getElementsByClassName('LineselectionMapStyle').length > 0) {
+                            eleCount = layetElement.getElementsByClassName('LineselectionMapStyle').length;
+                            for (var k = 0; k < eleCount; k++) {
+                                ele = layetElement.getElementsByClassName('LineselectionMapStyle')[0];
+                                removeClass(ele);
+                                _this.removedSelectionList(ele);
+                            }
+                        }
                         if (_this.selectionType === 'Shape') {
                             _this.maps.shapeSelectionItem = [];
                             var selectionLength = _this.maps.selectedElementId.length;
@@ -12746,13 +13027,24 @@ var Selection = /** @__PURE__ @class */ (function () {
                             ele.setAttribute('stroke', _this.maps.layers[layerIndex_2].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'));
@@ -13234,8 +13526,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         // 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 };
@@ -13275,7 +13565,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         var 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)) {
             var availSize = map.mapAreaRect;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var minBounds = map.baseMapRectBounds['min'];
@@ -13283,17 +13574,29 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var maxBounds = map.baseMapRectBounds['max'];
             var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            var point = map.translatePoint;
-            var translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-            var translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-            var 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);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            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 {
+                var 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));
+                var 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();
@@ -13349,6 +13652,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
         this.maps.zoomNotApplied = false;
     };
+    Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
+        mapTotalWidth *= newZoomFactor;
+        mapTotalHeight *= newZoomFactor;
+        var 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);
+    };
     Zoom.prototype.triggerZoomEvent = function (prevTilePoint, prevLevel, type) {
         var map = this.maps;
         var zoomArgs;
@@ -13475,12 +13786,24 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
             var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             var translatePoint = map.translatePoint;
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
-            var translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
-            var 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);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            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 {
+                var 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) {
@@ -13589,11 +13912,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     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) {
@@ -13700,7 +14022,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var 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);
                                     var dataLabel = this.maps.layers[this.index].dataLabelSettings;
@@ -14119,7 +14441,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
             var elementRect = getElementByID(map.element.id + '_svg').getBoundingClientRect();
             var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
-                ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
+                ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             var 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
@@ -14211,14 +14533,26 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var max = map.baseMapRectBounds['max'];
             var mapWidth = Math.abs(max['x'] - min['x']);
             var mapHeight = Math.abs(min['y'] - max['y']);
-            var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
-            var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
-            var 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);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            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);
+                var 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)) {
@@ -14533,7 +14867,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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;
         }
         var extraPosition = map.getExtraPosition();
@@ -14589,6 +14928,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     map.mapScaleValue = value - delta;
+                    map.isReset = (map.mapScaleValue < 1) ? true : false;
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.mapScaleValue === 1) {
                         map.markerCenterLatitude = null;