@syncfusion/ej2-maps 19.4.56 → 19.4.57-105067

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

@@ -735,6 +735,8 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     const opacity = shapeCustom['opacity'];
     let rectOptions;
     const pathOptions = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
+    size.width = typeof (size.width) === 'string' ? parseInt(size.width, 10) : size.width;
+    size.height = typeof (size.height) === 'string' ? parseInt(size.height, 10) : size.height;
     if (shape === 'Circle') {
         const radius = (size.width + size.height) / 4;
         const circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
@@ -952,8 +954,8 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location.y + transPoint.y + (eventArg.height / 2)) * maps.mapScaleValue);
+                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
+                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
                         if (maps.isTileMap && !maps.zoomSettings.enable) {
                             tempX = location.x;
                             tempY = location.y;
@@ -1032,12 +1034,15 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        const markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        const markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
         }
         if (zoomCheck) {
-            document.getElementById(maps.element.id + '_Layer_Collections').appendChild(layerElement);
+            let layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            if (!isNullOrUndefined(layerGroupElement)) {
+                layerGroupElement.appendChild(layerElement);
+            }
         }
     });
 }
@@ -1054,15 +1059,16 @@ function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     const markerIndex = sameMarkerData[0].markerIndex;
     const dataIndex = sameMarkerData[0].dataIndex;
     const markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
     const clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle = getElement(clusterId);
+    const clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     const clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'visible');
     clusterEleLabel.setAttribute('visibility', 'visible');
     let markerEle;
     const markerDataLength = sameMarkerData[0].data.length;
     for (let i = 0; i < markerDataLength; i++) {
-        markerEle = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
@@ -1084,13 +1090,13 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     const getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     const getQueryConnect = isDom ? '' : '#';
     const markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
     const clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle = getElementFunction(getQueryConnect + '' + clusterId);
+    const clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     const clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
-    let markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    let markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     const height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     const width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     const centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
@@ -1126,7 +1132,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         const x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         const y1 = centerY + radius * Math.cos((Math.PI * 2 * newAngle) / 360);
         path += start + 'L ' + (x1) + ' ' + y1 + ' ';
-        markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         if (markerEle.parentElement.id.indexOf('Template_Group') > -1) {
             markerEle['style']['transform'] = '';
             markerEle['style']['left'] = maps.isTileMap ? x1 - (width / 2) + 'px' : (x1 - (width / 2) - 10) + 'px';
@@ -1147,7 +1153,12 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
     const groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
-    markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    if (marker.shape === 'Balloon') {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0_Group'));
+    }
+    else {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    }
 }
 /**
  *
@@ -1174,6 +1185,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
         dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
             eventArgs.border.opacity
     };
+    removeElement(markerID);
     const ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
     const x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x;
     const y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
@@ -1204,7 +1216,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplate, location, transPoint, scale, offset, maps) {
-    templateFn = getTemplateFunction(eventArgs.template);
+    templateFn = getTemplateFunction(eventArgs.template, maps);
     if (templateFn && (templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false).length)) {
         const templateElement = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
         const markerElement = convertElement(templateElement, markerID, data, markerIndex, maps);
@@ -1551,7 +1563,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     const y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
     if (type === 'Marker') {
-        const g = maps.renderer.createGroup({ id: options.id });
+        const g = maps.renderer.createGroup({ id: options.id + '_Group' });
         appendShape(balloon, g);
         pathElement = appendShape(g, element);
     }
@@ -1966,7 +1978,12 @@ 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));
+                scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                 mapWidth *= scaleFactor;
                 mapHeight *= scaleFactor;
                 const widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
@@ -2015,8 +2032,9 @@ 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));
+                            scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                             mapWidth *= scaleFactor;
                             x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                             mapHeight *= scaleFactor;
@@ -2173,6 +2191,8 @@ function getZoomTranslate(mapObject, layer, animate) {
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
+    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
+    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
     return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
 }
 /**
@@ -2236,7 +2256,7 @@ function Internalize(maps, value) {
  * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getTemplateFunction(template) {
+function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let templateFn = null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2244,6 +2264,9 @@ function getTemplateFunction(template) {
         if (document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
         }
+        else if (maps.isVue || maps.isVue3) {
+            templateFn = compile(template);
+        }
     }
     catch (e) {
         templateFn = compile(template);
@@ -2646,6 +2669,7 @@ function createTooltip(id, text, top, left, fontSize) {
         'left:' + left.toString() + 'px;' +
         'color: #000000; ' +
         'background:' + '#FFFFFF' + ';' +
+        'z-index: 2;' +
         'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
     if (!tooltip) {
         tooltip = createElement('div', {
@@ -2834,6 +2858,7 @@ function changeBorderWidth(element, index, scale, maps) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             const borderWidth = maps.layersCollection[index].shapeSettings.border.width;
+            const circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2846,13 +2871,16 @@ function changeBorderWidth(element, index, scale, maps) {
                         currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
                     }
                 }
+                else {
+                    currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
+                }
             }
             else {
                 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());
             }
         }
     }
@@ -3045,7 +3073,10 @@ function animate(element, delay, duration, process, end) {
         else {
             window.cancelAnimationFrame(clearAnimation);
             end.call(this, { element: element });
-            element.setAttribute('style', markerStyle);
+            if (element.id.indexOf('Marker') > -1) {
+                let markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);
@@ -3372,11 +3403,11 @@ function getShapeColor(theme) {
             themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
                 '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
             break;
-        case 'fluentui':
+        case 'fluent':
             themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
                 '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
                 '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
             break;
@@ -3517,6 +3548,7 @@ function getThemeStyle(theme) {
                 backgroundColor: color,
                 areaBackgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#DADADA',
                 legendTextColor: '#DADADA',
@@ -3536,6 +3568,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#000000',
                 areaBackgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
@@ -3665,7 +3698,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#495057'
             };
             break;
-        case 'fluentui':
+        case 'fluent':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 areaBackgroundColor: 'rgba(255,255,255, 0.0)',
@@ -3688,7 +3721,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#F3F2F1'
             };
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 areaBackgroundColor: 'rgba(255,255,255, 0.0)',
@@ -3716,6 +3749,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#FFFFFF',
                 areaBackgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontSize: '14px',
                 subTitleFontColor: '#424242',
                 legendTitleFontColor: '#757575',
                 legendTextColor: '#757575',
@@ -3734,12 +3768,12 @@ function getThemeStyle(theme) {
     return style;
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /**
  * Maps base document
@@ -4134,7 +4168,7 @@ __decorate$1([
 class SubTitleSettings extends CommonTitleSettings {
 }
 __decorate$1([
-    Complex({ size: Theme.mapsSubTitleFont.size, fontWeight: null }, Font)
+    Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
 ], SubTitleSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('Center')
@@ -4145,7 +4179,7 @@ __decorate$1([
 class TitleSettings extends CommonTitleSettings {
 }
 __decorate$1([
-    Complex({ size: Theme.mapsTitleFont.size, fontWeight: null }, Font)
+    Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
 ], TitleSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('Center')
@@ -4274,7 +4308,7 @@ __decorate$1([
     Property('')
 ], LegendSettings.prototype, "height", void 0);
 __decorate$1([
-    Complex({}, Font)
+    Complex({ fontFamily: null }, Font)
 ], LegendSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property(15)
@@ -4295,7 +4329,7 @@ __decorate$1([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
 __decorate$1([
-    Complex(Theme.legendTitleFont, Font)
+    Complex({ size: Theme.legendTitleFont.size, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: Theme.legendTitleFont.fontWeight, fontFamily: null }, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
 __decorate$1([
     Property('Bottom')
@@ -4538,7 +4572,7 @@ __decorate$1([
     Property('Geometry')
 ], LayerSettings.prototype, "layerType", void 0);
 __decorate$1([
-    Property('https://a.tile.openstreetmap.org/level/tileX/tileY.png')
+    Property('')
 ], LayerSettings.prototype, "urlTemplate", void 0);
 __decorate$1([
     Property(true)
@@ -4617,101 +4651,102 @@ class Marker {
         this.trackElements = [];
         this.sameMarkerData = [];
     }
-    markerRender(layerElement, layerIndex, factor, type) {
+    markerRender(maps, layerElement, layerIndex, factor, type) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let templateFn;
         let markerCount = 0;
         let nullCount = 0;
         let markerTemplateCount = 0;
-        this.maps.translateType = 'marker';
-        const currentLayer = this.maps.layersCollection[layerIndex];
-        this.markerSVGObject = this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_Markers_Group',
+        maps.translateType = 'marker';
+        const currentLayer = maps.layersCollection[layerIndex];
+        this.markerSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_Markers_Group',
             class: 'GroupElement',
             style: 'pointer-events: auto;'
         });
         const markerTemplateEle = createElement('div', {
-            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: this.maps.element.id + '_template',
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
+            className: maps.element.id + '_template',
             styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + this.maps.mapAreaRect.y + 'px;' +
-                'left:' + this.maps.mapAreaRect.x + 'px;' +
-                'height:' + this.maps.mapAreaRect.height + 'px;' +
-                'width:' + this.maps.mapAreaRect.width + 'px;'
+                'top:' + maps.mapAreaRect.y + 'px;' +
+                'left:' + maps.mapAreaRect.x + 'px;' +
+                'height:' + maps.mapAreaRect.height + 'px;' +
+                'width:' + maps.mapAreaRect.width + 'px;'
         });
         currentLayer.markerSettings.map((markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                this.maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : this.maps.markerNullCount;
+                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 let eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
                     width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
-                    template: markerSettings.template, data: data, maps: this.maps, marker: markerSettings,
+                    template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
-                this.maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
+                maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
                     eventArgs = markerColorChoose(eventArgs, data);
                     eventArgs = markerShapeChoose(eventArgs, data);
                     const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
                     const lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : 0;
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
                     const offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                        const markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
-                        let location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, this.maps);
-                        const animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
+                        let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                        const animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const translate = (this.maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(this.maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : new Object() :
-                            !isNullOrUndefined(this.maps.zoomModule) && this.maps.zoomSettings.zoomFactor > 1 ?
-                                getZoomTranslate(this.maps, currentLayer, animate$$1) :
-                                getTranslate(this.maps, currentLayer, animate$$1);
-                        const scale = type === 'AddMarker' ? this.maps.scale : translate['scale'];
-                        const transPoint = type === 'AddMarker' ? this.maps.translatePoint : translate['location'];
+                        const translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
+                            !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
+                                getZoomTranslate(maps, currentLayer, animate$$1) :
+                                getTranslate(maps, currentLayer, animate$$1);
+                        const scale = type === 'AddMarker' ? maps.scale : translate['scale'];
+                        const transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
                         if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, this.maps);
+                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, maps);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            this.maps.renderReactTemplates();
+                            maps.renderReactTemplates();
                         }
                         else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, this.maps, this.markerSVGObject);
+                            marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, this.markerSVGObject);
                         }
                     }
                     nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
                     markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
                     markerCount += (eventArgs.cancel) ? 1 : 0;
-                    this.maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
-                    const markerDataLength = markerData.length - this.maps.markerNullCount;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? maps.markerNullCount + 1 : maps.markerNullCount;
+                    const markerDataLength = markerData.length - maps.markerNullCount;
                     if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(this.markerSVGObject);
                         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);
+                            maps.svgObject.appendChild(this.markerSVGObject);
+                            maps.element.appendChild(maps.svgObject);
+                            if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
+                                && maps.zoomSettings.enable) {
+                                layerElement.appendChild(this.markerSVGObject);
                             }
                             else {
-                                layerElement.appendChild(this.markerSVGObject);
+                                clusterTemplate(currentLayer, this.markerSVGObject, maps, layerIndex, this.markerSVGObject, layerElement, true, false);
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            this.maps.renderReactTemplates();
+                            maps.renderReactTemplates();
                         }
                     }
-                    if (markerTemplateEle.childElementCount === (markerData.length - markerCount - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
-                        getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
-                        if (this.maps.checkInitialRender) {
+                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
+                        getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                        if (maps.checkInitialRender) {
                             if (currentLayer.markerClusterSettings.allowClustering) {
-                                clusterTemplate(currentLayer, markerTemplateEle, this.maps, layerIndex, this.markerSVGObject, layerElement, false, false);
+                                clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, this.markerSVGObject, layerElement, false, false);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                this.maps.renderReactTemplates();
+                                maps.renderReactTemplates();
                             }
                         }
                     }
@@ -4954,8 +4989,8 @@ class Marker {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     let isClusterSame = false;
-                    const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
-                    const indexes = clusterElement.innerHTML.split(',').map(Number);
+                    const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
+                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
                     collection = [];
                     for (const i of indexes) {
                         collection.push({ data: marker$$1.dataSource[i], index: i });
@@ -5023,14 +5058,14 @@ class Marker {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.maps = null;
+        this.trackElements = [];
+        this.markerSVGObject = null;
+        this.sameMarkerData = [];
     }
 }
 
@@ -5055,6 +5090,12 @@ const loaded = 'loaded';
  * @private
  */
 const click = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+const onclick = 'onclick';
 /**
  * Specifies the maps right click event name.
  *
@@ -5249,9 +5290,21 @@ class BingMap {
             }
             quadKey = quadKey + '' + digit;
         }
-        const subDomain = subDomains[Math.min(parseInt(quadKey.substr(quadKey.length - 1, 1), 10), subDomains.length)];
-        imageUrl = imageUrl.replace('{quadkey}', quadKey).replace('{subdomain}', subDomain);
-        return imageUrl += '&mkt=' + language + '&ur=IN&Key=' + key;
+        if (!isNullOrUndefined(subDomains)) {
+            const subDomain = subDomains[Math.min(parseInt(quadKey.substr(quadKey.length - 1, 1), 10), subDomains.length)];
+            imageUrl = imageUrl.replace('{quadkey}', quadKey).replace('{subdomain}', subDomain);
+            return imageUrl += '&mkt=' + language + '&ur=IN&Key=' + key;
+        }
+        else {
+            return '';
+        }
+    }
+    /**
+     * @private
+     */
+    destroy() {
+        this.maps = null;
+        this.subDomains = [];
     }
 }
 
