@syncfusion/ej2-maps 19.4.55 → 19.4.56-105067

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

@@ -3,19 +3,19 @@ import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable max-len */
@@ -788,6 +788,8 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     var opacity = shapeCustom['opacity'];
     var rectOptions;
     var pathOptions = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
+    size.width = typeof (size.width) === 'string' ? parseInt(size.width, 10) : size.width;
+    size.height = typeof (size.height) === 'string' ? parseInt(size.height, 10) : size.height;
     if (shape === 'Circle') {
         var radius = (size.width + size.height) / 4;
         var circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
@@ -1005,8 +1007,8 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location_1.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location_1.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_1.x;
                             tempY = location_1.y;
@@ -1085,12 +1087,15 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        var 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);
+            var layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            if (!isNullOrUndefined(layerGroupElement)) {
+                layerGroupElement.appendChild(layerElement);
+            }
         }
     });
 }
@@ -1107,15 +1112,16 @@ function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     var markerIndex = sameMarkerData[0].markerIndex;
     var dataIndex = sameMarkerData[0].dataIndex;
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElement(clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     var clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'visible');
     clusterEleLabel.setAttribute('visibility', 'visible');
     var markerEle;
     var markerDataLength = sameMarkerData[0].data.length;
     for (var 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');
@@ -1137,13 +1143,13 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     var getQueryConnect = isDom ? '' : '#';
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElementFunction(getQueryConnect + '' + clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     var clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
-    var markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    var markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     var height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     var width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     var centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
@@ -1179,7 +1185,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         var x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         var 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';
@@ -1200,7 +1206,12 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
     var 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'));
+    }
 }
 /**
  *
@@ -1227,6 +1238,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
         dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
             eventArgs.border.opacity
     };
+    removeElement(markerID);
     var ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
     var x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x;
     var y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
@@ -1257,7 +1269,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)) {
         var templateElement = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
         var markerElement = convertElement(templateElement, markerID, data, markerIndex, maps);
@@ -1293,8 +1305,10 @@ function maintainSelection(elementId, elementClass, element, className) {
     if (elementId) {
         for (var index = 0; index < elementId.length; index++) {
             if (element.getAttribute('id') === elementId[index]) {
-                if (isNullOrUndefined(getElement(elementClass.id)) || index === 0) {
-                    document.body.appendChild(elementClass);
+                if (index === 0 || element.tagName === 'g') {
+                    if (!isNullOrUndefined(elementClass) && !isNullOrUndefined(elementClass.id)) {
+                        document.body.appendChild(elementClass);
+                    }
                     if (element.id.indexOf('_MarkerIndex_') > -1 && element.childElementCount > 0) {
                         element.children[0].setAttribute('class', className);
                     }
@@ -1602,7 +1616,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
     if (type === 'Marker') {
-        var g = maps.renderer.createGroup({ id: options.id });
+        var g = maps.renderer.createGroup({ id: options.id + '_Group' });
         appendShape(balloon, g);
         pathElement = appendShape(g, element);
     }
@@ -2020,7 +2034,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;
                 var widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
@@ -2069,8 +2088,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;
@@ -2227,6 +2247,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) };
 }
 /**
@@ -2254,6 +2276,22 @@ function fixInitialScaleForTile(map) {
 function getElementByID(id) {
     return document.getElementById(id);
 }
+/**
+ * Function to get clientElement from id.
+ *
+ * @param {string} id - Specifies the id
+ * @returns {Element} - Returns the element
+ * @private
+ */
+function getClientElement(id) {
+    var element = document.getElementById(id);
+    if (!isNullOrUndefined(element)) {
+        return element.getClientRects()[0];
+    }
+    else {
+        return null;
+    }
+}
 /**
  * To apply internalization
  *
@@ -2274,7 +2312,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
     var templateFn = null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2282,6 +2320,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);
@@ -2685,6 +2726,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', {
@@ -2873,6 +2915,7 @@ function changeBorderWidth(element, index, scale, maps) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             var borderWidth = maps.layersCollection[index].shapeSettings.border.width;
+            var circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2885,13 +2928,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());
             }
         }
     }
@@ -3085,7 +3131,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) {
+                var markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);
@@ -3413,11 +3462,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;
@@ -3558,6 +3607,7 @@ function getThemeStyle(theme) {
                 backgroundColor: color,
                 areaBackgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#DADADA',
                 legendTextColor: '#DADADA',
@@ -3577,6 +3627,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#000000',
                 areaBackgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
@@ -3706,7 +3757,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)',
@@ -3729,7 +3780,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)',
@@ -3757,6 +3808,7 @@ function getThemeStyle(theme) {
                 backgroundColor: '#FFFFFF',
                 areaBackgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontSize: '14px',
                 subTitleFontColor: '#424242',
                 legendTitleFontColor: '#757575',
                 legendTextColor: '#757575',
@@ -3775,25 +3827,25 @@ function getThemeStyle(theme) {
     return style;
 }
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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
@@ -4281,7 +4333,7 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate$1([
-        Complex({ size: Theme.mapsSubTitleFont.size, fontWeight: null }, Font)
+        Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
     ], SubTitleSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property('Center')
@@ -4297,7 +4349,7 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate$1([
-        Complex({ size: Theme.mapsTitleFont.size, fontWeight: null }, Font)
+        Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
     ], TitleSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property('Center')
@@ -4441,7 +4493,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate$1([
-        Complex({}, Font)
+        Complex({ fontFamily: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property(15)
@@ -4462,7 +4514,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __decorate$1([
-        Complex(Theme.legendTitleFont, Font)
+        Complex({ size: Theme.legendTitleFont.size, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: Theme.legendTitleFont.fontWeight, fontFamily: null }, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
     __decorate$1([
         Property('Bottom')
@@ -4725,7 +4777,7 @@ var LayerSettings = /** @__PURE__ @class */ (function (_super) {
         Property('Geometry')
     ], LayerSettings.prototype, "layerType", void 0);
     __decorate$1([
-        Property('https://a.tile.openstreetmap.org/level/tileX/tileY.png')
+        Property('')
     ], LayerSettings.prototype, "urlTemplate", void 0);
     __decorate$1([
         Property(true)
@@ -4817,102 +4869,103 @@ var Marker = /** @__PURE__ @class */ (function () {
         this.trackElements = [];
         this.sameMarkerData = [];
     }
-    Marker.prototype.markerRender = function (layerElement, layerIndex, factor, type) {
+    Marker.prototype.markerRender = function (maps, layerElement, layerIndex, factor, type) {
         var _this = this;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var templateFn;
         var markerCount = 0;
         var nullCount = 0;
         var markerTemplateCount = 0;
-        this.maps.translateType = 'marker';
-        var currentLayer = this.maps.layersCollection[layerIndex];
-        this.markerSVGObject = this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_Markers_Group',
+        maps.translateType = 'marker';
+        var currentLayer = maps.layersCollection[layerIndex];
+        this.markerSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_Markers_Group',
             class: 'GroupElement',
             style: 'pointer-events: auto;'
         });
         var 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(function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                _this.maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
+                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 var 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, function (MarkerArgs) {
+                maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
                     eventArgs = markerColorChoose(eventArgs, data);
                     eventArgs = markerShapeChoose(eventArgs, data);
                     var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
                     var 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;
                     var offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                        var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
-                        var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, _this.maps);
-                        var animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
+                        var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                        var animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var translate = (_this.maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(_this.maps.zoomModule)) ? location_1 = 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);
-                        var scale = type === 'AddMarker' ? _this.maps.scale : translate['scale'];
-                        var transPoint = type === 'AddMarker' ? _this.maps.translatePoint : translate['location'];
+                        var translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = 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);
+                        var scale = type === 'AddMarker' ? maps.scale : translate['scale'];
+                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
                         if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, _this.maps);
+                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            _this.maps.renderReactTemplates();
+                            maps.renderReactTemplates();
                         }
                         else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, _this.markerSVGObject);
+                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, 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;
-                    var markerDataLength = markerData.length - _this.maps.markerNullCount;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? maps.markerNullCount + 1 : maps.markerNullCount;
+                    var 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();
                             }
                         }
                     }
@@ -5155,8 +5208,8 @@ var Marker = /** @__PURE__ @class */ (function () {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
-                    var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
-                    var indexes = clusterElement.innerHTML.split(',').map(Number);
+                    var 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);
+                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
@@ -5225,14 +5278,14 @@ var Marker = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    Marker.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Marker.prototype.destroy = function () {
+        this.maps = null;
+        this.trackElements = [];
+        this.markerSVGObject = null;
+        this.sameMarkerData = [];
     };
     return Marker;
 }());
@@ -5258,6 +5311,12 @@ var loaded = 'loaded';
  * @private
  */
 var click = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+var onclick = 'onclick';
 /**
  * Specifies the maps right click event name.
  *
@@ -5452,9 +5511,21 @@ var BingMap = /** @__PURE__ @class */ (function () {
             }
             quadKey = quadKey + '' + digit;
         }
-        var subDomain = subDomains[Math.min(parseInt(quadKey.substr(quadKey.length - 1, 1), 10), subDomains.length)];
-        imageUrl = imageUrl.replace('{quadkey}', quadKey).replace('{subdomain}', subDomain);
-        return imageUrl += '&mkt=' + language + '&ur=IN&Key=' + key;
+        if (!isNullOrUndefined(subDomains)) {
+            var subDomain = subDomains[Math.min(parseInt(quadKey.substr(quadKey.length - 1, 1), 10), subDomains.length)];
+            imageUrl = imageUrl.replace('{quadkey}', quadKey).replace('{subdomain}', subDomain);
+            return imageUrl += '&mkt=' + language + '&ur=IN&Key=' + key;
+        }
+        else {
+            return '';
+        }
+    };
+    /**
+     * @private
+     */
+    BingMap.prototype.destroy = function () {
+        this.maps = null;
+        this.subDomains = [];
     };
     return BingMap;
 }());
@@ -5727,8 +5798,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !isNullOrUndefined(this.mapObject.legendModule) &&
-                    this.mapObject.legendModule.totalPages.length > 0 ? this.mapObject.legendModule.legendTotalRect.height : areaRect.height
+                width: areaRect.width, height: areaRect.height
             }));
         }
         this.layerGroup.appendChild(this.clipRectElement);
@@ -5739,6 +5809,14 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             _this.currentLayer = layer;
             _this.processLayers(layer, index);
         });
