@syncfusion/ej2-maps 19.4.55 → 19.4.56-105067

package/src/maps/maps.d.ts

@@ -248,11 +248,18 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      */
     loaded: EmitType<ILoadedEventArgs>;
     /**
-     * Triggers when clicking an element in maps.
+     * Triggers when a user clicks on an element in Maps.
      *
      * @event click
+     * @deprecated
      */
     click: EmitType<IMouseEventArgs>;
+    /**
+     * Triggers when a user clicks on an element in Maps.
+     *
+     * @event onclick
+     */
+    onclick: EmitType<IMouseEventArgs>;
     /**
      * Triggers when performing the double click operation on an element in maps.
      *
@@ -281,13 +288,13 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers before the legend gets rendered.
      *
      * @event legendRendering
-
+     * @deprecated
      */
     legendRendering: EmitType<ILegendRenderingEventArgs>;
     /**
      * Triggers after the maps tooltip gets rendered.
      *
-
+     * @deprecated
      * @event tooltipRenderComplete
      */
     tooltipRenderComplete: EmitType<ITooltipRenderCompleteEventArgs>;
@@ -437,6 +444,12 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     availableSize: Size;
+    /**
+     * whether it is layer add or not.
+     *
+     * @private
+     */
+    isAddLayer: boolean;
     /**
      * Specifies the localization object.
      *
@@ -818,6 +831,7 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      */
     mapsOnClick(e: PointerEvent): void;
+    private clickHandler;
     private triggerShapeSelection;
     private getClickLocation;
     /**
@@ -1024,6 +1038,13 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @returns {Promise<string>} - Returns the string value.
      */
     export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, allowDownload?: boolean): Promise<string>;
+    /**
+     * This method is used to get the Bing maps URL.
+     *
+     * @param {string} url - Specifies the URL of the maps.
+     * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
+     */
+    getBingUrlTemplate(url: string): Promise<string>;
     /**
      * To find visibility of layers and markers for required modules load.
      *

package/src/maps/maps.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__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 = (this && this.__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 = (this && this.__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 = (this && this.__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 */
@@ -35,8 +35,8 @@ import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
 import { Marker } from './layers/marker';
-import { load, click, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
-import { getThemeStyle } from './model/theme';
+import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { getThemeStyle, Theme } from './model/theme';
 import { BingMap } from './layers/bing-map';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
@@ -75,6 +75,10 @@ var Maps = /** @class */ (function (_super) {
          * Resize the map
          */
         _this.isResize = false;
+        /**
+         * @private
+         */
+        _this.isReset = false;
         /** @private */
         _this.baseSize = new Size(0, 0);
         /** @public */
@@ -232,6 +236,7 @@ var Maps = /** @class */ (function (_super) {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     };
     /**
      * To Initialize the control rendering.
@@ -374,16 +379,7 @@ var Maps = /** @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) {
@@ -394,7 +390,9 @@ var Maps = /** @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) {
@@ -417,12 +415,14 @@ var Maps = /** @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);
+                        }
                     }
                 }
             }
@@ -464,12 +464,16 @@ var Maps = /** @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) {
@@ -500,7 +504,8 @@ var Maps = /** @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,
@@ -520,9 +525,11 @@ var Maps = /** @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);
             }
         }
     };
@@ -574,6 +581,7 @@ var Maps = /** @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 {
@@ -592,12 +600,21 @@ var Maps = /** @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++) {
@@ -615,7 +632,7 @@ var Maps = /** @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];
@@ -629,7 +646,7 @@ var Maps = /** @class */ (function (_super) {
                 }
             }
             if (this.zoomModule && (this.previousScale !== this.scale)) {
-                this.zoomModule.applyTransform(true);
+                this.zoomModule.applyTransform(this, true);
             }
         }
     };
@@ -652,7 +669,7 @@ var Maps = /** @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;
@@ -687,10 +704,7 @@ var Maps = /** @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');
@@ -738,7 +752,7 @@ var Maps = /** @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;
             }
@@ -785,12 +799,19 @@ var Maps = /** @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' });
@@ -803,6 +824,7 @@ var Maps = /** @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);
@@ -960,6 +982,7 @@ var Maps = /** @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' });
@@ -1024,24 +1047,35 @@ var Maps = /** @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) {
@@ -1141,13 +1175,6 @@ var Maps = /** @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)) {
@@ -1155,7 +1182,7 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -1321,14 +1348,14 @@ var Maps = /** @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.
      *
@@ -1356,6 +1383,7 @@ var Maps = /** @class */ (function (_super) {
                     _this.refreshing = true;
                     _this.wireEVents();
                     _this.render();
+                    _this.refreshing = false;
                 }, 500);
             }
         }
@@ -1386,7 +1414,7 @@ var Maps = /** @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 };
@@ -1432,8 +1460,10 @@ var Maps = /** @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.
@@ -1442,8 +1472,9 @@ var Maps = /** @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.
@@ -1462,7 +1493,7 @@ var Maps = /** @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();
         }
     };
@@ -1669,7 +1700,8 @@ var Maps = /** @class */ (function (_super) {
             Zoom: 'Zoom',
             ZoomOut: 'Zoom out',
             Pan: 'Pan',
-            Reset: 'Reset'
+            Reset: 'Reset',
+            ImageNotFound: 'Image Not Found'
         };
     };
     /**
@@ -1677,6 +1709,7 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.destroy = function () {
         this.unWireEVents();
+        _super.prototype.destroy.call(this);
         this.shapeSelectionItem = [];
         this.toggledShapeElementId = [];
         this.toggledLegendId = [];
@@ -1691,11 +1724,14 @@ var Maps = /** @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
@@ -1728,6 +1764,7 @@ var Maps = /** @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']) {
@@ -1748,13 +1785,18 @@ var Maps = /** @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') {
@@ -1768,7 +1810,7 @@ var Maps = /** @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) {
@@ -2005,7 +2047,7 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.print = function (id) {
         if ((this.allowPrint) && (this.printModule)) {
-            this.printModule.print(id);
+            this.printModule.print(this, id);
         }
     };
     /**
@@ -2024,16 +2066,38 @@ var Maps = /** @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.
      *
@@ -2242,6 +2306,9 @@ var Maps = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "click", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "onclick", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "doubleClick", void 0);