@@ -5520,8 +5573,7 @@ class LayerPanel {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !isNullOrUndefined(this.mapObject.legendModule) &&
-                    this.mapObject.legendModule.totalPages.length > 0 ? this.mapObject.legendModule.legendTotalRect.height : areaRect.height
+                width: areaRect.width, height: areaRect.height
             }));
         }
         this.layerGroup.appendChild(this.clipRectElement);
@@ -5532,6 +5584,14 @@ class LayerPanel {
             this.currentLayer = layer;
             this.processLayers(layer, index);
         });
+        if (!isNullOrUndefined(this.mapObject.legendModule) && this.mapObject.legendSettings.position === 'Float') {
+            if (this.mapObject.isTileMap) {
+                this.layerGroup.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+            else {
+                this.mapObject.svgObject.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+        }
     }
     /**
      * Tile rendering
@@ -5659,7 +5719,7 @@ class LayerPanel {
             panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
         }
         if (panel.mapObject.markerModule) {
-            panel.mapObject.markerModule.markerRender(panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
+            panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
         }
         panel.translateLayerElements(panel.layerObject, layerIndex);
         panel.layerGroup.appendChild(panel.layerObject);
@@ -5690,9 +5750,21 @@ class LayerPanel {
         };
         this.mapObject.trigger('layerRendering', eventArgs, (observedArgs) => {
             if (!eventArgs.cancel && eventArgs.visible) {
-                if (layer.layerType !== 'Geometry') {
+                if (layer.layerType === 'OSM') {
+                    layer.urlTemplate = 'https://a.tile.openstreetmap.org/level/tileX/tileY.png';
+                }
+                if (layer.layerType === 'Google') {
+                    layer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
+                }
+                if (layer.layerType !== 'Geometry' || (isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                     if (layer.layerType !== 'Bing' || this.bing) {
-                        this.renderTileLayer(this, layer, layerIndex);
+                        if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
+                            const bing = new BingMap(this.mapObject);
+                            this.bingMapCalculation(layer, layerIndex, this, bing);
+                        }
+                        else {
+                            this.renderTileLayer(this, layer, layerIndex);
+                        }
                     }
                     else if (layer.key && layer.key.length > 1) {
                         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -5725,7 +5797,7 @@ class LayerPanel {
                             proxy.renderTileLayer(proxy, layer, layerIndex, bing);
                             this.mapObject.arrangeTemplate();
                             if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
-                                this.mapObject.zoomModule.applyTransform(true);
+                                this.mapObject.zoomModule.applyTransform(this.mapObject, true);
                             }
                         };
                         ajax.send();
@@ -5761,6 +5833,17 @@ class LayerPanel {
             this.mapObject.baseMapBounds = null;
         }
     }
+    bingMapCalculation(layer, layerIndex, proxy, bing) {
+        bing.imageUrl = layer.urlTemplate;
+        bing.subDomains = ['t0', 't1', 't2', 't3'];
+        bing.maxZoom = '21';
+        proxy.mapObject['bingMap'] = bing;
+        proxy.renderTileLayer(proxy, layer, layerIndex, bing);
+        this.mapObject.arrangeTemplate();
+        if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
+            this.mapObject.zoomModule.applyTransform(this.mapObject, true);
+        }
+    }
     bubbleCalculation(bubbleSettings, range) {
         if (bubbleSettings.dataSource != null && bubbleSettings != null) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5952,60 +6035,66 @@ class LayerPanel {
                             }
                             break;
                         case 'LineString':
-                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            currentShapeData.map((lineData) => {
-                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                            currentShapeData.map((lineData, index) => {
+                                if (index === 0) {
+                                    path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                }
+                                else {
+                                    path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                }
                             });
                             if (path.length > 3) {
-                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = this.mapObject.renderer.drawPath(pathOptions);
+                            }
+                            break;
+                        case 'MultiLineString':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map((multilineData) => {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                multilineData.map((lineData, index) => {
+                                    if (index === 0) {
+                                        path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                    }
+                                    else {
+                                        path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                    }
+                                });
+                            });
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                 pathEle = this.mapObject.renderer.drawPath(pathOptions);
                             }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const pointData = currentShapeData['point'];
-                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / this.currentFactor;
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
+                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                             break;
+                        case 'MultiPoint':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map((multiPointData, index) => {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                const pointData = multiPointData['point'];
+                                const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
+                                circleOptions = new CircleOption((shapeID + "_multiLine_" + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
+                                pathEle = this.mapObject.renderer.drawCircle(circleOptions);
+                                this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
+                            });
+                            break;
                         case 'Path':
                             path = currentShapeData['point'];
                             pathOptions = new PathOption(shapeID, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                             pathEle = this.mapObject.renderer.drawPath(pathOptions);
                             break;
                     }
-                    if (!isNullOrUndefined(pathEle)) {
-                        const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
-                            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
-                        let properties;
-                        for (let j = 0; j < property.length; j++) {
-                            if (!isNullOrUndefined(currentShapeData['property'])) {
-                                properties = property[j];
-                                break;
-                            }
-                        }
-                        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
-                            (currentShapeData['property'][properties]) : ''));
-                        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 3).toString());
-                        if (drawingType === 'LineString') {
-                            pathEle.setAttribute('style', 'outline:none');
-                        }
-                        maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-                        if (this.mapObject.toggledShapeElementId) {
-                            for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
-                                const styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
-                                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
-                                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
-                                    pathEle.setAttribute('fill', styleProperty.fill);
-                                    pathEle.setAttribute('stroke', styleProperty.border.color);
-                                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
-                                }
-                            }
-                        }
-                        groupElement.appendChild(pathEle);
+                    if (!isNullOrUndefined(pathEle) && drawingType !== 'MultiPoint') {
+                        this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
                     }
                     if (i === this.currentLayer.layerData.length - 1) {
                         this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
@@ -6019,6 +6108,50 @@ class LayerPanel {
             this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
         }
     }
+    /**
+     * layer features as bubble, marker, datalabel, navigation line.
+     *
+     * @param {groupElement} Element - Specifies the element to append the group
+     * @param {pathEle} Element - Specifies the svg element
+     * @param {drawingType} string - Specifies the data type
+     * @param {currentShapeData} any - Specifies the layer of shapedata.
+     * @param {index} number - Specifies the tab index.
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, index) {
+        const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
+            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
+        let properties;
+        for (let j = 0; j < property.length; j++) {
+            if (!isNullOrUndefined(currentShapeData['property'])) {
+                properties = property[j];
+                break;
+            }
+        }
+        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
+            (currentShapeData['property'][properties]) : ''));
+        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        pathEle.setAttribute('role', '');
+        if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
+            pathEle.setAttribute('style', 'outline:none');
+        }
+        maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
+        if (this.mapObject.toggledShapeElementId) {
+            for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
+                const styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
+                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
+                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
+                    pathEle.setAttribute('fill', styleProperty.fill);
+                    pathEle.setAttribute('stroke', styleProperty.border.color);
+                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
+                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
+                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
+                }
+            }
+        }
+        groupElement.appendChild(pathEle);
+    }
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
@@ -6074,7 +6207,7 @@ class LayerPanel {
             this.layerObject.appendChild(element);
         });
         if (this.mapObject.markerModule) {
-            this.mapObject.markerModule.markerRender(this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
+            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
                 : this.currentFactor), null);
         }
         this.translateLayerElements(this.layerObject, layerIndex);
@@ -6200,7 +6333,8 @@ class LayerPanel {
                 break;
             case 'linestring':
                 const extraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1;
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((points, index) => {
                     latitude = points[1];
@@ -6215,31 +6349,61 @@ class LayerPanel {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            case 'point': {
-                let arrayCollections = false;
-                const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
+            case 'multilinestring':
+                const extraSpaces = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                const multiLineData = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map((points, index) => {
-                    if (Object.prototype.toString.call(points) === '[object Array]') {
+                coordinates.map((multiPoints) => {
+                    newData = [];
+                    multiPoints.map((points) => {
                         latitude = points[1];
                         longitude = points[0];
-                        arrayCollections = true;
                         const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                        this.currentLayer.layerData.push({
-                            point: point, type: type, lat: latitude, lng: longitude, property: properties
+                        this.calculateBox(point, extraSpaces);
+                        newData.push({
+                            point: point, lat: latitude, lng: longitude
                         });
-                    }
+                    });
+                    multiLineData.push(newData);
+                });
+                multiLineData['property'] = properties;
+                multiLineData['type'] = type;
+                this.currentLayer.layerData.push(multiLineData);
+                break;
+            case 'point':
+                const pointExtraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                latitude = coordinates[1];
+                longitude = coordinates[0];
+                const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                this.calculateBox(point, pointExtraSpace);
+                this.currentLayer.layerData.push({
+                    point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
-                if (!arrayCollections) {
-                    latitude = coordinates[1];
-                    longitude = coordinates[0];
+                break;
+            case 'multipoint': {
+                const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                newData = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                coordinates.map((points) => {
+                    latitude = points[1];
+                    longitude = points[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
                     this.calculateBox(point, extraSpace);
-                    this.currentLayer.layerData.push({
-                        point: point, type: type, lat: latitude, lng: longitude, property: properties
+                    newData.push({
+                        point: point, lat: latitude, lng: longitude
                     });
-                }
+                });
+                newData['property'] = properties;
+                newData['type'] = type;
+                this.currentLayer.layerData.push(newData);
                 break;
             }
             case 'path':
@@ -6251,12 +6415,12 @@ class LayerPanel {
     }
     calculateBox(point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
         }
         else {
-            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
             this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
-            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x + extraSpace);
             this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
         }
     }
@@ -6274,6 +6438,10 @@ class LayerPanel {
             const end = convertGeoToPoint(bounds.latitude.max, bounds.longitude.max, null, layer, this.mapObject);
             mapHeight = end.y - start.y;
             mapWidth = end.x - start.x;
+            if (mapHeight === 0 || mapWidth === 0) {
+                mapWidth = mapSize.width / 2;
+                mapHeight = mapSize.height;
+            }
         }
         else {
             mapHeight = mapWidth = 500;
@@ -6367,15 +6535,28 @@ class LayerPanel {
                             this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'multilinestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map((multiPoint, index) => {
+                            multiPoint.map((point, index) => {
+                                this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
+                            });
+                        });
+                        break;
                     case 'linestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map((point, index) => {
-                            this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                            this.calculateRectBox(point, 'linestring', index === 0 ? true : false);
                         });
                         break;
                     case 'point':
                         this.calculateRectBox(coordinates, 'point');
                         break;
+                    case 'multipoint':
+                        coordinates.map((point, index) => {
+                            this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
+                        });
+                        break;
                 }
             }
         });
@@ -6412,7 +6593,7 @@ class LayerPanel {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateRectBox(coordinates, type, isFirstItem) {
-        if (type !== 'LineString' && type !== 'point') {
+        if ((type !== 'linestring' && type !== 'multilinestring') && (type !== 'point' && type !== 'multipoint')) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(coordinates, (currentCoords) => {
                 if (isNullOrUndefined(this.mapObject.baseMapBounds)) {
@@ -6481,7 +6662,7 @@ class LayerPanel {
                         const tile = new Tile(tileI % ycount, j);
                         tile.left = x;
                         tile.top = y;
-                        if (baseLayer.layerType === 'Bing') {
+                        if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             const key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                         }
@@ -6509,10 +6690,12 @@ class LayerPanel {
             if (!(layer.type === 'SubLayer' && layer.visible)) {
                 continue;
             }
-            if (layer.layerType === 'OSM' || layer.layerType === 'Bing') {
+            if ((layer.layerType !== 'Geometry' && layer.layerType !== 'GoogleStaticMap') || (layer.layerType === 'Geometry' &&
+                isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                 for (const baseTile of proxTiles) {
                     const subtile = extend({}, baseTile, {}, true);
                     if (layer.layerType === 'Bing') {
+                        bing = new BingMap(this.mapObject);
                         subtile.src = bing.getBingMap(subtile, layer.key, layer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                     }
                     else {
@@ -6557,7 +6740,7 @@ class LayerPanel {
                 else {
                     if (type !== 'Pan' && element1 && element) {
                         element1.appendChild(element.children[0]);
-                        if (!isNullOrUndefined(document.getElementById(this.mapObject.element.id + '_animated_tiles'))) {
+                        if (!this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(this.mapObject.element.id + '_animated_tiles'))) {
                             document.getElementById(this.mapObject.element.id + '_animated_tiles').id =
                                 this.mapObject.element.id + '_animated_tiles_old';
                         }
@@ -6571,7 +6754,10 @@ class LayerPanel {
                 let id = 0;
                 for (const tile of this.tiles) {
                     const imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                     const mapId = this.mapObject.element.id;
                     imgElement.onload = () => {
                         if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
@@ -6679,7 +6865,7 @@ class LayerPanel {
             '&zoom=' + zoom + '&center=' + center + '&maptype=' + mapType + '&key=' + apikey;
         document.getElementById(this.mapObject.element.id + '_tile_parent').innerHTML
             = '<div id="' + this.mapObject.element.id + '_StaticGoogleMap"' + 'style="position:absolute; left:' + eleWidth + 'px; top:'
-                + eleHeight + 'px"><img src="' + staticMapString + '"></div>';
+                + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
     }
     /**
      * To find the tile translate point
@@ -6737,6 +6923,27 @@ class LayerPanel {
         this.mapObject.previousTileHeight = factorY;
         return new Point(x, y);
     }
+    /**
+     * @returns {void}
+     * @private
+     */
+    destroy() {
+        this.mapObject = null;
+        this.groupElements = [];
+        this.layerObject = null;
+        this.currentLayer = null;
+        this.rectBounds = null;
+        this.tiles = [];
+        this.clipRectElement = null;
+        this.tileSvgObject = null;
+        this.ajaxModule = null;
+        this.ajaxResponse = [];
+        this.layerGroup = null;
+        if (!isNullOrUndefined(this.bing)) {
+            this.bing.destroy();
+        }
+        this.bing = null;
+    }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -6789,7 +6996,7 @@ class Annotations {
             if (argsData.cancel) {
                 return;
             }
-            templateFn = getTemplateFunction(argsData.content);
+            templateFn = getTemplateFunction(argsData.content, this.map);
             if (templateFn && templateFn(this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
                 templateElement = Array.prototype.slice.call(templateFn(this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex));
                 const length = templateElement.length;
@@ -6849,21 +7056,20 @@ class Annotations {
     /**
      * To destroy the annotation.
      *
-     * @param {Maps} map - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(map) {
-        // Destroy method performed here
+    destroy() {
+        this.map = null;
     }
 }
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable radix */
@@ -6901,6 +7107,10 @@ let Maps = class Maps extends Component {
          * Resize the map
          */
         this.isResize = false;
+        /**
+         * @private
+         */
+        this.isReset = false;
         /** @private */
         this.baseSize = new Size(0, 0);
         /** @public */
@@ -7052,6 +7262,7 @@ let Maps = class Maps extends Component {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     }
     /**
      * To Initialize the control rendering.
@@ -7184,16 +7395,7 @@ let Maps = class Maps extends Component {
     }
     renderMap() {
         if (this.legendModule && this.legendSettings.visible) {
-            if (!this.isTileMap) {
-                this.legendModule.renderLegend();
-            }
-            else {
-                const layerCount = this.layersCollection.length - 1;
-                if (!this.layersCollection[layerCount].isBaseLayer) {
-                    this.isTileMapSubLayer = true;
-                    this.legendModule.renderLegend();
-                }
-            }
+            this.legendModule.renderLegend();
         }
         this.createTile();
         if (this.zoomSettings.enable && this.zoomModule) {
@@ -7204,7 +7406,9 @@ let Maps = class Maps extends Component {
             this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
-        this.element.appendChild(this.svgObject);
+        if (!isNullOrUndefined(this.svgObject)) {
+            this.element.appendChild(this.svgObject);
+        }
         const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
             if (position.x !== 0 || position.y !== 0) {
@@ -7276,12 +7480,16 @@ let Maps = class Maps extends Component {
                 bottom = svg.bottom - tile.bottom - element.offsetTop;
                 top = parseFloat(tileElement.style.top) + element.offsetTop;
             }
-            top = (bottom <= 11) ? top : (top * 2);
-            left = (bottom <= 11) ? left : (left * 2);
+            top = (bottom <= 11) ? top : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top * 2);
+            left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top + 'px';
             tileElement.style.left = left + 'px';
             tileElement1.style.top = top + 'px';
             tileElement1.style.left = left + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.height = tileElement1.style.height = this.legendModule.legendTotalRect.height + 'px';
+                tileElement.style.width = tileElement1.style.width = this.legendModule.legendTotalRect.width + 'px';
+            }
         }
         this.arrangeTemplate();
         if (this.annotationsModule) {
@@ -7389,6 +7597,7 @@ let Maps = class Maps extends Component {
      */
     addTabIndex() {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
+        this.element.setAttribute('role', '');
         this.element.setAttribute('tabindex', this.tabIndex.toString());
     }
     // private setSecondaryElementPosition(): void {
@@ -7407,12 +7616,21 @@ let Maps = class Maps extends Component {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            const tileRect = getElementByID(this.element.id + '_tile_parent').getBoundingClientRect();
-            const tileSvgRect = getElementByID(this.element.id + '_Tile_SVG').getBoundingClientRect();
+            let tileElement = getElementByID(this.element.id + '_tile_parent');
+            let tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            const tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
+            const tileRect = tileElement.getBoundingClientRect();
+            const tileSvgRect = tileSvgElement.getBoundingClientRect();
             left = (tileRect.left - tileSvgRect.left);
             top = (tileRect.top - tileSvgRect.top);
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.left = left + 'px';
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.top = top + 'px';
+            tileSvgParentElement.style.left = left + 'px';
+            tileSvgParentElement.style.top = top + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
+                tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
+            }
             const markerTemplateElements = document.getElementsByClassName('template');
             if (!isNullOrUndefined(markerTemplateElements) && markerTemplateElements.length > 0) {
                 for (let i = 0; i < markerTemplateElements.length; i++) {
@@ -7430,7 +7648,7 @@ let Maps = class Maps extends Component {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (let i = 0; i < elements.childNodes.length; i++) {
                     const childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g') {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
                         const layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (let j = 0; j < childElement.childNodes.length; j++) {
                             const childNode = childElement.childNodes[j];
@@ -7444,7 +7662,7 @@ let Maps = class Maps extends Component {
                 }
             }
             if (this.zoomModule && (this.previousScale !== this.scale)) {
-                this.zoomModule.applyTransform(true);
+                this.zoomModule.applyTransform(this, true);
             }
         }
     }
@@ -7467,7 +7685,7 @@ let Maps = class Maps extends Component {
         }
         const templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
-            getElementByID(this.element.id + '_Layer_Collections') && this.layers[this.layers.length - 1].layerType !== 'OSM') {
+            getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
             for (let i = 0; i < templateElements.length; i++) {
                 let offSetLetValue = 0;
                 let offSetTopValue = 0;
@@ -7502,10 +7720,7 @@ let Maps = class Maps extends Component {
         const mainLayer = this.layersCollection[0];
         const padding = 0;
         if (mainLayer.isBaseLayer && (mainLayer.layerType === 'OSM' || mainLayer.layerType === 'Bing' ||
-            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google')) {
-            if (mainLayer.layerType === 'Google') {
-                mainLayer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
-            }
+            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google' || (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== ''))) {
             removeElement(this.element.id + '_tile_parent');
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
@@ -7552,7 +7767,7 @@ let Maps = class Maps extends Component {
             const baseLayer = mainLayers[i];
             if (baseLayer.visible && baseIndex === i) {
                 baseLayer.isBaseLayer = true;
-                this.isTileMap = (baseLayer.layerType === 'Geometry') ? false : true;
+                this.isTileMap = (baseLayer.layerType === 'Geometry' && !isNullOrUndefined(baseLayer.shapeData)) ? false : true;
                 this.layersCollection.push(baseLayer);
                 break;
             }
@@ -7599,12 +7814,19 @@ let Maps = class Maps extends Component {
      * @private
      */
     renderTitle(title, type, bounds, groupEle) {
-        const style = title.textStyle;
+        const style = {
+            size: title.textStyle.size,
+            color: title.textStyle.color,
+            fontFamily: title.textStyle.fontFamily,
+            fontWeight: title.textStyle.fontWeight,
+            fontStyle: title.textStyle.fontStyle,
+            opacity: title.textStyle.opacity
+        };
         let height;
         const width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
-        style.fontFamily = this.themeStyle.fontFamily || style.fontFamily;
+        style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
         style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
-        style.size = this.themeStyle.titleFontSize || style.size;
+        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || Theme.mapsSubTitleFont.size);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
@@ -7617,6 +7839,7 @@ let Maps = class Maps extends Component {
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', this.description || title.text);
+            element.setAttribute('role', '');
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
                 this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
@@ -7774,6 +7997,7 @@ let Maps = class Maps extends Component {
             const id = event.target['id'];
             event.preventDefault();
             if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
+                this.mapAreaRect = this.legendModule.initialMapAreaRect;
                 this.legendModule.currentPage = (id.indexOf('_Left_Page_') > -1) ? (this.legendModule.currentPage - 1) :
                     (this.legendModule.currentPage + 1);
                 this.legendModule.legendGroup = this.renderer.createGroup({ id: this.element.id + '_Legend_Group' });
@@ -7837,24 +8061,35 @@ let Maps = class Maps extends Component {
                 latitude: latitude, longitude: longitude,
                 isShapeSelected: this.SelectedElement(targetEle)
             };
-            this.trigger('click', eventArgs, (mouseArgs) => {
-                if (targetEle.id.indexOf('shapeIndex') > -1) {
-                    this.mergeCluster();
-                    if (getElement(this.element.id + '_mapsTooltip') &&
-                        this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
-                        removeElement(this.element.id + '_mapsTooltip');
-                    }
-                }
-                if (this.markerModule) {
-                    this.markerModule.markerClusterClick(e);
-                }
-                if (!eventArgs.cancel) {
-                    this.notify(click, targetEle);
-                }
-                if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    this.triggerShapeSelection(targetEle);
-                }
-            });
+            if (this.onclick) {
+                eventArgs.name = onclick;
+                this.trigger('onclick', eventArgs, (mouseArgs) => {
+                    this.clickHandler(e, eventArgs, targetEle);
+                });
+            }
+            else {
+                this.trigger('click', eventArgs, (mouseArgs) => {
+                    this.clickHandler(e, eventArgs, targetEle);
+                });
+            }
+        }
+    }
+    clickHandler(e, eventArgs, targetEle) {
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            this.mergeCluster();
+            if (getElement(this.element.id + '_mapsTooltip') &&
+                this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
+                removeElement(this.element.id + '_mapsTooltip');
+            }
+        }
+        if (this.markerModule) {
+            this.markerModule.markerClusterClick(e);
+        }
+        if (!eventArgs.cancel) {
+            this.notify(click, targetEle);
+        }
+        if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
+            this.triggerShapeSelection(targetEle);
         }
     }
     triggerShapeSelection(targetEle) {
@@ -7954,13 +8189,6 @@ let Maps = class Maps extends Component {
                     latitude = latLongValue.latitude;
                     longitude = latLongValue.longitude;
                 }
-                const eventArgs = {
-                    cancel: false, name: click, target: targetId, x: e.clientX, y: e.clientY,
-                    latitude: latitude, longitude: longitude, isShapeSelected: this.SelectedElement(targetEle)
-                };
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                this.trigger('click', eventArgs, (mouseArgs) => {
-                });
             }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
@@ -7968,7 +8196,7 @@ let Maps = class Maps extends Component {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -8122,14 +8350,14 @@ let Maps = class Maps extends Component {
             removeElement(this.element.id + '_EJ2_LegendTitle_Tooltip');
         }
         if ((targetId === (this.element.id + '_Map_title')) && (event.target.textContent.indexOf('...') > -1)) {
-            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
+            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size || this.themeStyle.titleFontSize, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
         }
         else {
             removeElement(this.element.id + '_EJ2_Title_Tooltip');
         }
     }
     /*
-
+
     /**
      * This method is used to perform operations while resizing the window.
      *
@@ -8156,6 +8384,7 @@ let Maps = class Maps extends Component {
                     this.refreshing = true;
                     this.wireEVents();
                     this.render();
+                    this.refreshing = false;
                 }, 500);
             }
         }
@@ -8186,7 +8415,7 @@ let Maps = class Maps extends Component {
                 this.scale = zoomFactor;
                 this.translatePoint.x = ((mapRect.left < svgRect.left ? x : 0) + (size.width / 2) - (position.x * zoomFactor)) / zoomFactor;
                 this.translatePoint.y = ((mapRect.top < svgRect.top ? y : 0) + (size.height / 2) - (position.y * zoomFactor)) / zoomFactor;
-                this.zoomModule.applyTransform();
+                this.zoomModule.applyTransform(this);
             }
             else {
                 position = { x: size.width / 2, y: size.height / 2 };
@@ -8232,8 +8461,10 @@ let Maps = class Maps extends Component {
      * @param {Object} layer - Specifies the layer for the maps.
      */
     addLayer(layer) {
-        this.layers.push(new LayerSettings(this.layers[0], 'layers', layer));
-        this.refresh();
+        let mapsLayer = this.layers;
+        mapsLayer.push(layer);
+        this.isAddLayer = true;
+        this.layers = mapsLayer;
     }
     /**
      * This method is used to remove a layer from map.
@@ -8242,8 +8473,9 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     removeLayer(index) {
-        this.layers.splice(index, 1);
-        this.refresh();
+        let mapsLayer = this.layers;
+        mapsLayer.splice(index, 1);
+        this.layers = mapsLayer;
     }
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8261,7 +8493,7 @@ let Maps = class Maps extends Component {
                 this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
             }
             const markerModule = new Marker(this);
-            markerModule.markerRender(layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
             this.arrangeTemplate();
         }
     }
@@ -8467,7 +8699,8 @@ let Maps = class Maps extends Component {
             Zoom: 'Zoom',
             ZoomOut: 'Zoom out',
             Pan: 'Pan',
-            Reset: 'Reset'
+            Reset: 'Reset',
+            ImageNotFound: 'Image Not Found'
         };
     }
     /**
@@ -8475,6 +8708,7 @@ let Maps = class Maps extends Component {
      */
     destroy() {
         this.unWireEVents();
+        super.destroy();
         this.shapeSelectionItem = [];
         this.toggledShapeElementId = [];
         this.toggledLegendId = [];
@@ -8489,11 +8723,14 @@ let Maps = class Maps extends Component {
         this.zoomLabelPositions = [];
         this.mouseDownEvent = { x: null, y: null };
         this.mouseClickEvent = { x: null, y: null };
+        this.formatFunction = null;
+        //TODO: Calling the below code throws spec issue.
+        //this.renderer = null;
+        this.availableSize = new Size(0, 0);
         if (document.getElementById('mapsmeasuretext')) {
             document.getElementById('mapsmeasuretext').remove();
         }
         this.removeSvg();
-        super.destroy();
     }
     /**
      * Gets component name
@@ -8526,6 +8763,7 @@ let Maps = class Maps extends Component {
     onPropertyChanged(newProp, oldProp) {
         let render = false;
         let isMarker = false;
+        let isLayer = false;
         let isStaticMapType = false;
         let layerEle;
         if (newProp['layers']) {
@@ -8545,12 +8783,17 @@ let Maps = class Maps extends Component {
                 case 'legendSettings':
                 case 'baseLayerIndex':
                     if (prop === 'layers') {
+                        isLayer = true;
                         const layerPropLength = Object.keys(newProp.layers).length;
                         for (let x = 0; x < layerPropLength; x++) {
                             if (!isNullOrUndefined(newProp.layers[x])) {
                                 const collection = Object.keys(newProp.layers[x]);
                                 for (const collectionProp of collection) {
-                                    if (collectionProp === 'markerSettings') {
+                                    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') {
                                         isMarker = true;
                                     }
                                     else if (collectionProp === 'staticMapType') {
@@ -8564,7 +8807,7 @@ let Maps = class Maps extends Component {
                     break;
                 case 'zoomSettings':
                     if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
                             render = false;
                         }
                         else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
@@ -8799,7 +9042,7 @@ let Maps = class Maps extends Component {
      */
     print(id) {
         if ((this.allowPrint) && (this.printModule)) {
-            this.printModule.print(id);
+            this.printModule.print(this, id);
         }
     }
     /**
@@ -8817,16 +9060,38 @@ let Maps = class Maps extends Component {
         }
         if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
             return new Promise((resolve, reject) => {
-                resolve(this.imageExportModule.export(type, fileName, allowDownload));
+                resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
             });
         }
         else if ((this.allowPdfExport) && (this.pdfExportModule)) {
             return new Promise((resolve, reject) => {
-                resolve(this.pdfExportModule.export(type, fileName, allowDownload, orientation));
+                resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
             });
         }
         return null;
     }
+    /**
+     * This method is used to get the Bing maps URL.
+     *
+     * @param {string} url - Specifies the URL of the maps.
+     * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
+     */
+    getBingUrlTemplate(url) {
+        const promise = new Promise((resolve, reject) => {
+            const ajax = new Ajax({
+                url: url
+            });
+            ajax.onSuccess = (json) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const jsonObject = JSON.parse(json);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const resource = jsonObject['resourceSets'][0]['resources'][0];
+                resolve(resource['imageUrl']);
+            };
+            ajax.send();
+        });
+        return promise;
+    }
     /**
      * To find visibility of layers and markers for required modules load.
      *
@@ -9027,6 +9292,9 @@ __decorate([
 __decorate([
     Event()
 ], Maps.prototype, "click", void 0);
+__decorate([
+    Event()
+], Maps.prototype, "onclick", void 0);
 __decorate([
     Event()
 ], Maps.prototype, "doubleClick", void 0);
@@ -9170,12 +9438,8 @@ class Bubble {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             const shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
-                if (layerData[i]['type'] === 'Point') {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    shapePoints.push(this.getPoints(layerData[i], []));
-                }
-                else if (!layerData[i]['_isMultiPolygon']) {
+            if (shapeDataLayerPathValue === shapePathValue && (layerData[i].type !== 'LineString' && layerData[i].type !== 'MultiLineString' && layerData[i]['type'] !== 'Point' && layerData[i]['type'] !== 'MultiPoint')) {
+                if (!layerData[i]['_isMultiPolygon']) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
                     currentLength = shapePoints[shapePoints.length - 1].length;
@@ -9259,7 +9523,7 @@ class Bubble {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let translate;
                 const animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
-                if (this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(this.maps.zoomModule)) {
+                if (this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(this.maps.zoomModule) && !this.maps.isTileMap) {
                     translate = getZoomTranslate(this.maps, layer, animate$$1);
                 }
                 else {
@@ -9376,14 +9640,13 @@ class Bubble {
     /**
      * To destroy the bubble.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.bubbleCollection = [];
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     }
 }
 
@@ -9480,7 +9743,7 @@ class DataLabel {
         let shapeWidth;
         const scaleZoomValue = !isNullOrUndefined(this.maps.scale) ? Math.floor(this.maps.scale) : 1;
         const zoomLabelsPosition = this.maps.zoomSettings.enable ? !isNullOrUndefined(this.maps.zoomShapeCollection) &&
-            this.maps.zoomShapeCollection.length > 0 : this.maps.zoomSettings.enable;
+            this.maps.zoomShapeCollection.length > 0 && !this.maps.isAddLayer : this.maps.zoomSettings.enable;
         this.maps.translateType = 'labels';
         for (let j = 0; j < properties.length; j++) {
             if (shapeProperties[properties[j]]) {
@@ -9498,7 +9761,7 @@ class DataLabel {
         layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
         if (!isNullOrUndefined(shapes['property'])) {
             shapePoint = [[]];
-            if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point') {
+            if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 shapePoint.push(this.getPoint(layerData[index], []));
                 currentLength = shapePoint[shapePoint.length - 1].length;
@@ -9507,21 +9770,9 @@ class DataLabel {
                     midIndex = shapePoint.length - 1;
                 }
             }
-            else {
+            else if (layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const layer = layerData[index];
-                if (layer['type'] === 'Point') {
-                    isPoint = true;
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const layerPoints = [];
-                    layerPoints.push(this.getPoint(layerData, []));
-                    shapePoint = layerPoints;
-                    currentLength = shapePoint[shapePoint.length - 1].length;
-                    if (pointsLength < currentLength) {
-                        pointsLength = currentLength;
-                        midIndex = shapePoint.length - 1;
-                    }
-                }
                 for (let j = 0; j < layer.length; j++) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoint.push(this.getPoint(layer[j], []));
@@ -9591,7 +9842,7 @@ class DataLabel {
             const eventargs = {
                 name: dataLabelRendering, maps: this.maps, cancel: false, border: { color: dataLabel.border.color,
                     width: dataLabel.border.width, opacity: dataLabel.border.opacity }, datalabel: dataLabel,
-                fill: dataLabel.fill, template: dataLabel.template, text: text
+                fill: dataLabel.fill, template: dataLabel.template, text: text, offsetX: 0, offsetY: 0
             };
             this.maps.trigger('dataLabelRendering', eventargs, (labelArgs) => {
                 if (eventargs.cancel) {
@@ -9636,13 +9887,13 @@ class DataLabel {
                 this.value[index] = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
                 let labelElement;
                 if (eventargs.template !== '') {
-                    templateFn = getTemplateFunction(eventargs.template);
+                    templateFn = getTemplateFunction(eventargs.template, this.maps);
                     const templateElement = templateFn ? templateFn(!isNullOrUndefined(datasrcObj) ?
                         datasrcObj : shapeData['properties'], this.maps, eventargs.template, this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs.template : '';
                     labelElement = convertElementFromLabel(templateElement, labelId, !isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties'], index, this.maps);
-                    labelElement.style.left = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + 'px';
-                    labelElement.style.top = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + 'px';
+                    labelElement.style.left = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
+                    labelElement.style.top = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
                     labelTemplateElement.appendChild(labelElement);
                 }
                 else {
@@ -9730,26 +9981,26 @@ class DataLabel {
                                 y = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                             }
                             border.opacity = isNullOrUndefined(border.opacity) ? opacity : border.opacity;
-                            const rectOptions = new RectOption(this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new Rect(x, y, textSize['width'], textSize['height']), rx, ry);
+                            const rectOptions = new RectOption(this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
                             const rect = this.maps.renderer.drawRectangle(rectOptions);
                             group.appendChild(rect);
                         }
                     }
                     element = renderTextElement(options, style, style.color || this.maps.themeStyle.dataLabelFontColor, group);
                     if (zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied) {
-                        element.setAttribute('transform', 'translate( ' + ((location['x'])) + ' '
-                            + (((location['y']))) + ' )');
+                        element.setAttribute('transform', 'translate( ' + ((location['x'] + labelArgs.offsetX)) + ' '
+                            + (((location['y'] + labelArgs.offsetY))) + ' )');
                         location['x'] = locationX;
                         location['y'] = locationY;
                     }
                     else {
-                        element.setAttribute('transform', 'translate( ' + ((location['x'] + transPoint.x) * scale) + ' '
-                            + (((location['y'] + transPoint.y) * scale) + (elementSize.height / 4)) + ' )');
+                        element.setAttribute('transform', 'translate( ' + (((location['x'] + transPoint.x) * scale) + labelArgs.offsetX) + ' '
+                            + ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 4)) + labelArgs.offsetY) + ' )');
                     }
                     group.appendChild(element);
                 }
                 this.dataLabelCollections.push({
-                    location: { x: location['x'], y: location['y'] },
+                    location: { x: location['x'] + labelArgs.offsetX, y: location['y'] + labelArgs.offsetY },
                     element: isNullOrUndefined(labelElement) ? element : labelElement,
                     layerIndex: layerIndex,
                     shapeIndex: sublayerIndexLabel ? oldIndex : index,
@@ -9766,10 +10017,21 @@ class DataLabel {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getPoint(shapes, points) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        shapes.map((current, index) => {
-            points.push(new Point(current['point']['x'], current['point']['y']));
-        });
+        if (shapes['type'] === 'MultiLineString') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map((current) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                current.map((shape) => {
+                    points.push(new Point(shape['point']['x'], shape['point']['y']));
+                });
+            });
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map((current, index) => {
+                points.push(new Point(current['point']['x'], current['point']['y']));
+            });
+        }
         return points;
     }
     /**
@@ -9781,16 +10043,14 @@ class DataLabel {
         return 'DataLabel';
     }
     /**
-     * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.dataLabelCollections = [];
+        this.value = null;
+        this.maps = null;
     }
 }
 
@@ -9941,14 +10201,11 @@ class NavigationLine {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.maps = null;
     }
 }
 
@@ -9961,6 +10218,10 @@ class Legend {
          * @private
          */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.initialMapAreaRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -10019,6 +10280,7 @@ class Legend {
         this.heightIncrement = 0;
         this.defsElement = this.maps.renderer.createDefs();
         this.maps.svgObject.appendChild(this.defsElement);
+        this.initialMapAreaRect = this.maps.mapAreaRect;
         this.calculateLegendBounds();
         this.drawLegend();
     }
@@ -10056,9 +10318,9 @@ class Legend {
                         }
                     }
                 }
-                else {
-                    this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
-                }
+            }
+            if (legend.type === 'Markers') {
+                this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
             }
         });
         if (this.legendCollection.length > 0) {
@@ -10249,8 +10511,9 @@ class Legend {
                                 }
                             }
                             else {
+                                let padding = 10;
                                 shapeX = shapeLocation[j - 1].x;
-                                shapeY = prevPositionY + topPadding + (shapeHeight / 2);
+                                shapeY = prevPositionY + padding + (shapeHeight / 2);
                             }
                         }
                     }
@@ -10353,7 +10616,14 @@ class Legend {
         const legend = map.legendSettings;
         const render = map.renderer;
         let textOptions;
-        const textFont = legend.textStyle;
+        const textFont = {
+            size: legend.textStyle.size,
+            color: legend.textStyle.color,
+            fontFamily: legend.textStyle.fontFamily,
+            fontWeight: legend.textStyle.fontWeight,
+            fontStyle: legend.textStyle.fontStyle,
+            opacity: legend.textStyle.opacity
+        };
         this.legendGroup = render.createGroup({ id: map.element.id + '_Legend_Group' });
         if (legend.mode === 'Interactive') {
             for (let i = 0; i < this.legendRenderingCollections.length; i++) {
@@ -10369,7 +10639,7 @@ class Legend {
                 textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
                 const rectOptions = new RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
-                textFont.fontFamily = map.themeStyle.fontFamily || textFont.fontFamily;
+                textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                 textFont.size = map.themeStyle.legendFontSize || textFont.size;
                 renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
                 this.legendGroup.appendChild(render.drawRectangle(rectOptions));
@@ -10424,7 +10694,7 @@ class Legend {
                 };
                 legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily : this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -10500,7 +10770,9 @@ class Legend {
                             'opacity': 1,
                             'dominant-baseline': ''
                         };
-                        pagingGroup.appendChild(render.createText(pageTextOptions, pagingText));
+                        let pagingTextElement = render.createText(pageTextOptions, pagingText);
+                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
                     this.legendToggle();
@@ -10512,6 +10784,7 @@ class Legend {
         let shapeIndex;
         let layerIndex;
         let dataIndex;
+        let pointIndex;
         const legend = this.maps.legendSettings;
         const textEle = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
             document.getElementById(targetElement.id + '_Text');
@@ -10599,12 +10872,20 @@ class Legend {
                     }
                     if (enable) {
                         for (let j = 0; j < data.length; j++) {
+                            let shapeElement;
                             shapeIndex = data[j]['shapeIndex'];
                             layerIndex = data[j]['layerIndex'];
                             dataIndex = data[j]['dataIndex'];
-                            const shapeEle = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
-                            if (shapeEle !== null) {
+                            pointIndex = data[j]['pointIndex'];
+                            if (pointIndex === -1) {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                            }
+                            else {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                            }
+                            if (shapeElement !== null) {
                                 let shapeMatch = true;
                                 if (this.maps.legendSelectionCollection !== null) {
                                     for (let i = 0; i < this.maps.legendSelectionCollection.length; i++) {
@@ -10621,13 +10902,13 @@ class Legend {
                                     }
                                     length = this.legendHighlightCollection.length;
                                     const legendHighlightColor = this.legendHighlightCollection[length - 1]['legendOldFill'];
-                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     const shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
-                                    const shapeOldFillColor = shapeEle.getAttribute('fill');
+                                    const shapeOldFillColor = shapeElement.getAttribute('fill');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
                                     const shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
                                     this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
-                                    this.setColor(shapeEle, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                     this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                 }
                                 else if (value === 'selection') {
@@ -10650,12 +10931,12 @@ class Legend {
                                     }
                                     selectLength = this.maps.legendSelectionCollection.length;
                                     const legendSelectionColor = this.maps.legendSelectionCollection[selectLength - 1]['legendOldFill'];
-                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     this.maps.legendSelectionCollection[selectLength - 1]['shapeOldFillColor'] = this.shapePreviousColor;
                                     this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    this.setColor(shapeEle, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    if (this.maps.selectedElementId.indexOf(shapeEle.getAttribute('id')) === -1) {
-                                        this.maps.selectedElementId.push(shapeEle.getAttribute('id'));
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
+                                    if (this.maps.selectedElementId.indexOf(shapeElement.getAttribute('id')) === -1) {
+                                        this.maps.selectedElementId.push(shapeElement.getAttribute('id'));
                                     }
                                     if (j === data.length - 1) {
                                         this.maps.legendSelection = false;
@@ -10670,14 +10951,15 @@ class Legend {
         }
     }
     setColor(element, fill, opacity, borderColor, borderWidth, type) {
+        const isLineStringShape = (element.parentElement.id.indexOf('LineString') > -1);
         if (type === 'selection') {
-            maintainStyleClass('ShapeselectionMap', 'ShapeselectionMapStyle', fill, opacity, borderColor, borderWidth, this.maps);
-            element.setAttribute('class', 'ShapeselectionMapStyle');
+            maintainStyleClass((isLineStringShape ? 'LineselectionMap' : 'ShapeselectionMap'), (isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle'), (isLineStringShape ? 'transparent' : fill), opacity, (isLineStringShape ? fill : borderColor), borderWidth, this.maps);
+            element.setAttribute('class', isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle');
         }
         else {
-            element.setAttribute('fill', fill);
+            element.setAttribute('fill', isLineStringShape ? 'transparent' : fill);
             element.setAttribute('fill-opacity', opacity);
-            element.setAttribute('stroke', borderColor);
+            element.setAttribute('stroke', isLineStringShape ? fill : borderColor);
             element.setAttribute('stroke-width', (Number(borderWidth) / this.maps.scale).toString());
         }
     }
@@ -10720,7 +11002,8 @@ class Legend {
             const dataCount = shapeElements.length;
             for (let j = 0; j < dataCount; j++) {
                 const shapeElement = getElement(shapeElements[j]);
-                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle' ||
+                    shapeElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(shapeElement);
                     const selectedElementIdIndex = this.maps.selectedElementId.indexOf(shapeElement.id);
                     if (selectedElementIdIndex !== -1) {
@@ -10798,12 +11081,14 @@ class Legend {
                         this.maps.legendSelectionClass = module;
                     }
                     else {
-                        if ((checkSelection <= 1) && targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                        if ((checkSelection <= 1) && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                            || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                             if (!this.maps.layers[layerIndex].selectionSettings.enableMultiSelect) {
                                 this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                             }
                             else {
-                                if (checkSelection <= 1 && targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                                if (checkSelection <= 1 && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                                    || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                                     this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                                 }
                             }
@@ -10890,7 +11175,8 @@ class Legend {
                             }
                         }
                     }
-                    if (selectionEle && (selectionEle['IsSelected'] && targetElement.getAttribute('class') === 'ShapeselectionMapStyle')) {
+                    if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                        || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         let multiSelection = 0;
@@ -10981,7 +11267,7 @@ class Legend {
         }
         for (let j = 0; j < this.maps.selectedLegendElementId.length; j++) {
             const idIndex = this.maps.legendSettings.mode === 'Interactive' ?
-                'container_Legend_Index_' : 'container_Legend_Shape_Index_';
+                this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
             const selectedElement = idIndex + this.maps.selectedLegendElementId[j];
             const legendElement = document.getElementById(selectedElement);
             if (!isNullOrUndefined(legendElement)) {
@@ -11033,6 +11319,7 @@ class Legend {
         let shapeIndex;
         let layerIndex;
         let dataIndex;
+        let pointIndex;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const collection = this.maps.legendModule.legendCollection;
         const legend = this.maps.legendSettings;
@@ -11045,15 +11332,23 @@ class Legend {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const currentElement = { Elements: [] };
             for (let j = 0; j < data.length; j++) {
+                let shapeElement;
                 shapeIndex = data[j]['shapeIndex'];
                 layerIndex = data[j]['layerIndex'];
                 dataIndex = data[j]['dataIndex'];
-                const shapeEle = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
-                if (targetElement === shapeEle) {
+                pointIndex = data[j]['pointIndex'];
+                if (pointIndex === -1) {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                }
+                else {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                }
+                if (targetElement === shapeElement) {
                     process = true;
                 }
-                elements.push(shapeEle);
+                elements.push(shapeElement);
             }
             if (process) {
                 if (isNullOrUndefined(currentElement['LegendEle'])) {
@@ -11071,16 +11366,25 @@ class Legend {
         let shapeIndex;
         let layerIndex;
         let dataIndex;
+        let pointIndex;
         const idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const data = this.maps.legendModule.legendCollection[idIndex]['data'];
         const legendShapeElements = [];
         for (let i = 0; i < data.length; i++) {
+            let shapeElement;
             shapeIndex = data[i]['shapeIndex'];
             layerIndex = data[i]['layerIndex'];
             dataIndex = data[i]['dataIndex'];
-            const shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            pointIndex = data[i]['pointIndex'];
+            if (pointIndex === -1) {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            }
+            else {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+            }
             if (!isNullOrUndefined(shapeElement)) {
                 legendShapeElements.push(shapeElement.id);
             }
@@ -11148,9 +11452,11 @@ class Legend {
         const renderOptions = new RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
         this.legendGroup.appendChild(map.renderer.drawRectangle(renderOptions));
         this.getLegendAlignment(map, this.legendBorderRect.width, this.legendBorderRect.height, legend);
-        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-(this.legendBorderRect.x))) + ' ' +
+        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-this.legendBorderRect.x)) + ' ' +
             (this.translate.y + (-(this.legendBorderRect.y))) + ' )');
-        map.svgObject.appendChild(this.legendGroup);
+        if (legend.position !== 'Float') {
+            map.svgObject.appendChild(this.legendGroup);
+        }
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
             textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
@@ -11162,7 +11468,16 @@ class Legend {
         this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
             (this.currentPage + 1);
         this.legendGroup = this.maps.renderer.createGroup({ id: this.maps.element.id + '_Legend_Group' });
+        this.maps.mapAreaRect = this.initialMapAreaRect;
         this.drawLegendItem(this.currentPage);
+        if (!isNullOrUndefined(this.maps.legendModule) && this.maps.legendSettings.position === 'Float') {
+            if (this.maps.isTileMap) {
+                this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.legendModule.legendGroup);
+            }
+            else {
+                this.maps.svgObject.appendChild(this.maps.legendModule.legendGroup);
+            }
+        }
         if (querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id)) {
             querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id).style.pointerEvents = 'none';
         }
@@ -11180,53 +11495,60 @@ class Legend {
         const areaWidth = totalRect.width;
         const totalWidth = map.availableSize.width;
         const totalHeight = map.availableSize.height;
+        const locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
+        const locationY = !isNullOrUndefined(legend.location.y) ? legend.location.y : 0;
         if (legend.position === 'Float') {
-            this.translate = legend.location;
+            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) : new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
+            this.legendTotalRect = map.mapAreaRect;
         }
         else {
             switch (legend.position) {
                 case 'Top':
                 case 'Bottom':
-                    totalRect.height = (areaHeight - height);
+                    totalRect.height = (legend.position === 'Top') ? (areaHeight - height) : (areaHeight - height - (spacing * 2));
                     x = (totalWidth / 2) - (width / 2);
                     y = (legend.position === 'Top') ? areaY : (areaY + totalRect.height);
-                    totalRect.y = (legend.position === 'Top') ? areaY + height + spacing : areaY;
+                    totalRect.y = (legend.position === 'Top') ? areaY + height + (map.isTileMap ? (spacing / 2) : spacing) : areaY - (spacing / 2);
                     break;
                 case 'Left':
                 case 'Right':
-                    totalRect.width = (areaWidth - width);
-                    x = (legend.position === 'Left') ? areaX : (areaX + totalRect.width) - spacing;
+                    totalRect.width = (areaWidth - width - map.mapAreaRect.x);
+                    x = (legend.position === 'Left') ? areaX + (spacing / 2) : (areaX + totalRect.width + spacing);
                     y = (totalHeight / 2) - (height / 2);
-                    totalRect.x = (legend.position === 'Left') ? areaX + width : areaX;
+                    totalRect.x = (legend.position === 'Left') ? areaX + width + spacing : areaX;
                     break;
             }
             switch (legend.alignment) {
                 case 'Near':
                     if (legend.position === 'Top' || legend.position === 'Bottom') {
-                        x = totalRect.x;
+                        x = totalRect.x - (legend.mode === 'Interactive' ? spacing : 0);
                     }
                     else {
-                        y = totalRect.y;
+                        y = totalRect.y - (!(legend.height && legend.width) && legend.mode === 'Interactive' ? map.mapAreaRect.x : 0);
                     }
                     break;
                 case 'Far':
                     if (legend.position === 'Top' || legend.position === 'Bottom') {
-                        x = (totalWidth - width) - spacing;
+                        x = (totalWidth - width) - (legend.mode === 'Interactive' ? 0 : spacing);
                     }
                     else {
-                        y = totalHeight - height;
+                        y = totalHeight - height - (legend.mode === 'Default' ? spacing : 0);
                     }
                     break;
             }
             if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
-                this.legendTotalRect = map.totalRect = totalRect;
+                this.legendTotalRect = map.mapAreaRect = map.totalRect = totalRect;
             }
             else {
+                map.totalRect = null;
                 if ((legend.height || legend.width) && legend.mode === 'Interactive') {
                     map.totalRect = totalRect;
                 }
                 this.legendTotalRect = map.mapAreaRect = totalRect;
             }
+            if (legend.position === 'Left') {
+                map.mapAreaRect.width = totalRect.width;
+            }
             this.translate = new Point(x, y);
         }
     }
@@ -11243,7 +11565,7 @@ class Legend {
                     data[this.maps.legendSettings.showLegendPath];
                 if (marker$$1.visible && showLegend && (!isNullOrUndefined(data['latitude'])) && (!isNullOrUndefined(data['longitude']))) {
                     if (marker$$1.template) {
-                        templateFn = getTemplateFunction(marker$$1.template);
+                        templateFn = getTemplateFunction(marker$$1.template, this.maps);
                         const templateElement = templateFn(this.maps);
                         const markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                             templateElement;
@@ -11347,6 +11669,13 @@ class Legend {
                     borderColor: legend.shapeBorder.color, borderWidth: legend.shapeBorder.width
                 });
             }
+            else {
+                for (let i = 0; i < this.legendCollection.length; i++) {
+                    if (this.legendCollection[i]['text'] === legendText && this.legendCollection[i]['fill'] === legendFill) {
+                        this.legendCollection[i].data.push(newColllection[0]);
+                    }
+                }
+            }
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11541,15 +11870,16 @@ class Legend {
         const width = 10;
         const direction = (legend.orientation === 'None') ? (legend.position === 'Top' || legend.position === 'Bottom')
             ? 'Horizontal' : 'Vertical' : legend.orientation;
+        rect.y = legend.position === 'Float' && this.maps.isTileMap ? rect.y - this.maps.mapAreaRect.y : rect.y;
         if (direction === 'Horizontal') {
             if (!legend.invertedPointer) {
-                locX = rect.x + (rect.width / 2);
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y;
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                     ' L ' + (locX + width) + ' ' + (locY - height) + ' Z ';
             }
             else {
-                locX = rect.x + (rect.width / 2);
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY + height) +
                     ' L ' + (locX + width) + ' ' + (locY + height) + ' Z ';
@@ -11557,20 +11887,25 @@ class Legend {
         }
         else {
             if (!legend.invertedPointer) {
-                locX = rect.x + (rect.width);
+                locX = rect.x + rect.width - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height / 2);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX + width) + ' ' + (locY - height) +
                     ' L ' + (locX + width) + ' ' + (locY + height) + ' z ';
             }
             else {
-                locX = rect.x;
+                locX = rect.x - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height / 2);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                     ' L ' + (locX - width) + ' ' + (locY + height) + ' z ';
             }
         }
         const pathOptions = new PathOption(id, fill, strokeWidth, stroke, 1, 1, '', path);
-        this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
+        if (legend.position === 'Float' && this.maps.isTileMap) {
+            this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.renderer.drawPath(pathOptions));
+        }
+        else {
+            this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
+        }
     }
     wireEvents(element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -11627,6 +11962,9 @@ class Legend {
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
+                                mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                    '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                    '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
                                 mapElement = mapElement.children[0];
                             }
                             if (isVisible && mapElement !== null) {
@@ -11768,6 +12106,9 @@ class Legend {
                                 '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                 '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(mapdata['shape']) && mapdata['shape'] === 'Balloon') {
+                                LegendInteractive = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                    '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                    '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id);
                                 LegendInteractive = LegendInteractive.children[0];
                             }
                             if (isVisible && LegendInteractive !== null) {
@@ -11931,10 +12272,20 @@ class Legend {
                 const shapeDataValueCase = !isNullOrUndefined(shapeData['properties'][shapePath])
                     && isNaN(shapeData['properties'][shapePath]) ? shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
-                    legendData.push({
-                        layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
-                        name: data[dataPath], value: value
-                    });
+                    if (shapeData['geometry']['type'] != 'MultiPoint') {
+                        legendData.push({
+                            layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                            name: data[dataPath], value: value, pointIndex: -1
+                        });
+                    }
+                    else {
+                        for (let j = 0; j < shapeData['geometry'].coordinates.length; j++) {
+                            legendData.push({
+                                layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                                name: data[dataPath], value: value, pointIndex: j
+                            });
+                        }
+                    }
                 }
             }
         }
@@ -11980,15 +12331,30 @@ class Legend {
     /**
      * To destroy the legend.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.legendCollection = [];
+        this.legendRenderingCollections = [];
+        this.translate = null;
+        this.legendBorderRect = null;
+        this.initialMapAreaRect = null;
+        this.legendTotalRect = null;
+        this.totalPages = [];
+        this.legendItemRect = null;
+        this.legendGroup = null;
+        this.shapeHighlightCollection = [];
+        this.legendHighlightCollection = [];
+        this.shapePreviousColor = [];
+        this.selectedNonLegendShapes = [];
+        this.legendLinearGradient = null;
+        this.currentLayer = null;
+        this.defsElement = null;
+        this.legendElement = [];
+        this.oldShapeElement = null;
         this.removeEventListener();
+        this.maps = null;
     }
 }
 
@@ -12045,7 +12411,8 @@ class Highlight {
             targetEle.getAttribute('class') !== 'ShapeselectionMapStyle' && !isTouch &&
             targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
-            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle') {
+            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
             layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let shapeData;
@@ -12055,8 +12422,9 @@ class Highlight {
             let dataIndex;
             if (targetEle.id.indexOf('shapeIndex') > -1) {
                 shapeIn = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features'] ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIn]['properties'] : null;
+                shapeData = this.maps.layers[layerIndex].shapeData['features'] &&
+                    !isNullOrUndefined(this.maps.layersCollection[layerIndex].layerData[shapeIn]) ?
+                    this.maps.layersCollection[layerIndex].layerData[shapeIn]['property'] : null;
                 dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.highlightSettings = this.maps.layers[layerIndex].highlightSettings;
@@ -12128,7 +12496,8 @@ class Highlight {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleHighlight(targetElement, layerIndex, data, shapeData) {
-        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule
+            && this.maps.legendSettings.type === 'Layers') {
             this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
         }
         const selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
@@ -12146,7 +12515,7 @@ class Highlight {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         const border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
             width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };
@@ -12202,15 +12571,13 @@ class Highlight {
     /**
      * To destroy the highlight.
      *
-     * @param {Maps} maps - Specifies the maps instance
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.highlightSettings = null;
         this.removeEventListener();
+        this.maps = null;
     }
 }
 
@@ -12230,7 +12597,6 @@ class Selection {
     addEventListener() {
         if (!this.maps.isDestroyed) {
             this.maps.on(click, this.mouseClick, this);
-            this.maps.on(Browser.touchEndEvent, this.mouseClick, this);
         }
     }
     /**
@@ -12243,7 +12609,6 @@ class Selection {
             return;
         }
         this.maps.off(click, this.mouseClick);
-        this.maps.off(Browser.touchEndEvent, this.mouseClick);
     }
     mouseClick(targetElement) {
         if (!isNullOrUndefined(targetElement['type']) && targetElement['type'].indexOf('touch') !== -1 &&
@@ -12261,8 +12626,12 @@ class Selection {
             const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
             if (targetElement.id.indexOf('shapeIndex') > -1) {
                 shapeIndex = parseInt(targetElement.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                shapeData = !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['features'])
+                    && this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] :
+                    !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['geometries'])
+                        && this.maps.layers[layerIndex].shapeData['geometries']['length'] > shapeIndex ?
+                        this.maps.layers[layerIndex].shapeData['geometries'][shapeIndex]['properties'] : null;
                 dataIndex = parseInt(targetElement.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.selectionsettings = this.maps.layers[layerIndex].selectionSettings;
@@ -12342,15 +12711,17 @@ class Selection {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectMap(targetElement, shapeData, data) {
         const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         const selectionsettings = this.selectionsettings;
         const border = {
-            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
-            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) : this.selectionsettings.border.color,
+            width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
+                (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
         };
         const eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
+            fill: isLineStringShape ? 'transparent' : (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none'),
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -12362,7 +12733,8 @@ class Selection {
         this.maps.trigger('itemSelection', eventArgs, (observedArgs) => {
             eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ? this.selectionsettings.opacity : this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
-                if (targetElement.getAttribute('class') === this.selectionType + 'selectionMapStyle') {
+                if (targetElement.getAttribute('class') === this.selectionType + 'selectionMapStyle'
+                    || targetElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(targetElement);
                     this.removedSelectionList(targetElement);
                     for (let m = 0; m < this.maps.shapeSelectionItem.length; m++) {
@@ -12381,14 +12753,23 @@ class Selection {
                 else {
                     const layetElement = getElementByID(this.maps.element.id + '_Layer_Collections');
                     if (!this.selectionsettings.enableMultiSelect &&
-                        layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length > 0) {
-                        const eleCount = layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length;
+                        (layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length > 0 ||
+                            layetElement.getElementsByClassName('LineselectionMapStyle').length > 0)) {
+                        let eleCount = layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle').length;
                         let ele;
                         for (let k = 0; k < eleCount; k++) {
                             ele = layetElement.getElementsByClassName(this.selectionType + 'selectionMapStyle')[0];
                             removeClass(ele);
                             this.removedSelectionList(ele);
                         }
+                        if (layetElement.getElementsByClassName('LineselectionMapStyle').length > 0) {
+                            eleCount = layetElement.getElementsByClassName('LineselectionMapStyle').length;
+                            for (let k = 0; k < eleCount; k++) {
+                                ele = layetElement.getElementsByClassName('LineselectionMapStyle')[0];
+                                removeClass(ele);
+                                this.removedSelectionList(ele);
+                            }
+                        }
                         if (this.selectionType === 'Shape') {
                             this.maps.shapeSelectionItem = [];
                             const selectionLength = this.maps.selectedElementId.length;
@@ -12406,13 +12787,24 @@ class Selection {
                             ele.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
                         }
                     }
-                    if (!getElement(this.selectionType + 'selectionMap')) {
-                        document.body.appendChild(createStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs));
+                    if (!isLineStringShape) {
+                        if (!getElement(this.selectionType + 'selectionMap')) {
+                            document.body.appendChild(createStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', this.selectionType + 'selectionMapStyle');
                     }
                     else {
-                        customizeStyle(this.selectionType + 'selectionMap', this.selectionType + 'selectionMapStyle', eventArgs);
+                        if (!getElement('LineselectionMap')) {
+                            document.body.appendChild(createStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', 'LineselectionMapStyle');
                     }
-                    targetElement.setAttribute('class', this.selectionType + 'selectionMapStyle');
                     if (targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
                         this.maps.shapeSelectionClass = getElement(this.selectionType + 'selectionMap');
                         this.maps.selectedElementId.push(targetElement.getAttribute('id'));
@@ -12481,15 +12873,13 @@ class Selection {
     /**
      * To destroy the selection.
      *
-     * @param {Maps} maps - Specifies the maps instance.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.selectionsettings = null;
         this.removeEventListener();
+        this.maps = null;
     }
 }
 
@@ -12672,7 +13062,7 @@ class MapsTooltip {
                 options: tooltipOption,
                 fill: option.fill,
                 maps: this.maps,
-                element: target, eventArgs: e
+                element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
             this.maps.trigger(tooltipRender, tooltipArgs, (args) => {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
@@ -12690,7 +13080,7 @@ class MapsTooltip {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -12706,7 +13096,7 @@ class MapsTooltip {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -12716,6 +13106,10 @@ class MapsTooltip {
                             fill: tooltipArgs.fill || this.maps.themeStyle.tooltipFillColor
                         });
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this.maps.isVue || this.maps.isVue3) {
+                        this.svgTooltip.controlInstance = this.maps;
+                    }
                     this.svgTooltip.opacity = this.maps.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
                     this.svgTooltip.appendTo(tooltipEle);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12729,9 +13123,7 @@ class MapsTooltip {
                     }
                 }
                 else {
-                    this.removeTooltip();
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.maps.clearTemplate();
+                    this.clearTooltip();
                 }
             });
             if (this.svgTooltip) {
@@ -12746,9 +13138,7 @@ class MapsTooltip {
                 });
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
         else {
@@ -12758,9 +13148,7 @@ class MapsTooltip {
                 this.maps.notify(click, this);
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
     }
@@ -12804,8 +13192,18 @@ class MapsTooltip {
         }
     }
     removeTooltip() {
+        let isTooltipRemoved = false;
         if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
             remove(document.getElementsByClassName('EJ2-maps-Tooltip')[0]);
+            isTooltipRemoved = true;
+        }
+        return isTooltipRemoved;
+    }
+    clearTooltip() {
+        const isTooltipRemoved = this.removeTooltip();
+        if (isTooltipRemoved) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.maps.clearTemplate();
         }
     }
     // eslint-disable-next-line valid-jsdoc
@@ -12854,12 +13252,17 @@ class MapsTooltip {
     /**
      * To destroy the tooltip.
      *
-     * @param {Maps} maps Specifies the maps instance
      * @returns {void}
      * @private
      */
-    destroy(maps) {
+    destroy() {
+        if (!isNullOrUndefined(this.svgTooltip)) {
+            this.svgTooltip.destroy();
+        }
+        this.svgTooltip = null;
         this.removeEventListener();
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     }
 }
 
@@ -12872,7 +13275,6 @@ class Zoom {
         this.mouseEnter = false;
         this.isTouch = false;
         this.rectZoomingStart = false;
-        this.pinchRect = new Rect(0, 0, 0, 0);
         this.browserName = Browser.info.name;
         // eslint-disable-next-line @typescript-eslint/ban-types
         this.isPointer = Browser.isPointer;
@@ -12881,8 +13283,6 @@ class Zoom {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.shapeZoomLocation = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.intersect = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.mouseDownLatLong = { x: 0, y: 0 };
@@ -12898,7 +13298,6 @@ class Zoom {
         this.selectionColor = this.maps.zoomSettings.selectionColor;
         this.fillColor = this.maps.zoomSettings.color;
         this.addEventListener();
-        this.groupElements = [];
     }
     /**
      * To perform zooming for maps
@@ -12921,24 +13320,43 @@ class Zoom {
         const minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         const prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && (type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)) {
+        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+            || map.isReset)) {
             const availSize = map.mapAreaRect;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const minBounds = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const maxBounds = map.baseMapRectBounds['max'];
-            const mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
-            const mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            const point = map.translatePoint;
-            let translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-            let translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-            const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+            let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+            let translatePointX;
+            let translatePointY;
+            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                const point = map.translatePoint;
+                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = newZoomFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            this.applyTransform();
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.previousPoint;
+                map.scale = map.mapScaleValue = map.previousScale;
+            }
+            else {
+                this.applyTransform(map);
+            }
         }
         else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
             this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
@@ -12955,34 +13373,49 @@ class Zoom {
             }
             map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
             map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            if (document.querySelector('.GroupElement')) {
-                document.querySelector('.GroupElement').style.display = 'none';
-            }
-            if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                map.scale = map.previousScale;
+                map.tileZoomLevel = prevLevel;
+                map.zoomSettings.zoomFactor = map.previousScale;
             }
-            this.markerLineAnimation(map);
-            map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-            const element1 = document.getElementById(this.maps.element.id + '_tiles');
-            const animationDuration = this.maps.layersCollection[0].animationDuration;
-            setTimeout(() => {
-                // if (type === 'ZoomOut') {
-                //     element1.removeChild(element1.children[element1.childElementCount - 1]);
-                //     if (element1.childElementCount) {
-                //         element1.removeChild(element1.children[element1.childElementCount - 1]);
-                //     } else {
-                //         element1 = element1;
-                //     }
-                // }
-                this.applyTransform();
+            else {
+                if (document.querySelector('.GroupElement')) {
+                    document.querySelector('.GroupElement').style.display = 'none';
+                }
                 if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                 }
-            }, animationDuration);
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
+                const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                const animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(() => {
+                    // if (type === 'ZoomOut') {
+                    //     element1.removeChild(element1.children[element1.childElementCount - 1]);
+                    //     if (element1.childElementCount) {
+                    //         element1.removeChild(element1.children[element1.childElementCount - 1]);
+                    //     } else {
+                    //         element1 = element1;
+                    //     }
+                    // }
+                    this.applyTransform(this.maps);
+                    if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    }
+                }, animationDuration);
+            }
         }
         this.maps.zoomNotApplied = false;
     }
+    calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
+        mapTotalWidth *= newZoomFactor;
+        mapTotalHeight *= newZoomFactor;
+        let widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        return new Point(translatePointX, translatePointY);
+    }
     triggerZoomEvent(prevTilePoint, prevLevel, type) {
         const map = this.maps;
         let zoomArgs;
@@ -13001,6 +13434,7 @@ class Zoom {
             };
         }
         map.trigger('zoom', zoomArgs);
+        return zoomArgs.cancel;
     }
     getTileTranslatePosition(prevLevel, currentLevel, position, type) {
         const map = this.maps;
@@ -13026,6 +13460,7 @@ class Zoom {
         const zoomRect = this.zoomingRect;
         const maxZoom = map.zoomSettings.maxZoom;
         const minZoom = map.zoomSettings.minZoom;
+        let isZoomCancelled;
         if (zoomRect.height > 0 && zoomRect.width > 0) {
             const x = this.zoomingRect.x + (this.zoomingRect.width / 2);
             const y = this.zoomingRect.y + (this.zoomingRect.height / 2);
@@ -13038,7 +13473,11 @@ class Zoom {
                 const translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
                 map.translatePoint = new Point(translatePointX, translatePointY);
                 map.scale = zoomCalculationFactor;
-                this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                if (isZoomCancelled) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.previousScale;
+                }
             }
             else {
                 zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
@@ -13051,13 +13490,21 @@ class Zoom {
                 map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
                     (Math.pow(2, zoomCalculationFactor));
                 map.scale = (Math.pow(2, zoomCalculationFactor));
-                this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-                map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
+                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                if (isZoomCancelled) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
+                }
+                else {
+                    map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
+                }
+            }
+            if (!isZoomCancelled) {
+                map.mapScaleValue = zoomCalculationFactor;
+                this.applyTransform(map, true);
+                this.maps.zoomNotApplied = false;
+                this.zoomingRect = null;
             }
-            map.mapScaleValue = zoomCalculationFactor;
-            this.applyTransform(true);
-            this.maps.zoomNotApplied = false;
-            this.zoomingRect = null;
         }
     }
     setInteraction(newInteraction) {
@@ -13085,23 +13532,41 @@ class Zoom {
         this.lastScale = scale;
         this.pinchFactor *= newScale;
         this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
-        const zoomCalculationFactor = this.pinchFactor;
+        let zoomCalculationFactor = this.pinchFactor;
+        let isZoomCancelled;
         if (!map.isTileMap) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const minBounds = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const maxBounds = map.baseMapRectBounds['max'];
-            const mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            const mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+            let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+            let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             const translatePoint = map.translatePoint;
-            const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
-            let translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
-            let translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            let translatePointX;
+            let translatePointY;
+            if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
+                translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
+                translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = zoomCalculationFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            if (isZoomCancelled) {
+                map.translatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
         }
         else {
             const newTileFactor = zoomCalculationFactor;
@@ -13112,10 +13577,20 @@ class Zoom {
             map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
                 (Math.pow(2, newTileFactor));
             map.scale = (Math.pow(2, newTileFactor));
-            this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-            map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
+            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            if (isZoomCancelled) {
+                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                map.scale = map.previousScale;
+                map.tileZoomLevel = prevLevel;
+                map.zoomSettings.zoomFactor = map.previousScale;
+            }
+            else {
+                map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
+            }
+        }
+        if (!isZoomCancelled) {
+            this.applyTransform(map);
         }
-        this.applyTransform();
     }
     drawZoomRectangle() {
         const map = this.maps;
@@ -13161,17 +13636,17 @@ class Zoom {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     }
-    applyTransform(animate$$1) {
+    applyTransform(maps, animate$$1) {
         let layerIndex;
         this.templateCount = 0;
         let markerStyle;
-        const scale = this.maps.scale;
-        const x = this.maps.translatePoint.x;
-        const y = this.maps.translatePoint.y;
+        const scale = maps.scale;
+        const x = maps.translatePoint.x;
+        const y = maps.translatePoint.y;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.maps.zoomShapeCollection = [];
-        if (document.getElementById(this.maps.element.id + '_mapsTooltip')) {
-            removeElement(this.maps.element.id + '_mapsTooltip');
+        maps.zoomShapeCollection = [];
+        if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+            removeElement(maps.element.id + '_mapsTooltip');
         }
         if (this.layerCollectionEle) {
             for (let i = 0; i < this.layerCollectionEle.childElementCount; i++) {
@@ -13179,30 +13654,29 @@ class Zoom {
                 if (layerElement.tagName === 'g') {
                     this.templateCount++;
                     this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
-                    this.currentLayer = this.maps.layersCollection[this.index];
-                    const factor = this.maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    this.currentLayer = maps.layersCollection[this.index];
+                    const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                     for (let j = 0; j < layerElement.childElementCount; j++) {
                         let currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
                             && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {
-                            if (this.maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
+                            if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[0]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
-                            else {
-                                changeBorderWidth(currentEle, this.index, scale, this.maps);
-                                this.maps.zoomTranslatePoint = this.maps.translatePoint;
+                            else if (currentEle.id.indexOf('Legend') == -1) {
+                                changeBorderWidth(currentEle, this.index, scale, maps);
+                                maps.zoomTranslatePoint = maps.translatePoint;
                                 this.animateTransform(currentEle, animate$$1, x, y, scale);
-                                this.shapeZoomLocation = currentEle.childNodes;
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning) {
+                            if (!this.isPanning && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -13221,11 +13695,11 @@ class Zoom {
                                             markerSelectionValues['latitude'] ||
                                             this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x]['longitude'] ===
                                                 markerSelectionValues['longitude']) {
-                                            this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
+                                            maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
-                                        if (this.maps.isTileMap) {
+                                    if ((this.currentLayer.animationDuration > 0 || (maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (maps.isTileMap) {
                                             const groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
                                                 groupElement.style.display = 'none';
@@ -13237,29 +13711,29 @@ class Zoom {
                                         }
                                     }
                                 }
-                                if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
-                                    clusterSeparate(this.maps.markerModule.sameMarkerData, this.maps, currentEle, true);
+                                if (this.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                    clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
-                                else if (this.maps.markerModule.sameMarkerData.length > 0) {
-                                    this.maps.markerModule.sameMarkerData = [];
-                                    if (document.getElementById(this.maps.element.id + '_mapsTooltip')) {
-                                        removeElement(this.maps.element.id + '_mapsTooltip');
+                                else if (maps.markerModule.sameMarkerData.length > 0) {
+                                    maps.markerModule.sameMarkerData = [];
+                                    if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+                                        removeElement(maps.element.id + '_mapsTooltip');
                                     }
                                 }
-                                if (document.getElementById(this.maps.element.id + '_mapsTooltip') && this.maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
+                                if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
                                     && !this.isPanning) {
-                                    const mapsTooltip = this.maps.mapsTooltipModule;
+                                    const mapsTooltip = maps.mapsTooltipModule;
                                     const tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
                                         if (tooltipElement['style']['visibility'] === 'hidden') {
-                                            removeElement(this.maps.element.id + '_mapsTooltip');
+                                            removeElement(maps.element.id + '_mapsTooltip');
                                         }
                                         else {
                                             let x = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
                                             let y = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
-                                            if (this.maps.isTileMap) {
-                                                x += +getElement(this.maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
-                                                y += +getElement(this.maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
+                                            if (maps.isTileMap) {
+                                                x += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
+                                                y += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
                                             }
                                             mapsTooltip.svgTooltip.location.x = x;
                                             mapsTooltip.svgTooltip.location.y = y;
@@ -13277,9 +13751,9 @@ class Zoom {
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 const bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 const dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
-                                for (let l = 0; l < this.maps.bubbleModule.bubbleCollection.length; l++) {
+                                for (let l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    const bubbleCollection = this.maps.bubbleModule.bubbleCollection[l];
+                                    const bubbleCollection = maps.bubbleModule.bubbleCollection[l];
                                     if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
                                         bubbleCollection['DataIndex'] === dataIndex) {
                                         const centerX = bubbleCollection['center']['x'];
@@ -13298,24 +13772,25 @@ class Zoom {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1) {
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this.index])) {
                             this.intersect = [];
-                            this.maps.zoomLabelPositions = [];
-                            this.maps.zoomLabelPositions = this.maps.dataLabelModule.dataLabelCollections;
+                            maps.zoomLabelPositions = [];
+                            maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
+                            let labelAnimate = !maps.isTileMap && animate$$1;
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this.zoomshapewidth = this.shapeZoomLocation[labelIndex].getBoundingClientRect();
-                                    this.maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', animate$$1);
-                                    const dataLabel = this.maps.layers[this.index].dataLabelSettings;
+                                    this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
+                                    maps.zoomShapeCollection.push(this.zoomshapewidth);
+                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
+                                    const dataLabel = maps.layers[this.index].dataLabelSettings;
                                     const border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
-                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1) {
-                                            const labelX = ((this.maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
-                                            const labelY = ((this.maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
+                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
+                                            const labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
+                                            const labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             const zoomtext = currentEle.childNodes[k]['innerHTML'];
-                                            const style = this.maps.layers[this.index].dataLabelSettings.textStyle;
+                                            const style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             const zoomtextSize = measureText(zoomtext, style);
                                             const padding = 5;
                                             const rectElement = currentEle.childNodes[k - 1];
@@ -13330,11 +13805,11 @@ class Zoom {
                         }
                     }
                 }
-                this.maps.arrangeTemplate();
+                maps.arrangeTemplate();
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate$$1 || this.currentLayer.animationDuration === 0 || this.maps.isTileMap) {
-                    this.processTemplate(x, y, scale, this.maps);
+                if (!animate$$1 || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
+                    this.processTemplate(x, y, scale, maps);
                 }
             }
         }
@@ -13392,10 +13867,10 @@ class Zoom {
                     }
                     const lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : 0;
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
                     const long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : 0;
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
                     const offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                         const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -13415,10 +13890,10 @@ class Zoom {
                     nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
                     markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
                     markerCounts += (eventArgs.cancel) ? 1 : 0;
-                    this.maps.markerNullCount = (!isNullOrUndefined(lati) || !isNullOrUndefined(long))
-                        ? this.maps.markerNullCount : this.maps.markerNullCount + 1;
+                    this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
+                        ? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
                     const markerDataLength = markerDatas.length - this.maps.markerNullCount;
-                    if (markerSVGObject.childElementCount === (markerDatas.length - markerTemplateCounts - nullCount) && (type !== 'Template')) {
+                    if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(markerSVGObject);
                         if (currentLayers.markerClusterSettings.allowClustering) {
                             this.maps.svgObject.appendChild(markerSVGObject);
@@ -13426,7 +13901,7 @@ class Zoom {
                             clusterTemplate(currentLayers, markerSVGObject, this.maps, layerIndex, markerSVGObject, layerElement, true, true);
                         }
                     }
-                    if (markerTemplateElements.childElementCount === (markerDatas.length - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
+                    if (markerTemplateElements.childElementCount === (markerDataLength - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
                         getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
                         if (scale >= 1) {
                             if (currentLayers.markerClusterSettings.allowClustering) {
@@ -13521,7 +13996,7 @@ class Zoom {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = (this.zoomshapewidth['width'] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.innerHTML = text;
                         }
                         else {
@@ -13531,7 +14006,7 @@ class Zoom {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             text = zoomtrimLabel;
                             element.innerHTML = text;
                         }
@@ -13569,7 +14044,7 @@ class Zoom {
                                     || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim(this.zoomshapewidth['width'], trimmedLable, style);
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
                                     }
                                     element.innerHTML = trimmedLable;
                                 }
@@ -13595,11 +14070,11 @@ class Zoom {
                         }
                         this.intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             element.innerHTML = trimmedLable;
                         }
                     }
-                    else {
+                    if (animate$$1 || duration > 0) {
                         smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                     }
                 }
@@ -13720,7 +14195,7 @@ class Zoom {
             const layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
             const elementRect = getElementByID(map.element.id + '_svg').getBoundingClientRect();
             const panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
-                ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
+                ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             const panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13734,15 +14209,15 @@ class Zoom {
             if (!panArgs.cancel) {
                 if (panningXDirection && panningYDirection) {
                     map.translatePoint = new Point(x, y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
                 else if (panningXDirection) {
                     map.translatePoint = new Point(x, map.translatePoint.y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
                 else if (panningYDirection) {
                     map.translatePoint = new Point(map.translatePoint.x, y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
             }
             this.maps.zoomNotApplied = false;
@@ -13770,7 +14245,7 @@ class Zoom {
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
-            this.applyTransform();
+            this.applyTransform(map);
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
@@ -13782,7 +14257,7 @@ class Zoom {
             (this.distanceX / this.maps.scale)) : this.maps.translatePoint.x;
         this.maps.translatePoint.y = !isNullOrUndefined(this.distanceY) ? this.maps.translatePoint.y -
             (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
-        this.applyTransform(false);
+        this.applyTransform(this.maps, false);
     }
     toolBarZooming(zoomFactor, type) {
         const map = this.maps;
@@ -13809,20 +14284,38 @@ class Zoom {
             const min = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const max = map.baseMapRectBounds['max'];
-            const mapWidth = Math.abs(max['x'] - min['x']);
-            const mapHeight = Math.abs(min['y'] - max['y']);
-            let translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
-            let translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
-            const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
-                : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
-                : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            let mapWidth = Math.abs(max['x'] - min['x']);
+            let mapHeight = Math.abs(min['y'] - max['y']);
+            let translatePointX;
+            let translatePointY;
+            if (zoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
+                zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                zoomFactor = zoomFactor > 1.05 ? 1 : zoomFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
+            }
+            else {
+                translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
+                translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
+                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
+                    : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
+                    : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.zoomTranslatePoint = map.translatePoint;
             map.scale = zoomFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            this.applyTransform(true);
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
+            else {
+                this.applyTransform(map, true);
+            }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
             let tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
@@ -13839,34 +14332,44 @@ class Zoom {
                     map.tileTranslatePoint.y = map.initialTileTranslate.y;
                     tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
                 }
-                this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
-                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-                if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
-                }
-                if (document.querySelector('.GroupElement')) {
-                    document.querySelector('.GroupElement').style.display = 'none';
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.previousScale;
+                    map.tileZoomLevel = prevLevel;
+                    map.zoomSettings.zoomFactor = map.previousScale;
                 }
-                this.markerLineAnimation(map);
-                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-                const element1 = document.getElementById(this.maps.element.id + '_tiles');
-                const animationDuration = this.maps.layersCollection[0].animationDuration;
-                setTimeout(() => {
-                    this.applyTransform(true);
+                else {
+                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
                     if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                     }
-                }, animationDuration);
+                    if (document.querySelector('.GroupElement')) {
+                        document.querySelector('.GroupElement').style.display = 'none';
+                    }
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                    const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                    const animationDuration = this.maps.layersCollection[0].animationDuration;
+                    setTimeout(() => {
+                        this.applyTransform(this.maps, true);
+                        if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                            document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        }
+                        this.maps.isAddLayer = false;
+                    }, animationDuration);
+                }
             }
             this.maps.zoomNotApplied = false;
         }
     }
     createZoomingToolbars() {
         const map = this.maps;
+        let zoomInElements;
+        let zoomOutElements;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
-            opacity: map.theme.toLowerCase() === 'fluentuidark' ? 0.6 : 0.3
+            opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
         });
         const kitHeight = 16;
         const kitWidth = 16;
@@ -13881,7 +14384,6 @@ class Zoom {
         const toolBarLength = map.zoomSettings.toolbars.length;
         const toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
         const toolHeight = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (kitHeight * 2) : (toolBarLength * kitHeight) + (toolBarLength * padding);
-        this.toolBarGroup.appendChild(map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', 'transparent', { color: 'transparent', width: 1 }, 1, new Rect(0, 0, toolWidth, toolHeight), 0, 0)));
         const defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
@@ -13930,13 +14432,13 @@ class Zoom {
                 case 'zoomin':
                     direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
                     this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Path', fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
-                    this.zoomInElements = this.currentToolbarEle;
+                    zoomInElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'zoomout':
                     direction = 'M 0, 8 L 16, 8';
                     this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
-                    this.zoomOutElements = this.currentToolbarEle;
+                    zoomOutElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'pan': {
@@ -14121,7 +14623,12 @@ class Zoom {
                 x = (size.width / 2) - (toolBarSize.width / 2);
                 break;
             case 'Far':
-                x = (size.width - toolBarSize.width) - padding;
+                if (!isNullOrUndefined(map.legendModule) && map.legendSettings.position === 'Left') {
+                    x = size.width + size.x - toolBarSize.width - padding;
+                }
+                else {
+                    x = (size.width - toolBarSize.width) - padding;
+                }
                 break;
         }
         let extraPosition = map.getExtraPosition();
@@ -14177,6 +14684,7 @@ class Zoom {
                 }
                 else {
                     map.mapScaleValue = value - delta;
+                    map.isReset = (map.mapScaleValue < 1) ? true : false;
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.mapScaleValue === 1) {
                         map.markerCenterLatitude = null;
@@ -14270,14 +14778,14 @@ class Zoom {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
                         }
                     }
                 }
             }
             else {
-                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
                 if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');
@@ -14427,15 +14935,30 @@ class Zoom {
     /**
      * To destroy the zoom.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
+    destroy() {
+        this.toolBarGroup = null;
+        this.currentToolbarEle = null;
+        this.zoomingRect = null;
+        this.zoomElements = null;
+        this.panElements = null;
+        this.baseTranslatePoint = null;
+        this.touchStartList = null;
+        this.touchMoveList = null;
+        this.previousTouchMoveList = null;
+        this.mouseDownPoints = null;
+        this.mouseMovePoints = null;
+        this.startTouches = [];
+        this.zoomshapewidth = null;
+        this.intersect = [];
+        this.mouseDownLatLong = null;
+        this.mouseMoveLatLong = null;
         this.removeEventListener();
-        /**
-         * Destroy method performed here
-         */
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
+        this.currentLayer = null;
     }
 }
 
@@ -14451,9 +14974,7 @@ class Print {
      *
      * @param {Maps} control - Specifies the instance of the map
      */
-    constructor(control) {
-        this.control = control;
-    }
+    constructor(control) { }
     /**
      * To print the Maps
      *
@@ -14461,16 +14982,16 @@ class Print {
      * @returns {void}
      * @private
      */
-    print(elements) {
-        this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
-        this.printWindow.moveTo(0, 0);
-        this.printWindow.resizeTo(screen.availWidth, screen.availHeight);
+    print(maps, elements) {
+        let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        printWindow.moveTo(0, 0);
+        printWindow.resizeTo(screen.availWidth, screen.availHeight);
         const argsData = {
-            cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
+            cancel: false, htmlContent: this.getHTMLContent(maps, elements), name: beforePrint
         };
-        this.control.trigger('beforePrint', argsData, (beforePrintArgs) => {
+        maps.trigger('beforePrint', argsData, (beforePrintArgs) => {
             if (!argsData.cancel) {
-                print(argsData.htmlContent, this.printWindow);
+                print(argsData.htmlContent, printWindow);
             }
         });
     }
@@ -14481,10 +15002,29 @@ class Print {
      * @returns {Element} - Returns the div element
      * @private
      */
-    getHTMLContent(elements) {
-        const elementRect = getClientElement(this.control.element.id);
+    getHTMLContent(maps, elements) {
         let div = createElement('div');
-        div.setAttribute("style", "margin-top:" + elementRect["top"] + "px");
+        let divElement = maps.element.cloneNode(true);
+        if (maps.isTileMap) {
+            for (let i = 0; i < divElement.childElementCount; i++) {
+                if (divElement.children[i].id === maps.element.id + '_tile_parent') {
+                    divElement.children[i].style.removeProperty('height');
+                    divElement.children[i].style.removeProperty('width');
+                    divElement.children[i].style.removeProperty('top');
+                    divElement.children[i].style.removeProperty('left');
+                    divElement.children[i].style.removeProperty('right');
+                    divElement.children[i].style.removeProperty('overflow');
+                    const svgElement = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
+                    divElement.children[i].children[0].style.overflow = 'hidden';
+                    divElement.children[i].children[0].style.position = 'absolute';
+                    divElement.children[i].children[0].style.height = svgElement.style.height;
+                    divElement.children[i].children[0].style.width = svgElement.style.width;
+                    divElement.children[i].children[0].style.left = svgElement.style.left;
+                    divElement.children[i].children[0].style.top = svgElement.style.top;
+                    break;
+                }
+            }
+        }
         if (elements) {
             if (elements instanceof Array) {
                 Array.prototype.forEach.call(elements, (value) => {
@@ -14499,7 +15039,7 @@ class Print {
             }
         }
         else {
-            div.appendChild(this.control.element.cloneNode(true));
+            div.appendChild(divElement);
         }
         return div;
     }
@@ -14514,15 +15054,10 @@ class Print {
     /**
      * To destroy the print.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -14538,7 +15073,6 @@ class ImageExport {
      * @param {Maps} control - Specifies the instance of the map
      */
     constructor(control) {
-        this.control = control;
     }
     /**
      * To export the file as image/svg format
@@ -14549,29 +15083,28 @@ class ImageExport {
      * @returns {Promise<string>} - Returns the promise string.
      * @private
      */
-    export(type, fileName, allowDownload) {
+    export(maps, type, fileName, allowDownload) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
             const imageCanvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'width': this.control.availableSize.width.toString(),
-                    'height': this.control.availableSize.height.toString()
+                    'width': maps.availableSize.width.toString(),
+                    'height': maps.availableSize.height.toString()
                 }
             });
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            const toolbarEle = document.getElementById(this.control.element.id + '_ToolBar');
-            const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
-            const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
+            const toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
+            const svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             let svgDataElement;
             let tileSvg;
-            let svgObject = getElementByID(this.control.element.id + '_svg').cloneNode(true);
-            if (!this.control.isTileMap) {
+            let svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
+            if (!maps.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                    this.control.svgObject.outerHTML + '</svg>';
+                    maps.svgObject.outerHTML + '</svg>';
             }
             else {
-                tileSvg = getElementByID(this.control.element.id + '_Tile_SVG').cloneNode(true);
+                tileSvg = getElementByID(maps.element.id + '_Tile_SVG').cloneNode(true);
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                     svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
             }
@@ -14588,7 +15121,7 @@ class ImageExport {
             else {
                 const image = new Image();
                 const ctxt = imageCanvasElement.getContext('2d');
-                if (!this.control.isTileMap) {
+                if (!maps.isTileMap) {
                     image.onload = (() => {
                         ctxt.drawImage(image, 0, 0);
                         window.URL.revokeObjectURL(url);
@@ -14607,35 +15140,37 @@ class ImageExport {
                     image.src = url;
                 }
                 else {
-                    const extraSpace = getClientElement(this.control.element.id);
+                    const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
+                    let top = parseFloat(svgParentElement.getAttribute('y'));
+                    let left = parseFloat(svgParentElement.getAttribute('x'));
                     const imgxHttp = new XMLHttpRequest();
-                    const imgTileLength = this.control.mapLayerPanel.tiles.length;
+                    const imgTileLength = maps.mapLayerPanel.tiles.length;
                     for (let i = 0; i <= imgTileLength + 1; i++) {
-                        const tile = document.getElementById(this.control.element.id + '_tile_' + (i - 1));
+                        const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         const exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        ctxt.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
-                        ctxt.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
-                        ctxt.font = this.control.titleSettings.textStyle.size + ' Arial';
-                        let titleElement = document.getElementById(this.control.element.id + '_Map_title');
+                        ctxt.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                        ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                        ctxt.font = maps.titleSettings.textStyle.size + ' Arial';
+                        let titleElement = document.getElementById(maps.element.id + '_Map_title');
                         if (!isNullOrUndefined(titleElement)) {
                             ctxt.fillStyle = titleElement.getAttribute('fill');
-                            ctxt.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                            ctxt.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
                         }
                         exportTileImg.onload = (() => {
                             if (i === 0 || i === imgTileLength + 1) {
                                 if (i === 0) {
                                     ctxt.setTransform(1, 0, 0, 1, 0, 0);
-                                    ctxt.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                    ctxt.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                     ctxt.clip();
                                 }
                                 else {
-                                    ctxt.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace["top"]));
+                                    ctxt.setTransform(1, 0, 0, 1, left, top);
                                 }
                             }
                             else {
-                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + this.control.margin.left, parseFloat(tile.style.top) +
-                                    (parseFloat(tileParent.style.top)) - extraSpace["top"]);
+                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) +
+                                    top);
                             }
                             ctxt.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength + 1) {
@@ -14687,15 +15222,10 @@ class ImageExport {
     /**
      * To destroy the ImageExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -14710,9 +15240,7 @@ class PdfExport {
      *
      * @param {Maps} control Specifies the instance of the map
      */
-    constructor(control) {
-        this.control = control;
-    }
+    constructor() { }
     /**
      * To export the file as image/svg format
      *
@@ -14723,25 +15251,24 @@ class PdfExport {
      * @returns {Promise<string>} - Returns the promise string
      * @private
      */
-    export(type, fileName, allowDownload, orientation) {
+    export(maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
             const canvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'width': this.control.availableSize.width.toString(),
-                    'height': this.control.availableSize.height.toString()
+                    'width': maps.availableSize.width.toString(),
+                    'height': maps.availableSize.height.toString()
                 }
             });
             orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
-            const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+            const svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             let svgData;
-            const exportElement = this.control.svgObject.cloneNode(true);
-            const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
+            const exportElement = maps.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             const backgroundColor = backgroundElement.getAttribute('fill');
-            if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark')
-                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5' || maps.theme === 'Bootstrap5Dark'
+                || maps.theme === 'Fluent' || maps.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -14749,7 +15276,7 @@ class PdfExport {
             const pdfDocument = new PdfDocument();
             const image = new Image();
             const ctx = canvasElement.getContext('2d');
-            if (!this.control.isTileMap) {
+            if (!maps.isTileMap) {
                 image.onload = (() => {
                     ctx.drawImage(image, 0, 0);
                     window.URL.revokeObjectURL(url);
@@ -14757,7 +15284,7 @@ class PdfExport {
                         let imageString = canvasElement.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
                         pdfDocument.pageSettings.orientation = orientation;
                         imageString = imageString.slice(imageString.indexOf(',') + 1);
-                        pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (this.control.availableSize.width - 60), this.control.availableSize.height);
+                        pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
                         if (allowDownload) {
                             pdfDocument.save(fileName + '.pdf');
                             pdfDocument.destroy();
@@ -14770,35 +15297,36 @@ class PdfExport {
                 image.src = url;
             }
             else {
-                const extraSpace = getClientElement(this.control.element.id);
+                const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
+                let top = parseFloat(svgParentElement.getAttribute('y'));
+                let left = parseFloat(svgParentElement.getAttribute('x'));
                 const xHttp = new XMLHttpRequest();
-                const tileLength = this.control.mapLayerPanel.tiles.length;
+                const tileLength = maps.mapLayerPanel.tiles.length;
                 for (let i = 0; i <= tileLength + 1; i++) {
-                    const tile = document.getElementById(this.control.element.id + '_tile_' + (i - 1));
+                    const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     const tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    ctx.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
-                    ctx.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
-                    ctx.font = this.control.titleSettings.textStyle.size + ' Arial';
-                    let titleElement = document.getElementById(this.control.element.id + '_Map_title');
+                    ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                    ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                    ctx.font = maps.titleSettings.textStyle.size + ' Arial';
+                    let titleElement = document.getElementById(maps.element.id + '_Map_title');
                     if (!isNullOrUndefined(titleElement)) {
                         ctx.fillStyle = titleElement.getAttribute('fill');
-                        ctx.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                        ctx.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
                     }
                     tileImg.onload = (() => {
                         if (i === 0 || i === tileLength + 1) {
                             if (i === 0) {
                                 ctx.setTransform(1, 0, 0, 1, 0, 0);
-                                ctx.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                ctx.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace["top"]));
+                                ctx.setTransform(1, 0, 0, 1, left, top);
                             }
                         }
                         else {
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + this.control.margin.left, (parseFloat(tile.style.top) +
-                                (parseFloat(tileParent.style.top)) - extraSpace["top"]));
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) + top);
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength + 1) {
@@ -14807,7 +15335,7 @@ class PdfExport {
                                 let x = localStorage.getItem('saved-image-example');
                                 pdfDocument.pageSettings.orientation = orientation;
                                 x = x.slice(x.indexOf(',') + 1);
-                                pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (this.control.availableSize.width - 60), this.control.availableSize.height);
+                                pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
                                 if (allowDownload) {
                                     pdfDocument.save(fileName + '.pdf');
                                     pdfDocument.destroy();
@@ -14824,7 +15352,7 @@ class PdfExport {
                         }
                         else {
                             setTimeout(() => {
-                                let tileSvg = document.getElementById(this.control.element.id + '_Tile_SVG');
+                                let tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
                                 tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
@@ -14848,17 +15376,12 @@ class PdfExport {
         return 'PdfExport';
     }
     /**
-     * To destroy the PdfExports.
+     * To destroy the PdfExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /**
@@ -14869,5 +15392,5 @@ class PdfExport {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
 //# sourceMappingURL=ej2-maps.es2015.js.map