+        if (!isNullOrUndefined(this.mapObject.legendModule) && this.mapObject.legendSettings.position === 'Float') {
+            if (this.mapObject.isTileMap) {
+                this.layerGroup.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+            else {
+                this.mapObject.svgObject.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+        }
     };
     /**
      * Tile rendering
@@ -5866,7 +5944,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             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);
@@ -5898,9 +5976,21 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         };
         this.mapObject.trigger('layerRendering', eventArgs, function (observedArgs) {
             if (!eventArgs.cancel && eventArgs.visible) {
-                if (layer.layerType !== 'Geometry') {
+                if (layer.layerType === 'OSM') {
+                    layer.urlTemplate = 'https://a.tile.openstreetmap.org/level/tileX/tileY.png';
+                }
+                if (layer.layerType === 'Google') {
+                    layer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
+                }
+                if (layer.layerType !== 'Geometry' || (isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                     if (layer.layerType !== 'Bing' || _this.bing) {
-                        _this.renderTileLayer(_this, layer, layerIndex);
+                        if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
+                            var bing = new BingMap(_this.mapObject);
+                            _this.bingMapCalculation(layer, layerIndex, _this, bing);
+                        }
+                        else {
+                            _this.renderTileLayer(_this, layer, layerIndex);
+                        }
                     }
                     else if (layer.key && layer.key.length > 1) {
                         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -5933,7 +6023,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _this.mapObject.arrangeTemplate();
                             if (_this.mapObject.zoomModule && (_this.mapObject.previousScale !== _this.mapObject.scale)) {
-                                _this.mapObject.zoomModule.applyTransform(true);
+                                _this.mapObject.zoomModule.applyTransform(_this.mapObject, true);
                             }
                         };
                         ajax.send();
@@ -5969,6 +6059,17 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             this.mapObject.baseMapBounds = null;
         }
     };
+    LayerPanel.prototype.bingMapCalculation = function (layer, layerIndex, proxy, bing) {
+        bing.imageUrl = layer.urlTemplate;
+        bing.subDomains = ['t0', 't1', 't2', 't3'];
+        bing.maxZoom = '21';
+        proxy.mapObject['bingMap'] = bing;
+        proxy.renderTileLayer(proxy, layer, layerIndex, bing);
+        this.mapObject.arrangeTemplate();
+        if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
+            this.mapObject.zoomModule.applyTransform(this.mapObject, true);
+        }
+    };
     LayerPanel.prototype.bubbleCalculation = function (bubbleSettings, range) {
         if (bubbleSettings.dataSource != null && bubbleSettings != null) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6161,60 +6262,66 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             }
                             break;
                         case 'LineString':
-                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            currentShapeData.map(function (lineData) {
-                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                            currentShapeData.map(function (lineData, index) {
+                                if (index === 0) {
+                                    path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                }
+                                else {
+                                    path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                }
                             });
                             if (path.length > 3) {
-                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = _this.mapObject.renderer.drawPath(pathOptions);
+                            }
+                            break;
+                        case 'MultiLineString':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map(function (multilineData) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                multilineData.map(function (lineData, index) {
+                                    if (index === 0) {
+                                        path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                    }
+                                    else {
+                                        path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                    }
+                                });
+                            });
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                 pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                             }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var pointData = currentShapeData['point'];
-                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / _this.currentFactor;
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
+                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                             break;
+                        case 'MultiPoint':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map(function (multiPointData, index) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                var pointData = multiPointData['point'];
+                                var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
+                                circleOptions = new CircleOption((shapeID + "_multiLine_" + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
+                                pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
+                                _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
+                            });
+                            break;
                         case 'Path':
                             path = currentShapeData['point'];
                             pathOptions = new PathOption(shapeID, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                             pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                             break;
                     }
-                    if (!isNullOrUndefined(pathEle)) {
-                        var property = (Object.prototype.toString.call(_this.currentLayer.shapePropertyPath) === '[object Array]' ?
-                            _this.currentLayer.shapePropertyPath : [_this.currentLayer.shapePropertyPath]);
-                        var properties = void 0;
-                        for (var j = 0; j < property.length; j++) {
-                            if (!isNullOrUndefined(currentShapeData['property'])) {
-                                properties = property[j];
-                                break;
-                            }
-                        }
-                        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
-                            (currentShapeData['property'][properties]) : ''));
-                        pathEle.setAttribute('tabindex', (_this.mapObject.tabIndex + i + 3).toString());
-                        if (drawingType === 'LineString') {
-                            pathEle.setAttribute('style', 'outline:none');
-                        }
-                        maintainSelection(_this.mapObject.selectedElementId, _this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-                        if (_this.mapObject.toggledShapeElementId) {
-                            for (var j = 0; j < _this.mapObject.toggledShapeElementId.length; j++) {
-                                var styleProperty = _this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
-                                    _this.currentLayer.shapeSettings : _this.mapObject.legendSettings.toggleLegendSettings;
-                                if (_this.mapObject.toggledShapeElementId[j] === pathEle.id) {
-                                    pathEle.setAttribute('fill', styleProperty.fill);
-                                    pathEle.setAttribute('stroke', styleProperty.border.color);
-                                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
-                                }
-                            }
-                        }
-                        groupElement.appendChild(pathEle);
+                    if (!isNullOrUndefined(pathEle) && drawingType !== 'MultiPoint') {
+                        _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
                     }
                     if (i === _this.currentLayer.layerData.length - 1) {
                         _this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
@@ -6232,6 +6339,50 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
         }
     };
+    /**
+     * layer features as bubble, marker, datalabel, navigation line.
+     *
+     * @param {groupElement} Element - Specifies the element to append the group
+     * @param {pathEle} Element - Specifies the svg element
+     * @param {drawingType} string - Specifies the data type
+     * @param {currentShapeData} any - Specifies the layer of shapedata.
+     * @param {index} number - Specifies the tab index.
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, currentShapeData, index) {
+        var property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
+            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
+        var properties;
+        for (var j = 0; j < property.length; j++) {
+            if (!isNullOrUndefined(currentShapeData['property'])) {
+                properties = property[j];
+                break;
+            }
+        }
+        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
+            (currentShapeData['property'][properties]) : ''));
+        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        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 (var j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
+                var styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
+                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
+                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
+                    pathEle.setAttribute('fill', styleProperty.fill);
+                    pathEle.setAttribute('stroke', styleProperty.border.color);
+                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
+                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
+                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
+                }
+            }
+        }
+        groupElement.appendChild(pathEle);
+    };
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
@@ -6292,7 +6443,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             _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);
@@ -6419,7 +6570,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 break;
             case 'linestring':
                 var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1;
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     latitude = points[1];
@@ -6434,31 +6586,61 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            case 'point': {
-                var arrayCollections_1 = false;
-                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
+            case 'multilinestring':
+                var extraSpaces_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                var multiLineData_1 = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map(function (points, index) {
-                    if (Object.prototype.toString.call(points) === '[object Array]') {
+                coordinates.map(function (multiPoints) {
+                    newData = [];
+                    multiPoints.map(function (points) {
                         latitude = points[1];
                         longitude = points[0];
-                        arrayCollections_1 = true;
                         var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
-                        _this.currentLayer.layerData.push({
-                            point: point, type: type, lat: latitude, lng: longitude, property: properties
+                        _this.calculateBox(point, extraSpaces_1);
+                        newData.push({
+                            point: point, lat: latitude, lng: longitude
                         });
-                    }
+                    });
+                    multiLineData_1.push(newData);
+                });
+                multiLineData_1['property'] = properties;
+                multiLineData_1['type'] = type;
+                this.currentLayer.layerData.push(multiLineData_1);
+                break;
+            case 'point':
+                var pointExtraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                latitude = coordinates[1];
+                longitude = coordinates[0];
+                var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                this.calculateBox(point, pointExtraSpace);
+                this.currentLayer.layerData.push({
+                    point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
-                if (!arrayCollections_1) {
-                    latitude = coordinates[1];
-                    longitude = coordinates[0];
-                    var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                    this.calculateBox(point, extraSpace_2);
-                    this.currentLayer.layerData.push({
-                        point: point, type: type, lat: latitude, lng: longitude, property: properties
+                break;
+            case 'multipoint': {
+                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                newData = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                coordinates.map(function (points) {
+                    latitude = points[1];
+                    longitude = points[0];
+                    var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
+                    _this.calculateBox(point, extraSpace_2);
+                    newData.push({
+                        point: point, lat: latitude, lng: longitude
                     });
-                }
+                });
+                newData['property'] = properties;
+                newData['type'] = type;
+                this.currentLayer.layerData.push(newData);
                 break;
             }
             case 'path':
@@ -6470,12 +6652,12 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     };
     LayerPanel.prototype.calculateBox = function (point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
         }
         else {
-            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
             this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
-            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x + extraSpace);
             this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
         }
     };
@@ -6493,6 +6675,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             var end = convertGeoToPoint(bounds.latitude.max, bounds.longitude.max, null, layer, this.mapObject);
             mapHeight = end.y - start.y;
             mapWidth = end.x - start.x;
+            if (mapHeight === 0 || mapWidth === 0) {
+                mapWidth = mapSize.width / 2;
+                mapHeight = mapSize.height;
+            }
         }
         else {
             mapHeight = mapWidth = 500;
@@ -6587,15 +6773,28 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             _this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'multilinestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map(function (multiPoint, index) {
+                            multiPoint.map(function (point, index) {
+                                _this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
+                            });
+                        });
+                        break;
                     case 'linestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (point, index) {
-                            _this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                            _this.calculateRectBox(point, 'linestring', index === 0 ? true : false);
                         });
                         break;
                     case 'point':
                         _this.calculateRectBox(coordinates, 'point');
                         break;
+                    case 'multipoint':
+                        coordinates.map(function (point, index) {
+                            _this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
+                        });
+                        break;
                 }
             }
         });
@@ -6634,7 +6833,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
         var _this = this;
-        if (type !== 'LineString' && type !== 'point') {
+        if ((type !== 'linestring' && type !== 'multilinestring') && (type !== 'point' && type !== 'multipoint')) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(coordinates, function (currentCoords) {
                 if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
@@ -6703,7 +6902,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         var tile = new Tile(tileI % ycount, j);
                         tile.left = x;
                         tile.top = y;
-                        if (baseLayer.layerType === 'Bing') {
+                        if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             var key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                         }
@@ -6732,11 +6931,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             if (!(layer.type === 'SubLayer' && layer.visible)) {
                 continue;
             }
-            if (layer.layerType === 'OSM' || layer.layerType === 'Bing') {
+            if ((layer.layerType !== 'Geometry' && layer.layerType !== 'GoogleStaticMap') || (layer.layerType === 'Geometry' &&
+                isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                 for (var _b = 0, proxTiles_1 = proxTiles; _b < proxTiles_1.length; _b++) {
                     var baseTile = proxTiles_1[_b];
                     var subtile = extend({}, baseTile, {}, true);
                     if (layer.layerType === 'Bing') {
+                        bing = new BingMap(this.mapObject);
                         subtile.src = bing.getBingMap(subtile, layer.key, layer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                     }
                     else {
@@ -6782,7 +6983,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 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';
                         }
@@ -6796,7 +6997,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 var id = 0;
                 var _loop_3 = function (tile) {
                     var imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                     var mapId = _this.mapObject.element.id;
                     imgElement.onload = function () {
                         if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
@@ -6908,7 +7112,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             '&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
@@ -6966,6 +7170,27 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         this.mapObject.previousTileHeight = factorY;
         return new Point(x, y);
     };
+    /**
+     * @returns {void}
+     * @private
+     */
+    LayerPanel.prototype.destroy = function () {
+        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;
+    };
     return LayerPanel;
 }());
 
@@ -7021,7 +7246,7 @@ var Annotations = /** @__PURE__ @class */ (function () {
             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));
                 var length_1 = templateElement.length;
@@ -7081,35 +7306,34 @@ var Annotations = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the annotation.
      *
-     * @param {Maps} map - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    Annotations.prototype.destroy = function (map) {
-        // Destroy method performed here
+    Annotations.prototype.destroy = function () {
+        this.map = null;
     };
     return Annotations;
 }());
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 */
@@ -7148,6 +7372,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
          * Resize the map
          */
         _this.isResize = false;
+        /**
+         * @private
+         */
+        _this.isReset = false;
         /** @private */
         _this.baseSize = new Size(0, 0);
         /** @public */
@@ -7305,6 +7533,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     };
     /**
      * To Initialize the control rendering.
@@ -7445,16 +7674,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     Maps.prototype.renderMap = function () {
         if (this.legendModule && this.legendSettings.visible) {
-            if (!this.isTileMap) {
-                this.legendModule.renderLegend();
-            }
-            else {
-                var layerCount = this.layersCollection.length - 1;
-                if (!this.layersCollection[layerCount].isBaseLayer) {
-                    this.isTileMapSubLayer = true;
-                    this.legendModule.renderLegend();
-                }
-            }
+            this.legendModule.renderLegend();
         }
         this.createTile();
         if (this.zoomSettings.enable && this.zoomModule) {
@@ -7465,7 +7685,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
-        this.element.appendChild(this.svgObject);
+        if (!isNullOrUndefined(this.svgObject)) {
+            this.element.appendChild(this.svgObject);
+        }
         var position = this.getExtraPosition();
         for (var i = 0; i < this.layers.length; i++) {
             if (position.x !== 0 || position.y !== 0) {
@@ -7488,12 +7710,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     this.checkInitialRender = false;
                 }
             }
-            for (var k = 0; k < this.layers[i].markerSettings.length; k++) {
-                if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
-                    && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
-                    var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
-                    for (var j = 0; j < markerSelectionValues.length; j++) {
-                        this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
+            if (!this.isResize) {
+                for (var k = 0; k < this.layers[i].markerSettings.length; k++) {
+                    if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
+                        && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
+                        var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
+                        for (var j = 0; j < markerSelectionValues.length; j++) {
+                            this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
+                        }
                     }
                 }
             }
@@ -7535,12 +7759,16 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 bottom = svg.bottom - tile.bottom - element.offsetTop;
                 top_1 = parseFloat(tileElement.style.top) + element.offsetTop;
             }
-            top_1 = (bottom <= 11) ? top_1 : (top_1 * 2);
-            left = (bottom <= 11) ? left : (left * 2);
+            top_1 = (bottom <= 11) ? top_1 : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top_1 * 2);
+            left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top_1 + 'px';
             tileElement.style.left = left + 'px';
             tileElement1.style.top = top_1 + 'px';
             tileElement1.style.left = left + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.height = tileElement1.style.height = this.legendModule.legendTotalRect.height + 'px';
+                tileElement.style.width = tileElement1.style.width = this.legendModule.legendTotalRect.width + 'px';
+            }
         }
         this.arrangeTemplate();
         if (this.annotationsModule) {
@@ -7571,7 +7799,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.markerSelection = function (selectionSettings, map, targetElement, data) {
         var border = {
             color: selectionSettings.border.color,
-            width: selectionSettings.border.width / map.scale
+            width: selectionSettings.border.width / map.scale,
+            opacity: selectionSettings.border.opacity
         };
         var markerSelectionProperties = {
             opacity: selectionSettings.opacity,
@@ -7591,9 +7820,11 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (this.selectedMarkerElementId.length === 0 || selectionSettings.enableMultiSelect) {
             if (targetElement.tagName === 'g') {
                 targetElement.children[0].setAttribute('class', 'MarkerselectionMapStyle');
+                this.selectedMarkerElementId.push(targetElement.children[0].id);
             }
             else {
                 targetElement.setAttribute('class', 'MarkerselectionMapStyle');
+                this.selectedMarkerElementId.push(targetElement.id);
             }
         }
     };
@@ -7645,6 +7876,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.addTabIndex = function () {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
+        this.element.setAttribute('role', '');
         this.element.setAttribute('tabindex', this.tabIndex.toString());
     };
     // private setSecondaryElementPosition(): void {
@@ -7663,12 +7895,21 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            var tileRect = getElementByID(this.element.id + '_tile_parent').getBoundingClientRect();
-            var tileSvgRect = getElementByID(this.element.id + '_Tile_SVG').getBoundingClientRect();
+            var tileElement = getElementByID(this.element.id + '_tile_parent');
+            var tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            var tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
+            var tileRect = tileElement.getBoundingClientRect();
+            var tileSvgRect = tileSvgElement.getBoundingClientRect();
             left = (tileRect.left - tileSvgRect.left);
             top = (tileRect.top - tileSvgRect.top);
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.left = left + 'px';
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.top = top + 'px';
+            tileSvgParentElement.style.left = left + 'px';
+            tileSvgParentElement.style.top = top + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
+                tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
+            }
             var markerTemplateElements = document.getElementsByClassName('template');
             if (!isNullOrUndefined(markerTemplateElements) && markerTemplateElements.length > 0) {
                 for (var i = 0; i < markerTemplateElements.length; i++) {
@@ -7686,7 +7927,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (var i = 0; i < elements.childNodes.length; i++) {
                     var childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g') {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
                         var layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (var j = 0; j < childElement.childNodes.length; j++) {
                             var childNode = childElement.childNodes[j];
@@ -7700,7 +7941,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (this.zoomModule && (this.previousScale !== this.scale)) {
-                this.zoomModule.applyTransform(true);
+                this.zoomModule.applyTransform(this, true);
             }
         }
     };
@@ -7723,7 +7964,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         var templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
-            getElementByID(this.element.id + '_Layer_Collections') && this.layers[this.layers.length - 1].layerType !== 'OSM') {
+            getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
             for (var i = 0; i < templateElements.length; i++) {
                 var offSetLetValue = 0;
                 var offSetTopValue = 0;
@@ -7758,10 +7999,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         var mainLayer = this.layersCollection[0];
         var padding = 0;
         if (mainLayer.isBaseLayer && (mainLayer.layerType === 'OSM' || mainLayer.layerType === 'Bing' ||
-            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google')) {
-            if (mainLayer.layerType === 'Google') {
-                mainLayer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
-            }
+            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google' || (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== ''))) {
             removeElement(this.element.id + '_tile_parent');
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
@@ -7809,7 +8047,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var baseLayer = mainLayers[i];
             if (baseLayer.visible && baseIndex === i) {
                 baseLayer.isBaseLayer = true;
-                this.isTileMap = (baseLayer.layerType === 'Geometry') ? false : true;
+                this.isTileMap = (baseLayer.layerType === 'Geometry' && !isNullOrUndefined(baseLayer.shapeData)) ? false : true;
                 this.layersCollection.push(baseLayer);
                 break;
             }
@@ -7856,12 +8094,19 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Maps.prototype.renderTitle = function (title, type, bounds, groupEle) {
-        var style = title.textStyle;
+        var style = {
+            size: title.textStyle.size,
+            color: title.textStyle.color,
+            fontFamily: title.textStyle.fontFamily,
+            fontWeight: title.textStyle.fontWeight,
+            fontStyle: title.textStyle.fontStyle,
+            opacity: title.textStyle.opacity
+        };
         var height;
         var width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
-        style.fontFamily = this.themeStyle.fontFamily || style.fontFamily;
+        style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
         style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
-        style.size = this.themeStyle.titleFontSize || style.size;
+        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || Theme.mapsSubTitleFont.size);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
@@ -7874,6 +8119,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', this.description || title.text);
+            element.setAttribute('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);
@@ -8031,6 +8277,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var id = event.target['id'];
             event.preventDefault();
             if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
+                this.mapAreaRect = this.legendModule.initialMapAreaRect;
                 this.legendModule.currentPage = (id.indexOf('_Left_Page_') > -1) ? (this.legendModule.currentPage - 1) :
                     (this.legendModule.currentPage + 1);
                 this.legendModule.legendGroup = this.renderer.createGroup({ id: this.element.id + '_Legend_Group' });
@@ -8095,24 +8342,35 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 latitude: latitude, longitude: longitude,
                 isShapeSelected: this.SelectedElement(targetEle)
             };
-            this.trigger('click', eventArgs_1, function (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_1.cancel) {
-                    _this.notify(click, targetEle);
-                }
-                if (!eventArgs_1.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    _this.triggerShapeSelection(targetEle);
-                }
-            });
+            if (this.onclick) {
+                eventArgs_1.name = onclick;
+                this.trigger('onclick', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+            else {
+                this.trigger('click', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+        }
+    };
+    Maps.prototype.clickHandler = function (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);
         }
     };
     Maps.prototype.triggerShapeSelection = function (targetEle) {
@@ -8212,13 +8470,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     latitude = latLongValue.latitude;
                     longitude = latLongValue.longitude;
                 }
-                var 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, function (mouseArgs) {
-                });
             }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
@@ -8226,7 +8477,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -8380,14 +8631,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             removeElement(this.element.id + '_EJ2_LegendTitle_Tooltip');
         }
         if ((targetId === (this.element.id + '_Map_title')) && (event.target.textContent.indexOf('...') > -1)) {
-            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
+            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size || this.themeStyle.titleFontSize, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
         }
         else {
             removeElement(this.element.id + '_EJ2_Title_Tooltip');
         }
     };
     /*
-
+
     /**
      * This method is used to perform operations while resizing the window.
      *
@@ -8415,6 +8666,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     _this.refreshing = true;
                     _this.wireEVents();
                     _this.render();
+                    _this.refreshing = false;
                 }, 500);
             }
         }
@@ -8445,7 +8697,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 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 };
@@ -8491,8 +8743,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @param {Object} layer - Specifies the layer for the maps.
      */
     Maps.prototype.addLayer = function (layer) {
-        this.layers.push(new LayerSettings(this.layers[0], 'layers', layer));
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.push(layer);
+        this.isAddLayer = true;
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to remove a layer from map.
@@ -8501,8 +8755,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeLayer = function (index) {
-        this.layers.splice(index, 1);
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.splice(index, 1);
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8521,7 +8776,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
             }
             var markerModule = new Marker(this);
-            markerModule.markerRender(layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
             this.arrangeTemplate();
         }
     };
@@ -8728,7 +8983,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             Zoom: 'Zoom',
             ZoomOut: 'Zoom out',
             Pan: 'Pan',
-            Reset: 'Reset'
+            Reset: 'Reset',
+            ImageNotFound: 'Image Not Found'
         };
     };
     /**
@@ -8736,6 +8992,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.destroy = function () {
         this.unWireEVents();
+        _super.prototype.destroy.call(this);
         this.shapeSelectionItem = [];
         this.toggledShapeElementId = [];
         this.toggledLegendId = [];
@@ -8750,11 +9007,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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.prototype.destroy.call(this);
     };
     /**
      * Gets component name
@@ -8787,6 +9047,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.onPropertyChanged = function (newProp, oldProp) {
         var render = false;
         var isMarker = false;
+        var isLayer = false;
         var isStaticMapType = false;
         var layerEle;
         if (newProp['layers']) {
@@ -8807,13 +9068,18 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 case 'legendSettings':
                 case 'baseLayerIndex':
                     if (prop === 'layers') {
+                        isLayer = true;
                         var layerPropLength = Object.keys(newProp.layers).length;
                         for (var x = 0; x < layerPropLength; x++) {
                             if (!isNullOrUndefined(newProp.layers[x])) {
                                 var collection = Object.keys(newProp.layers[x]);
                                 for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
                                     var collectionProp = collection_1[_b];
-                                    if (collectionProp === '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') {
@@ -8827,7 +9093,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     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) {
@@ -9064,7 +9330,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.print = function (id) {
         if ((this.allowPrint) && (this.printModule)) {
-            this.printModule.print(id);
+            this.printModule.print(this, id);
         }
     };
     /**
@@ -9083,16 +9349,38 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
             return new Promise(function (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(function (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.
+     */
+    Maps.prototype.getBingUrlTemplate = function (url) {
+        var promise = new Promise(function (resolve, reject) {
+            var ajax = new Ajax({
+                url: url
+            });
+            ajax.onSuccess = function (json) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var jsonObject = JSON.parse(json);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var resource = jsonObject['resourceSets'][0]['resources'][0];
+                resolve(resource['imageUrl']);
+            };
+            ajax.send();
+        });
+        return promise;
+    };
     /**
      * To find visibility of layers and markers for required modules load.
      *
@@ -9301,6 +9589,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "click", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "onclick", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "doubleClick", void 0);
@@ -9447,12 +9738,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             var shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
-                if (layerData[i]['type'] === 'Point') {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    shapePoints.push(this.getPoints(layerData[i], []));
-                }
-                else if (!layerData[i]['_isMultiPolygon']) {
+            if (shapeDataLayerPathValue === shapePathValue && (layerData[i].type !== 'LineString' && layerData[i].type !== 'MultiLineString' && layerData[i]['type'] !== 'Point' && layerData[i]['type'] !== 'MultiPoint')) {
+                if (!layerData[i]['_isMultiPolygon']) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
                     currentLength = shapePoints[shapePoints.length - 1].length;
@@ -9536,7 +9823,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var translate;
                 var 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 {
@@ -9653,14 +9940,13 @@ var Bubble = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the bubble.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    Bubble.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Bubble.prototype.destroy = function () {
+        this.bubbleCollection = [];
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     };
     return Bubble;
 }());
@@ -9759,7 +10045,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         var shapeWidth;
         var scaleZoomValue = !isNullOrUndefined(this.maps.scale) ? Math.floor(this.maps.scale) : 1;
         var 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 (var j = 0; j < properties.length; j++) {
             if (shapeProperties[properties[j]]) {
@@ -9777,7 +10063,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
         if (!isNullOrUndefined(shapes['property'])) {
             shapePoint = [[]];
-            if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point') {
+            if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 shapePoint.push(this.getPoint(layerData[index], []));
                 currentLength = shapePoint[shapePoint.length - 1].length;
@@ -9786,21 +10072,9 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     midIndex = shapePoint.length - 1;
                 }
             }
-            else {
+            else if (layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var layer_1 = layerData[index];
-                if (layer_1['type'] === 'Point') {
-                    isPoint = true;
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var layerPoints = [];
-                    layerPoints.push(this.getPoint(layerData, []));
-                    shapePoint = layerPoints;
-                    currentLength = shapePoint[shapePoint.length - 1].length;
-                    if (pointsLength < currentLength) {
-                        pointsLength = currentLength;
-                        midIndex = shapePoint.length - 1;
-                    }
-                }
                 for (var j = 0; j < layer_1.length; j++) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoint.push(this.getPoint(layer_1[j], []));
@@ -9870,7 +10144,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
             var eventargs_1 = {
                 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_1, function (labelArgs) {
                 if (eventargs_1.cancel) {
@@ -9915,13 +10189,13 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 _this.value[index] = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
                 var labelElement;
                 if (eventargs_1.template !== '') {
-                    templateFn = getTemplateFunction(eventargs_1.template);
+                    templateFn = getTemplateFunction(eventargs_1.template, _this.maps);
                     var templateElement = templateFn ? templateFn(!isNullOrUndefined(datasrcObj) ?
                         datasrcObj : shapeData['properties'], _this.maps, eventargs_1.template, _this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs_1.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 {
@@ -10009,26 +10283,26 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                                 y = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                             }
                             border_1.opacity = isNullOrUndefined(border_1.opacity) ? opacity : border_1.opacity;
-                            var rectOptions = new RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border_1, opacity, new Rect(x, y, textSize['width'], textSize['height']), rx, ry);
+                            var rectOptions = new RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border_1, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
                             var 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,
@@ -10045,10 +10319,21 @@ var DataLabel = /** @__PURE__ @class */ (function () {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DataLabel.prototype.getPoint = function (shapes, points) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        shapes.map(function (current, index) {
-            points.push(new Point(current['point']['x'], current['point']['y']));
-        });
+        if (shapes['type'] === 'MultiLineString') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map(function (current) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                current.map(function (shape) {
+                    points.push(new Point(shape['point']['x'], shape['point']['y']));
+                });
+            });
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shapes.map(function (current, index) {
+                points.push(new Point(current['point']['x'], current['point']['y']));
+            });
+        }
         return points;
     };
     /**
@@ -10060,16 +10345,14 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         return 'DataLabel';
     };
     /**
-     * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    DataLabel.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    DataLabel.prototype.destroy = function () {
+        this.dataLabelCollections = [];
+        this.value = null;
+        this.maps = null;
     };
     return DataLabel;
 }());
@@ -10139,8 +10422,8 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
             for (var j = 0; j < point['length'] - 1; j++) {
                 angle = (-1 > angle) ? -1 : angle;
                 angle = (1 < angle) ? 1 : angle;
-                var arcId_1 = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
-                var radius_1 = this.convertRadius(point[j], point[j + 1]);
+                var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                var radius = this.convertRadius(point[j], point[j + 1]);
                 if (angle <= 1 && angle > 0) {
                     direction = 0;
                     if (point[j]['x'] > point[j + 1]['x']) {
@@ -10185,10 +10468,10 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                     angle = Math.abs(angle);
                     d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
                         + ',' + point[j + 1]['y'] + ' ' :
-                        'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius_1 / 2 + (1 - angle) * radius_1 / (angle * 10)) +
-                            ' ' + (radius_1 / 2 + (1 - angle) * radius_1 / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
+                        'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
+                            ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
                             + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
-                    pathOption = new PathOption(arcId_1, 'none', width, color, 1, 1, dashArray, d);
+                    pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
                     navigationEle = this.maps.renderer.drawPath(pathOption);
                     if (!isNullOrUndefined(arrowPosition)) {
                         var position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
@@ -10221,14 +10504,11 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    NavigationLine.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    NavigationLine.prototype.destroy = function () {
+        this.maps = null;
     };
     return NavigationLine;
 }());
@@ -10242,6 +10522,10 @@ var Legend = /** @__PURE__ @class */ (function () {
          * @private
          */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.initialMapAreaRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -10300,6 +10584,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         this.heightIncrement = 0;
         this.defsElement = this.maps.renderer.createDefs();
         this.maps.svgObject.appendChild(this.defsElement);
+        this.initialMapAreaRect = this.maps.mapAreaRect;
         this.calculateLegendBounds();
         this.drawLegend();
     };
@@ -10339,9 +10624,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                         }
                     }
                 }
-                else {
-                    _this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
-                }
+            }
+            if (legend.type === 'Markers') {
+                _this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
             }
         });
         if (this.legendCollection.length > 0) {
@@ -10532,8 +10817,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 }
                             }
                             else {
+                                var padding = 10;
                                 shapeX = shapeLocation[j - 1].x;
-                                shapeY = prevPositionY + topPadding + (shapeHeight / 2);
+                                shapeY = prevPositionY + padding + (shapeHeight / 2);
                             }
                         }
                     }
@@ -10636,7 +10922,14 @@ var Legend = /** @__PURE__ @class */ (function () {
         var legend = map.legendSettings;
         var render = map.renderer;
         var textOptions;
-        var textFont = legend.textStyle;
+        var textFont = {
+            size: legend.textStyle.size,
+            color: legend.textStyle.color,
+            fontFamily: legend.textStyle.fontFamily,
+            fontWeight: legend.textStyle.fontWeight,
+            fontStyle: legend.textStyle.fontStyle,
+            opacity: legend.textStyle.opacity
+        };
         this.legendGroup = render.createGroup({ id: map.element.id + '_Legend_Group' });
         if (legend.mode === 'Interactive') {
             for (var i = 0; i < this.legendRenderingCollections.length; i++) {
@@ -10652,7 +10945,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                 textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
                 var rectOptions = new RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
-                textFont.fontFamily = map.themeStyle.fontFamily || textFont.fontFamily;
+                textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                 textFont.size = map.themeStyle.legendFontSize || textFont.size;
                 renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
                 this.legendGroup.appendChild(render.drawRectangle(rectOptions));
@@ -10707,7 +11000,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                 };
                 legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily : this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -10783,7 +11076,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                             'opacity': 1,
                             'dominant-baseline': ''
                         };
-                        pagingGroup.appendChild(render.createText(pageTextOptions, pagingText));
+                        var pagingTextElement = render.createText(pageTextOptions, pagingText);
+                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
                     this.legendToggle();
@@ -10795,6 +11090,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeIndex;
         var layerIndex;
         var dataIndex;
+        var pointIndex;
         var legend = this.maps.legendSettings;
         var textEle = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
             document.getElementById(targetElement.id + '_Text');
@@ -10882,12 +11178,20 @@ var Legend = /** @__PURE__ @class */ (function () {
                     }
                     if (enable) {
                         for (var j = 0; j < data.length; j++) {
+                            var shapeElement = void 0;
                             shapeIndex = data[j]['shapeIndex'];
                             layerIndex = data[j]['layerIndex'];
                             dataIndex = data[j]['dataIndex'];
-                            var shapeEle = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
-                            if (shapeEle !== null) {
+                            pointIndex = data[j]['pointIndex'];
+                            if (pointIndex === -1) {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                            }
+                            else {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                            }
+                            if (shapeElement !== null) {
                                 var shapeMatch = true;
                                 if (this.maps.legendSelectionCollection !== null) {
                                     for (var i_1 = 0; i_1 < this.maps.legendSelectionCollection.length; i_1++) {
@@ -10904,13 +11208,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     }
                                     length = this.legendHighlightCollection.length;
                                     var legendHighlightColor = this.legendHighlightCollection[length - 1]['legendOldFill'];
-                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     var shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
-                                    var shapeOldFillColor = shapeEle.getAttribute('fill');
+                                    var shapeOldFillColor = shapeElement.getAttribute('fill');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
                                     var shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
                                     this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
-                                    this.setColor(shapeEle, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                     this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                 }
                                 else if (value === 'selection') {
@@ -10933,12 +11237,12 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     }
                                     selectLength = this.maps.legendSelectionCollection.length;
                                     var legendSelectionColor = this.maps.legendSelectionCollection[selectLength - 1]['legendOldFill'];
-                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeEle);
+                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     this.maps.legendSelectionCollection[selectLength - 1]['shapeOldFillColor'] = this.shapePreviousColor;
                                     this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    this.setColor(shapeEle, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    if (this.maps.selectedElementId.indexOf(shapeEle.getAttribute('id')) === -1) {
-                                        this.maps.selectedElementId.push(shapeEle.getAttribute('id'));
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
+                                    if (this.maps.selectedElementId.indexOf(shapeElement.getAttribute('id')) === -1) {
+                                        this.maps.selectedElementId.push(shapeElement.getAttribute('id'));
                                     }
                                     if (j === data.length - 1) {
                                         this.maps.legendSelection = false;
@@ -10953,14 +11257,15 @@ var Legend = /** @__PURE__ @class */ (function () {
         }
     };
     Legend.prototype.setColor = function (element, fill, opacity, borderColor, borderWidth, type) {
+        var isLineStringShape = (element.parentElement.id.indexOf('LineString') > -1);
         if (type === 'selection') {
-            maintainStyleClass('ShapeselectionMap', 'ShapeselectionMapStyle', fill, opacity, borderColor, borderWidth, this.maps);
-            element.setAttribute('class', 'ShapeselectionMapStyle');
+            maintainStyleClass((isLineStringShape ? 'LineselectionMap' : 'ShapeselectionMap'), (isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle'), (isLineStringShape ? 'transparent' : fill), opacity, (isLineStringShape ? fill : borderColor), borderWidth, this.maps);
+            element.setAttribute('class', isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle');
         }
         else {
-            element.setAttribute('fill', fill);
+            element.setAttribute('fill', isLineStringShape ? 'transparent' : fill);
             element.setAttribute('fill-opacity', opacity);
-            element.setAttribute('stroke', borderColor);
+            element.setAttribute('stroke', isLineStringShape ? fill : borderColor);
             element.setAttribute('stroke-width', (Number(borderWidth) / this.maps.scale).toString());
         }
     };
@@ -11003,7 +11308,8 @@ var Legend = /** @__PURE__ @class */ (function () {
             var dataCount = shapeElements.length;
             for (var j = 0; j < dataCount; j++) {
                 var shapeElement = getElement(shapeElements[j]);
-                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle' ||
+                    shapeElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(shapeElement);
                     var selectedElementIdIndex = this.maps.selectedElementId.indexOf(shapeElement.id);
                     if (selectedElementIdIndex !== -1) {
@@ -11081,12 +11387,14 @@ var Legend = /** @__PURE__ @class */ (function () {
                         this.maps.legendSelectionClass = module;
                     }
                     else {
-                        if ((checkSelection <= 1) && targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                        if ((checkSelection <= 1) && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                            || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                             if (!this.maps.layers[layerIndex].selectionSettings.enableMultiSelect) {
                                 this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                             }
                             else {
-                                if (checkSelection <= 1 && targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
+                                if (checkSelection <= 1 && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                                    || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                                     this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                                 }
                             }
@@ -11173,7 +11481,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                             }
                         }
                     }
-                    if (selectionEle && (selectionEle['IsSelected'] && targetElement.getAttribute('class') === 'ShapeselectionMapStyle')) {
+                    if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                        || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         var multiSelection = 0;
@@ -11264,7 +11573,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         }
         for (var j = 0; j < this.maps.selectedLegendElementId.length; j++) {
             var idIndex = this.maps.legendSettings.mode === 'Interactive' ?
-                'container_Legend_Index_' : 'container_Legend_Shape_Index_';
+                this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
             var selectedElement = idIndex + this.maps.selectedLegendElementId[j];
             var legendElement = document.getElementById(selectedElement);
             if (!isNullOrUndefined(legendElement)) {
@@ -11316,6 +11625,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeIndex;
         var layerIndex;
         var dataIndex;
+        var pointIndex;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var collection = this.maps.legendModule.legendCollection;
         var legend = this.maps.legendSettings;
@@ -11328,15 +11638,23 @@ var Legend = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var currentElement = { Elements: [] };
             for (var j = 0; j < data.length; j++) {
+                var shapeElement = void 0;
                 shapeIndex = data[j]['shapeIndex'];
                 layerIndex = data[j]['layerIndex'];
                 dataIndex = data[j]['dataIndex'];
-                var shapeEle = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
-                if (targetElement === shapeEle) {
+                pointIndex = data[j]['pointIndex'];
+                if (pointIndex === -1) {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                }
+                else {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                }
+                if (targetElement === shapeElement) {
                     process = true;
                 }
-                elements.push(shapeEle);
+                elements.push(shapeElement);
             }
             if (process) {
                 if (isNullOrUndefined(currentElement['LegendEle'])) {
@@ -11354,16 +11672,25 @@ var Legend = /** @__PURE__ @class */ (function () {
         var shapeIndex;
         var layerIndex;
         var dataIndex;
+        var pointIndex;
         var idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var data = this.maps.legendModule.legendCollection[idIndex]['data'];
         var legendShapeElements = [];
         for (var i = 0; i < data.length; i++) {
+            var shapeElement = void 0;
             shapeIndex = data[i]['shapeIndex'];
             layerIndex = data[i]['layerIndex'];
             dataIndex = data[i]['dataIndex'];
-            var shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
-                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            pointIndex = data[i]['pointIndex'];
+            if (pointIndex === -1) {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            }
+            else {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+            }
             if (!isNullOrUndefined(shapeElement)) {
                 legendShapeElements.push(shapeElement.id);
             }
@@ -11431,9 +11758,11 @@ var Legend = /** @__PURE__ @class */ (function () {
         var renderOptions = new RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
         this.legendGroup.appendChild(map.renderer.drawRectangle(renderOptions));
         this.getLegendAlignment(map, this.legendBorderRect.width, this.legendBorderRect.height, legend);
-        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-(this.legendBorderRect.x))) + ' ' +
+        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-this.legendBorderRect.x)) + ' ' +
             (this.translate.y + (-(this.legendBorderRect.y))) + ' )');
-        map.svgObject.appendChild(this.legendGroup);
+        if (legend.position !== 'Float') {
+            map.svgObject.appendChild(this.legendGroup);
+        }
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
             textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
@@ -11445,7 +11774,16 @@ var Legend = /** @__PURE__ @class */ (function () {
         this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
             (this.currentPage + 1);
         this.legendGroup = this.maps.renderer.createGroup({ id: this.maps.element.id + '_Legend_Group' });
+        this.maps.mapAreaRect = this.initialMapAreaRect;
         this.drawLegendItem(this.currentPage);
+        if (!isNullOrUndefined(this.maps.legendModule) && this.maps.legendSettings.position === 'Float') {
+            if (this.maps.isTileMap) {
+                this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.legendModule.legendGroup);
+            }
+            else {
+                this.maps.svgObject.appendChild(this.maps.legendModule.legendGroup);
+            }
+        }
         if (querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id)) {
             querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id).style.pointerEvents = 'none';
         }
@@ -11463,53 +11801,60 @@ var Legend = /** @__PURE__ @class */ (function () {
         var areaWidth = totalRect.width;
         var totalWidth = map.availableSize.width;
         var totalHeight = map.availableSize.height;
+        var locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
+        var locationY = !isNullOrUndefined(legend.location.y) ? legend.location.y : 0;
         if (legend.position === 'Float') {
-            this.translate = legend.location;
+            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) : new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
+            this.legendTotalRect = map.mapAreaRect;
         }
         else {
             switch (legend.position) {
                 case 'Top':
                 case 'Bottom':
-                    totalRect.height = (areaHeight - height);
+                    totalRect.height = (legend.position === 'Top') ? (areaHeight - height) : (areaHeight - height - (spacing * 2));
                     x = (totalWidth / 2) - (width / 2);
                     y = (legend.position === 'Top') ? areaY : (areaY + totalRect.height);
-                    totalRect.y = (legend.position === 'Top') ? areaY + height + spacing : areaY;
+                    totalRect.y = (legend.position === 'Top') ? areaY + height + (map.isTileMap ? (spacing / 2) : spacing) : areaY - (spacing / 2);
                     break;
                 case 'Left':
                 case 'Right':
-                    totalRect.width = (areaWidth - width);
-                    x = (legend.position === 'Left') ? areaX : (areaX + totalRect.width) - spacing;
+                    totalRect.width = (areaWidth - width - map.mapAreaRect.x);
+                    x = (legend.position === 'Left') ? areaX + (spacing / 2) : (areaX + totalRect.width + spacing);
                     y = (totalHeight / 2) - (height / 2);
-                    totalRect.x = (legend.position === 'Left') ? areaX + width : areaX;
+                    totalRect.x = (legend.position === 'Left') ? areaX + width + spacing : areaX;
                     break;
             }
             switch (legend.alignment) {
                 case 'Near':
                     if (legend.position === 'Top' || legend.position === 'Bottom') {
-                        x = totalRect.x;
+                        x = totalRect.x - (legend.mode === 'Interactive' ? spacing : 0);
                     }
                     else {
-                        y = totalRect.y;
+                        y = totalRect.y - (!(legend.height && legend.width) && legend.mode === 'Interactive' ? map.mapAreaRect.x : 0);
                     }
                     break;
                 case 'Far':
                     if (legend.position === 'Top' || legend.position === 'Bottom') {
-                        x = (totalWidth - width) - spacing;
+                        x = (totalWidth - width) - (legend.mode === 'Interactive' ? 0 : spacing);
                     }
                     else {
-                        y = totalHeight - height;
+                        y = totalHeight - height - (legend.mode === 'Default' ? spacing : 0);
                     }
                     break;
             }
             if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
-                this.legendTotalRect = map.totalRect = totalRect;
+                this.legendTotalRect = map.mapAreaRect = map.totalRect = totalRect;
             }
             else {
+                map.totalRect = null;
                 if ((legend.height || legend.width) && legend.mode === 'Interactive') {
                     map.totalRect = totalRect;
                 }
                 this.legendTotalRect = map.mapAreaRect = totalRect;
             }
+            if (legend.position === 'Left') {
+                map.mapAreaRect.width = totalRect.width;
+            }
             this.translate = new Point(x, y);
         }
     };
@@ -11527,7 +11872,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                     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);
                         var templateElement = templateFn(_this.maps);
                         var markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                             templateElement;
@@ -11638,6 +11983,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                     borderColor: legend.shapeBorder.color, borderWidth: legend.shapeBorder.width
                 });
             }
+            else {
+                for (var i = 0; i < this.legendCollection.length; i++) {
+                    if (this.legendCollection[i]['text'] === legendText && this.legendCollection[i]['fill'] === legendFill) {
+                        this.legendCollection[i].data.push(newColllection[0]);
+                    }
+                }
+            }
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11839,15 +12191,16 @@ var Legend = /** @__PURE__ @class */ (function () {
         var width = 10;
         var direction = (legend.orientation === 'None') ? (legend.position === 'Top' || legend.position === 'Bottom')
             ? 'Horizontal' : 'Vertical' : legend.orientation;
+        rect.y = legend.position === 'Float' && this.maps.isTileMap ? rect.y - this.maps.mapAreaRect.y : rect.y;
         if (direction === 'Horizontal') {
             if (!legend.invertedPointer) {
-                locX = rect.x + (rect.width / 2);
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y;
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                     ' L ' + (locX + width) + ' ' + (locY - height) + ' Z ';
             }
             else {
-                locX = rect.x + (rect.width / 2);
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY + height) +
                     ' L ' + (locX + width) + ' ' + (locY + height) + ' Z ';
@@ -11855,20 +12208,25 @@ var Legend = /** @__PURE__ @class */ (function () {
         }
         else {
             if (!legend.invertedPointer) {
-                locX = rect.x + (rect.width);
+                locX = rect.x + rect.width - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height / 2);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX + width) + ' ' + (locY - height) +
                     ' L ' + (locX + width) + ' ' + (locY + height) + ' z ';
             }
             else {
-                locX = rect.x;
+                locX = rect.x - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                 locY = rect.y + (rect.height / 2);
                 path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                     ' L ' + (locX - width) + ' ' + (locY + height) + ' z ';
             }
         }
         var pathOptions = new PathOption(id, fill, strokeWidth, stroke, 1, 1, '', path);
-        this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
+        if (legend.position === 'Float' && this.maps.isTileMap) {
+            this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.renderer.drawPath(pathOptions));
+        }
+        else {
+            this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
+        }
     };
     Legend.prototype.wireEvents = function (element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -11925,6 +12283,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 '_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) {
@@ -12066,6 +12427,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 '_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) {
@@ -12229,10 +12593,20 @@ var Legend = /** @__PURE__ @class */ (function () {
                 var shapeDataValueCase = !isNullOrUndefined(shapeData['properties'][shapePath])
                     && isNaN(shapeData['properties'][shapePath]) ? shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
-                    legendData.push({
-                        layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
-                        name: data[dataPath], value: value
-                    });
+                    if (shapeData['geometry']['type'] != 'MultiPoint') {
+                        legendData.push({
+                            layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                            name: data[dataPath], value: value, pointIndex: -1
+                        });
+                    }
+                    else {
+                        for (var j = 0; j < shapeData['geometry'].coordinates.length; j++) {
+                            legendData.push({
+                                layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                                name: data[dataPath], value: value, pointIndex: j
+                            });
+                        }
+                    }
                 }
             }
         }
@@ -12278,15 +12652,30 @@ var Legend = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the legend.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    Legend.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Legend.prototype.destroy = function () {
+        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;
     };
     return Legend;
 }());
@@ -12344,7 +12733,8 @@ var Highlight = /** @__PURE__ @class */ (function () {
             targetEle.getAttribute('class') !== 'ShapeselectionMapStyle' && !isTouch &&
             targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
-            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle') {
+            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
             layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var shapeData = void 0;
@@ -12354,8 +12744,9 @@ var Highlight = /** @__PURE__ @class */ (function () {
             var dataIndex = void 0;
             if (targetEle.id.indexOf('shapeIndex') > -1) {
                 shapeIn = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features'] ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIn]['properties'] : null;
+                shapeData = this.maps.layers[layerIndex].shapeData['features'] &&
+                    !isNullOrUndefined(this.maps.layersCollection[layerIndex].layerData[shapeIn]) ?
+                    this.maps.layersCollection[layerIndex].layerData[shapeIn]['property'] : null;
                 dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.highlightSettings = this.maps.layers[layerIndex].highlightSettings;
@@ -12427,7 +12818,8 @@ var Highlight = /** @__PURE__ @class */ (function () {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Highlight.prototype.handleHighlight = function (targetElement, layerIndex, data, shapeData) {
-        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule
+            && this.maps.legendSettings.type === 'Layers') {
             this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
         }
         var selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
@@ -12446,7 +12838,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
         var border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
             width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };
@@ -12502,15 +12894,13 @@ var Highlight = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the highlight.
      *
-     * @param {Maps} maps - Specifies the maps instance
      * @returns {void}
      * @private
      */
-    Highlight.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Highlight.prototype.destroy = function () {
+        this.highlightSettings = null;
         this.removeEventListener();
+        this.maps = null;
     };
     return Highlight;
 }());
@@ -12531,7 +12921,6 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.addEventListener = function () {
         if (!this.maps.isDestroyed) {
             this.maps.on(click, this.mouseClick, this);
-            this.maps.on(Browser.touchEndEvent, this.mouseClick, this);
         }
     };
     /**
@@ -12544,7 +12933,6 @@ var Selection = /** @__PURE__ @class */ (function () {
             return;
         }
         this.maps.off(click, this.mouseClick);
-        this.maps.off(Browser.touchEndEvent, this.mouseClick);
     };
     Selection.prototype.mouseClick = function (targetElement) {
         if (!isNullOrUndefined(targetElement['type']) && targetElement['type'].indexOf('touch') !== -1 &&
@@ -12562,8 +12950,12 @@ var Selection = /** @__PURE__ @class */ (function () {
             var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
             if (targetElement.id.indexOf('shapeIndex') > -1) {
                 shapeIndex = parseInt(targetElement.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                shapeData = !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['features'])
+                    && this.maps.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                    this.maps.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] :
+                    !isNullOrUndefined(this.maps.layers[layerIndex].shapeData['geometries'])
+                        && this.maps.layers[layerIndex].shapeData['geometries']['length'] > shapeIndex ?
+                        this.maps.layers[layerIndex].shapeData['geometries'][shapeIndex]['properties'] : null;
                 dataIndex = parseInt(targetElement.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.selectionsettings = this.maps.layers[layerIndex].selectionSettings;
@@ -12644,15 +13036,17 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.selectMap = function (targetElement, shapeData, data) {
         var _this = this;
         var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        var isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         var selectionsettings = this.selectionsettings;
         var border = {
-            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
-            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) : this.selectionsettings.border.color,
+            width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
+                (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
         };
         var eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
+            fill: isLineStringShape ? 'transparent' : (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none'),
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -12664,7 +13058,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.maps.trigger('itemSelection', eventArgs, function (observedArgs) {
             eventArgs.border.opacity = isNullOrUndefined(_this.selectionsettings.border.opacity) ? _this.selectionsettings.opacity : _this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
-                if (targetElement.getAttribute('class') === _this.selectionType + 'selectionMapStyle') {
+                if (targetElement.getAttribute('class') === _this.selectionType + 'selectionMapStyle'
+                    || targetElement.getAttribute('class') === 'LineselectionMapStyle') {
                     removeClass(targetElement);
                     _this.removedSelectionList(targetElement);
                     for (var m = 0; m < _this.maps.shapeSelectionItem.length; m++) {
@@ -12683,7 +13078,8 @@ var Selection = /** @__PURE__ @class */ (function () {
                 else {
                     var layetElement = getElementByID(_this.maps.element.id + '_Layer_Collections');
                     if (!_this.selectionsettings.enableMultiSelect &&
-                        layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length > 0) {
+                        (layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length > 0 ||
+                            layetElement.getElementsByClassName('LineselectionMapStyle').length > 0)) {
                         var eleCount = layetElement.getElementsByClassName(_this.selectionType + 'selectionMapStyle').length;
                         var ele = void 0;
                         for (var k = 0; k < eleCount; k++) {
@@ -12691,6 +13087,14 @@ var Selection = /** @__PURE__ @class */ (function () {
                             removeClass(ele);
                             _this.removedSelectionList(ele);
                         }
+                        if (layetElement.getElementsByClassName('LineselectionMapStyle').length > 0) {
+                            eleCount = layetElement.getElementsByClassName('LineselectionMapStyle').length;
+                            for (var k = 0; k < eleCount; k++) {
+                                ele = layetElement.getElementsByClassName('LineselectionMapStyle')[0];
+                                removeClass(ele);
+                                _this.removedSelectionList(ele);
+                            }
+                        }
                         if (_this.selectionType === 'Shape') {
                             _this.maps.shapeSelectionItem = [];
                             var selectionLength = _this.maps.selectedElementId.length;
@@ -12708,13 +13112,24 @@ var Selection = /** @__PURE__ @class */ (function () {
                             ele.setAttribute('stroke', _this.maps.layers[layerIndex_2].navigationLineSettings[index].color);
                         }
                     }
-                    if (!getElement(_this.selectionType + 'selectionMap')) {
-                        document.body.appendChild(createStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs));
+                    if (!isLineStringShape) {
+                        if (!getElement(_this.selectionType + 'selectionMap')) {
+                            document.body.appendChild(createStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', _this.selectionType + 'selectionMapStyle');
                     }
                     else {
-                        customizeStyle(_this.selectionType + 'selectionMap', _this.selectionType + 'selectionMapStyle', eventArgs);
+                        if (!getElement('LineselectionMap')) {
+                            document.body.appendChild(createStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs));
+                        }
+                        else {
+                            customizeStyle('LineselectionMap', 'LineselectionMapStyle', eventArgs);
+                        }
+                        targetElement.setAttribute('class', 'LineselectionMapStyle');
                     }
-                    targetElement.setAttribute('class', _this.selectionType + 'selectionMapStyle');
                     if (targetElement.getAttribute('class') === 'ShapeselectionMapStyle') {
                         _this.maps.shapeSelectionClass = getElement(_this.selectionType + 'selectionMap');
                         _this.maps.selectedElementId.push(targetElement.getAttribute('id'));
@@ -12783,15 +13198,13 @@ var Selection = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the selection.
      *
-     * @param {Maps} maps - Specifies the maps instance.
      * @returns {void}
      * @private
      */
-    Selection.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Selection.prototype.destroy = function () {
+        this.selectionsettings = null;
         this.removeEventListener();
+        this.maps = null;
     };
     return Selection;
 }());
@@ -12976,7 +13389,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 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, function (args) {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
@@ -12994,7 +13407,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -13010,7 +13423,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -13020,6 +13433,10 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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
@@ -13033,9 +13450,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                     }
                 }
                 else {
-                    _this.removeTooltip();
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    _this.maps.clearTemplate();
+                    _this.clearTooltip();
                 }
             });
             if (this.svgTooltip) {
@@ -13050,9 +13465,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 });
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
         else {
@@ -13062,9 +13475,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 this.maps.notify(click, this);
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
     };
@@ -13110,8 +13521,18 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         }
     };
     MapsTooltip.prototype.removeTooltip = function () {
+        var isTooltipRemoved = false;
         if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
             remove(document.getElementsByClassName('EJ2-maps-Tooltip')[0]);
+            isTooltipRemoved = true;
+        }
+        return isTooltipRemoved;
+    };
+    MapsTooltip.prototype.clearTooltip = function () {
+        var isTooltipRemoved = this.removeTooltip();
+        if (isTooltipRemoved) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.maps.clearTemplate();
         }
     };
     // eslint-disable-next-line valid-jsdoc
@@ -13160,12 +13581,17 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the tooltip.
      *
-     * @param {Maps} maps Specifies the maps instance
      * @returns {void}
      * @private
      */
-    MapsTooltip.prototype.destroy = function (maps) {
+    MapsTooltip.prototype.destroy = function () {
+        if (!isNullOrUndefined(this.svgTooltip)) {
+            this.svgTooltip.destroy();
+        }
+        this.svgTooltip = null;
         this.removeEventListener();
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     };
     return MapsTooltip;
 }());
@@ -13179,7 +13605,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         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;
@@ -13188,8 +13613,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.shapeZoomLocation = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.intersect = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.mouseDownLatLong = { x: 0, y: 0 };
@@ -13205,7 +13628,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.selectionColor = this.maps.zoomSettings.selectionColor;
         this.fillColor = this.maps.zoomSettings.color;
         this.addEventListener();
-        this.groupElements = [];
     }
     /**
      * To perform zooming for maps
@@ -13229,7 +13651,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var minZoom = map.zoomSettings.minZoom;
         newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         var prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && (type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)) {
+        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+            || map.isReset)) {
             var availSize = map.mapAreaRect;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var minBounds = map.baseMapRectBounds['min'];
@@ -13237,16 +13660,34 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var maxBounds = map.baseMapRectBounds['max'];
             var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            var point = map.translatePoint;
-            var translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-            var translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                var point = map.translatePoint;
+                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = newZoomFactor;
-            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);
@@ -13263,34 +13704,49 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
             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 (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;
             }
-            if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+            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 = 'none';
+                }
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
+                var element1 = document.getElementById(this.maps.element.id + '_tiles');
+                var animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(function () {
+                    // if (type === 'ZoomOut') {
+                    //     element1.removeChild(element1.children[element1.childElementCount - 1]);
+                    //     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.markerLineAnimation(map);
-            map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-            var element1 = document.getElementById(this.maps.element.id + '_tiles');
-            var animationDuration = this.maps.layersCollection[0].animationDuration;
-            setTimeout(function () {
-                // if (type === 'ZoomOut') {
-                //     element1.removeChild(element1.children[element1.childElementCount - 1]);
-                //     if (element1.childElementCount) {
-                //         element1.removeChild(element1.children[element1.childElementCount - 1]);
-                //     } else {
-                //         element1 = element1;
-                //     }
-                // }
-                _this.applyTransform();
-                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;
     };
+    Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
+        mapTotalWidth *= newZoomFactor;
+        mapTotalHeight *= newZoomFactor;
+        var widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        return new Point(translatePointX, translatePointY);
+    };
     Zoom.prototype.triggerZoomEvent = function (prevTilePoint, prevLevel, type) {
         var map = this.maps;
         var zoomArgs;
@@ -13309,6 +13765,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             };
         }
         map.trigger('zoom', zoomArgs);
+        return zoomArgs.cancel;
     };
     Zoom.prototype.getTileTranslatePosition = function (prevLevel, currentLevel, position, type) {
         var map = this.maps;
@@ -13334,6 +13791,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var zoomRect = this.zoomingRect;
         var maxZoom = map.zoomSettings.maxZoom;
         var minZoom = map.zoomSettings.minZoom;
+        var isZoomCancelled;
         if (zoomRect.height > 0 && zoomRect.width > 0) {
             var x = this.zoomingRect.x + (this.zoomingRect.width / 2);
             var y = this.zoomingRect.y + (this.zoomingRect.height / 2);
@@ -13346,7 +13804,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 var 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)));
@@ -13359,13 +13821,21 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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;
         }
     };
     Zoom.prototype.setInteraction = function (newInteraction) {
@@ -13394,6 +13864,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.pinchFactor *= newScale;
         this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
         var zoomCalculationFactor = this.pinchFactor;
+        var isZoomCancelled;
         if (!map.isTileMap) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var minBounds = map.baseMapRectBounds['min'];
@@ -13402,14 +13873,31 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
             var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
             var translatePoint = map.translatePoint;
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
-            var translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
-            var translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
+                translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
+                translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.scale = zoomCalculationFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            if (isZoomCancelled) {
+                map.translatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
         }
         else {
             var newTileFactor = zoomCalculationFactor;
@@ -13420,10 +13908,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
             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();
     };
     Zoom.prototype.drawZoomRectangle = function () {
         var map = this.maps;
@@ -13469,17 +13967,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     };
-    Zoom.prototype.applyTransform = function (animate$$1) {
+    Zoom.prototype.applyTransform = function (maps, animate$$1) {
         var layerIndex;
         this.templateCount = 0;
         var markerStyle;
-        var scale = this.maps.scale;
-        var x = this.maps.translatePoint.x;
-        var y = this.maps.translatePoint.y;
+        var scale = maps.scale;
+        var x = maps.translatePoint.x;
+        var 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 (var i_1 = 0; i_1 < this.layerCollectionEle.childElementCount; i_1++) {
@@ -13487,30 +13985,29 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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];
-                    var factor = this.maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    this.currentLayer = maps.layersCollection[this.index];
+                    var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                     for (var j = 0; j < layerElement.childElementCount; j++) {
                         var 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];
@@ -13529,11 +14026,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                             markerSelectionValues['latitude'] ||
                                             this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['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) {
                                             var groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
                                                 groupElement.style.display = 'none';
@@ -13545,29 +14042,29 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         }
                                     }
                                 }
-                                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) {
-                                    var mapsTooltip = this.maps.mapsTooltipModule;
+                                    var mapsTooltip = maps.mapsTooltipModule;
                                     var 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 {
                                             var x_2 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
                                             var y_1 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
-                                            if (this.maps.isTileMap) {
-                                                x_2 += +getElement(this.maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
-                                                y_1 += +getElement(this.maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
+                                            if (maps.isTileMap) {
+                                                x_2 += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
+                                                y_1 += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
                                             }
                                             mapsTooltip.svgTooltip.location.x = x_2;
                                             mapsTooltip.svgTooltip.location.y = y_1;
@@ -13585,9 +14082,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
-                                for (var l = 0; l < this.maps.bubbleModule.bubbleCollection.length; l++) {
+                                for (var l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    var bubbleCollection = this.maps.bubbleModule.bubbleCollection[l];
+                                    var bubbleCollection = maps.bubbleModule.bubbleCollection[l];
                                     if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
                                         bubbleCollection['DataIndex'] === dataIndex) {
                                         var centerX = bubbleCollection['center']['x'];
@@ -13606,24 +14103,25 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 }
                             }
                         }
-                        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;
+                            var labelAnimate = !maps.isTileMap && animate$$1;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this.zoomshapewidth = this.shapeZoomLocation[labelIndex].getBoundingClientRect();
-                                    this.maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', animate$$1);
-                                    var dataLabel = this.maps.layers[this.index].dataLabelSettings;
+                                    this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
+                                    maps.zoomShapeCollection.push(this.zoomshapewidth);
+                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
+                                    var dataLabel = maps.layers[this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
-                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1) {
-                                            var labelX = ((this.maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
-                                            var labelY = ((this.maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
+                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
+                                            var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
+                                            var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             var zoomtext = currentEle.childNodes[k]['innerHTML'];
-                                            var style = this.maps.layers[this.index].dataLabelSettings.textStyle;
+                                            var style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             var zoomtextSize = measureText(zoomtext, style);
                                             var padding = 5;
                                             var rectElement = currentEle.childNodes[k - 1];
@@ -13638,11 +14136,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         }
                     }
                 }
-                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);
                 }
             }
         }
@@ -13702,10 +14200,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     }
                     var 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;
                     var 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;
                     var offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                         var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -13725,10 +14223,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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;
                     var 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);
@@ -13736,7 +14234,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             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) {
@@ -13832,7 +14330,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     }
                     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 {
@@ -13842,7 +14340,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     }
                     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;
                         }
@@ -13880,7 +14378,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     || 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;
                                 }
@@ -13906,11 +14404,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         }
                         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));
                     }
                 }
@@ -14032,7 +14530,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
             var elementRect = getElementByID(map.element.id + '_svg').getBoundingClientRect();
             var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
-                ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
+                ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
             var panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14046,15 +14544,15 @@ var Zoom = /** @__PURE__ @class */ (function () {
             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;
@@ -14082,7 +14580,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             };
             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;
@@ -14094,7 +14592,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             (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);
     };
     Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
         var _this = this;
@@ -14124,18 +14622,36 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var max = map.baseMapRectBounds['max'];
             var mapWidth = Math.abs(max['x'] - min['x']);
             var mapHeight = Math.abs(min['y'] - max['y']);
-            var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
-            var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
-            var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
-            translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
-                : translatePointX;
-            translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
-                : translatePointY;
-            map.translatePoint = new Point(translatePointX, translatePointY);
+            var translatePointX = void 0;
+            var translatePointY = void 0;
+            if (zoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
+                zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                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);
+                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
+                    : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
+                    : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
             map.zoomTranslatePoint = map.translatePoint;
             map.scale = zoomFactor;
-            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)) {
             var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
@@ -14152,34 +14668,44 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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);
-                var element1 = document.getElementById(this.maps.element.id + '_tiles');
-                var animationDuration = this.maps.layersCollection[0].animationDuration;
-                setTimeout(function () {
-                    _this.applyTransform(true);
-                    if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
-                        document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                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 = 'none';
                     }
-                }, animationDuration);
+                    if (document.querySelector('.GroupElement')) {
+                        document.querySelector('.GroupElement').style.display = 'none';
+                    }
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                    var element1 = document.getElementById(this.maps.element.id + '_tiles');
+                    var animationDuration = this.maps.layersCollection[0].animationDuration;
+                    setTimeout(function () {
+                        _this.applyTransform(_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;
         }
     };
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
+        var zoomInElements;
+        var 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
         });
         var kitHeight = 16;
         var kitWidth = 16;
@@ -14194,7 +14720,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var toolBarLength = map.zoomSettings.toolbars.length;
         var toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
         var 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)));
         var defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
@@ -14243,13 +14768,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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_1 + '_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_1, 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': {
@@ -14434,7 +14959,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 x = (size.width / 2) - (toolBarSize.width / 2);
                 break;
             case 'Far':
-                x = (size.width - toolBarSize.width) - padding;
+                if (!isNullOrUndefined(map.legendModule) && map.legendSettings.position === 'Left') {
+                    x = size.width + size.x - toolBarSize.width - padding;
+                }
+                else {
+                    x = (size.width - toolBarSize.width) - padding;
+                }
                 break;
         }
         var extraPosition = map.getExtraPosition();
@@ -14490,6 +15020,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     map.mapScaleValue = value - delta;
+                    map.isReset = (map.mapScaleValue < 1) ? true : false;
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.mapScaleValue === 1) {
                         map.markerCenterLatitude = null;
@@ -14583,14 +15114,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', 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');
@@ -14740,15 +15271,30 @@ var Zoom = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the zoom.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    Zoom.prototype.destroy = function (maps) {
+    Zoom.prototype.destroy = function () {
+        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;
     };
     return Zoom;
 }());
@@ -14766,7 +15312,6 @@ var Print = /** @__PURE__ @class */ (function () {
      * @param {Maps} control - Specifies the instance of the map
      */
     function Print(control) {
-        this.control = control;
     }
     /**
      * To print the Maps
@@ -14775,17 +15320,16 @@ var Print = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
-    Print.prototype.print = function (elements) {
-        var _this = this;
-        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.prototype.print = function (maps, elements) {
+        var printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        printWindow.moveTo(0, 0);
+        printWindow.resizeTo(screen.availWidth, screen.availHeight);
         var argsData = {
-            cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
+            cancel: false, htmlContent: this.getHTMLContent(maps, elements), name: beforePrint
         };
-        this.control.trigger('beforePrint', argsData, function (beforePrintArgs) {
+        maps.trigger('beforePrint', argsData, function (beforePrintArgs) {
             if (!argsData.cancel) {
-                print(argsData.htmlContent, _this.printWindow);
+                print(argsData.htmlContent, printWindow);
             }
         });
     };
@@ -14796,8 +15340,29 @@ var Print = /** @__PURE__ @class */ (function () {
      * @returns {Element} - Returns the div element
      * @private
      */
-    Print.prototype.getHTMLContent = function (elements) {
+    Print.prototype.getHTMLContent = function (maps, elements) {
         var div = createElement('div');
+        var divElement = maps.element.cloneNode(true);
+        if (maps.isTileMap) {
+            for (var 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');
+                    var 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, function (value) {
@@ -14812,7 +15377,7 @@ var Print = /** @__PURE__ @class */ (function () {
             }
         }
         else {
-            div.appendChild(this.control.element.cloneNode(true));
+            div.appendChild(divElement);
         }
         return div;
     };
@@ -14827,15 +15392,10 @@ var Print = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the print.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    Print.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
-    };
+    Print.prototype.destroy = function () { };
     return Print;
 }());
 
@@ -14852,7 +15412,6 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @param {Maps} control - Specifies the instance of the map
      */
     function ImageExport(control) {
-        this.control = control;
     }
     /**
      * To export the file as image/svg format
@@ -14863,32 +15422,33 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @returns {Promise<string>} - Returns the promise string.
      * @private
      */
-    ImageExport.prototype.export = function (type, fileName, allowDownload) {
-        var _this = this;
+    ImageExport.prototype.export = function (maps, type, fileName, allowDownload) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var promise = new Promise(function (resolve, reject) {
             var 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()
                 }
             });
             var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            var toolbarEle = document.getElementById(_this.control.element.id + '_ToolBar');
-            var svgParent = document.getElementById(_this.control.element.id + '_Tile_SVG_Parent');
+            var toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
+            var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             var svgDataElement;
-            if (!_this.control.isTileMap) {
+            var tileSvg;
+            var 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 {
-                var tileSvg = document.getElementById(_this.control.element.id + '_Tile_SVG');
+                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">' +
-                    _this.control.svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
+                    svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgDataElement] :
-                [(new XMLSerializer()).serializeToString(_this.control.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(svgObject)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
                 if (allowDownload) {
                     triggerDownload(fileName, type, url, isDownload);
@@ -14900,7 +15460,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
             else {
                 var image_1 = new Image();
                 var ctxt_1 = imageCanvasElement.getContext('2d');
-                if (!_this.control.isTileMap) {
+                if (!maps.isTileMap) {
                     image_1.onload = (function () {
                         ctxt_1.drawImage(image_1, 0, 0);
                         window.URL.revokeObjectURL(url);
@@ -14919,31 +15479,37 @@ var ImageExport = /** @__PURE__ @class */ (function () {
                     image_1.src = url;
                 }
                 else {
+                    var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
+                    var top_1 = parseFloat(svgParentElement.getAttribute('y'));
+                    var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                     var imgxHttp = new XMLHttpRequest();
-                    var imgTileLength_1 = _this.control.mapLayerPanel.tiles.length;
+                    var imgTileLength_1 = maps.mapLayerPanel.tiles.length;
                     var _loop_1 = function (i) {
-                        var tile = document.getElementById(_this.control.element.id + '_tile_' + (i - 1));
+                        var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         var exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        ctxt_1.fillStyle = _this.control.background ? _this.control.background : '#FFFFFF';
-                        ctxt_1.fillRect(0, 0, _this.control.availableSize.width, _this.control.availableSize.height);
-                        ctxt_1.font = _this.control.titleSettings.textStyle.size + ' Arial';
-                        ctxt_1.fillStyle = document.getElementById(_this.control.element.id + '_Map_title').getAttribute('fill');
-                        ctxt_1.fillText(_this.control.titleSettings.text, parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('y')));
+                        ctxt_1.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                        ctxt_1.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                        ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';
+                        var titleElement = document.getElementById(maps.element.id + '_Map_title');
+                        if (!isNullOrUndefined(titleElement)) {
+                            ctxt_1.fillStyle = titleElement.getAttribute('fill');
+                            ctxt_1.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                        }
                         exportTileImg.onload = (function () {
                             if (i === 0 || i === imgTileLength_1 + 1) {
                                 if (i === 0) {
                                     ctxt_1.setTransform(1, 0, 0, 1, 0, 0);
-                                    ctxt_1.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                    ctxt_1.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                     ctxt_1.clip();
                                 }
                                 else {
-                                    ctxt_1.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                    ctxt_1.setTransform(1, 0, 0, 1, left_1, top_1);
                                 }
                             }
                             else {
-                                ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                    (parseFloat(document.getElementById(_this.control.element.id + '_tile_parent').style.top)));
+                                ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) +
+                                    top_1);
                             }
                             ctxt_1.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength_1 + 1) {
@@ -14969,7 +15535,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
                             }
                             else {
                                 setTimeout(function () {
-                                    exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(_this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
+                                    exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                                 }, 300);
                             }
                         }
@@ -14998,15 +15564,10 @@ var ImageExport = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the ImageExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    ImageExport.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
-    };
+    ImageExport.prototype.destroy = function () { };
     return ImageExport;
 }());
 
@@ -15022,8 +15583,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      *
      * @param {Maps} control Specifies the instance of the map
      */
-    function PdfExport(control) {
-        this.control = control;
+    function PdfExport() {
     }
     /**
      * To export the file as image/svg format
@@ -15035,25 +15595,24 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @returns {Promise<string>} - Returns the promise string
      * @private
      */
-    PdfExport.prototype.export = function (type, fileName, allowDownload, orientation) {
-        var _this = this;
+    PdfExport.prototype.export = function (maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var promise = new Promise(function (resolve, reject) {
             var 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;
-            var svgParent = document.getElementById(_this.control.element.id + '_Tile_SVG_Parent');
+            var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             var svgData;
-            var exportElement = _this.control.svgObject.cloneNode(true);
+            var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var 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)');
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -15061,7 +15620,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var pdfDocument = new PdfDocument();
             var image = new Image();
             var ctx = canvasElement.getContext('2d');
-            if (!_this.control.isTileMap) {
+            if (!maps.isTileMap) {
                 image.onload = (function () {
                     ctx.drawImage(image, 0, 0);
                     window.URL.revokeObjectURL(url);
@@ -15069,7 +15628,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                         var 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();
@@ -15082,31 +15641,36 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                 image.src = url;
             }
             else {
+                var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
+                var top_1 = parseFloat(svgParentElement.getAttribute('y'));
+                var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                 var xHttp = new XMLHttpRequest();
-                var tileLength_1 = _this.control.mapLayerPanel.tiles.length;
+                var tileLength_1 = maps.mapLayerPanel.tiles.length;
                 var _loop_1 = function (i) {
-                    var tile = document.getElementById(_this.control.element.id + '_tile_' + (i - 1));
+                    var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     var 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';
-                    ctx.fillStyle = document.getElementById(_this.control.element.id + '_Map_title').getAttribute('fill');
-                    ctx.fillText(_this.control.titleSettings.text, parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(_this.control.element.id + '_Map_title').getAttribute('y')));
+                    ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                    ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                    ctx.font = maps.titleSettings.textStyle.size + ' Arial';
+                    var titleElement = document.getElementById(maps.element.id + '_Map_title');
+                    if (!isNullOrUndefined(titleElement)) {
+                        ctx.fillStyle = titleElement.getAttribute('fill');
+                        ctx.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                    }
                     tileImg.onload = (function () {
                         if (i === 0 || i === tileLength_1 + 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_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                ctx.setTransform(1, 0, 0, 1, left_1, top_1);
                             }
                         }
                         else {
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                (parseFloat(document.getElementById(_this.control.element.id + '_tile_parent').style.top)));
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) + top_1);
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength_1 + 1) {
@@ -15115,7 +15679,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                                 var 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();
@@ -15132,7 +15696,8 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                         }
                         else {
                             setTimeout(function () {
-                                tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(_this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
+                                var tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
+                                tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
                     }
@@ -15158,17 +15723,12 @@ var PdfExport = /** @__PURE__ @class */ (function () {
         return 'PdfExport';
     };
     /**
-     * To destroy the PdfExports.
+     * To destroy the PdfExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    PdfExport.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
-    };
+    PdfExport.prototype.destroy = function () { };
     return PdfExport;
 }());
 
@@ -15180,5 +15740,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
  * 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, 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.es5.js.map