@syncfusion/ej2-maps 25.2.5 → 26.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.2.5
+*  version : 26.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@25.2.4",
+  "_id": "@syncfusion/ej2-maps@26.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-ou/s4tco99cxQJFBGlZthR96dOnuc+4td4nf+N4JO+WjxIWVvW0gCWi1ZjY6UEICS+9/lCcoRMDKMBQmBQ3r1Q==",
+  "_integrity": "sha512-htJ3uDy7RsWCbLiAszuzXs1QUbFy5I3cZR1Nb/rCqImvXf3LWWbDamZYfvc+pQdWUEKwYBGOklWh6seVIE+dEg==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-25.2.4.tgz",
-  "_shasum": "86b6edff8a231ab6d079e6d9a9e486faa4dbd315",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-26.1.35.tgz",
+  "_shasum": "5217ebc749b42700d49ec500b54655aedd20370f",
   "_spec": "@syncfusion/ej2-maps@*",
-  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.2.5",
-    "@syncfusion/ej2-buttons": "~25.2.4",
-    "@syncfusion/ej2-compression": "~25.2.3",
-    "@syncfusion/ej2-data": "~25.2.3",
-    "@syncfusion/ej2-file-utils": "~25.2.3",
-    "@syncfusion/ej2-pdf-export": "~25.2.3",
-    "@syncfusion/ej2-svg-base": "~25.2.5"
+    "@syncfusion/ej2-base": "~26.1.37",
+    "@syncfusion/ej2-buttons": "~26.1.40",
+    "@syncfusion/ej2-compression": "~26.1.35",
+    "@syncfusion/ej2-data": "~26.1.41",
+    "@syncfusion/ej2-file-utils": "~26.1.35",
+    "@syncfusion/ej2-pdf-export": "~26.1.35",
+    "@syncfusion/ej2-svg-base": "~26.1.39"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -93,6 +93,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "25.2.5",
+  "version": "26.1.41",
   "sideEffects": false
 }

package/src/maps/layers/bing-map.d.ts

@@ -1,5 +1,5 @@
 import { Maps } from '../maps';
-import { Tile, BingMapType } from '../index';
+import { Tile } from '../index';
 /**
  * Bing map src doc
  */
@@ -12,7 +12,7 @@ export declare class BingMap {
     imageUrl: string;
     maxZoom: string;
     constructor(maps: Maps);
-    getBingMap(tile: Tile, key: string, type: BingMapType, language: string, imageUrl: string, subDomains: string[]): string;
+    getBingMap(tile: Tile, key: string, type: string, language: string, imageUrl: string, subDomains: string[]): string;
     /**
      * @returns {void}
      * @private

package/src/maps/layers/data-label.js

@@ -1,7 +1,6 @@
 import { findMidPointOfPolygon, Rect, filter, getTemplateFunction, getZoomTranslate, getTranslate, RectOption, convertElementFromLabel, Point, TextOption, renderTextElement, textTrim, Internalize, measureTextElement } from '../utils/helper';
 import { isNullOrUndefined, Animation, animationMode } from '@syncfusion/ej2-base';
 import { dataLabelRendering } from '../model/constants';
-import { Theme } from '../model/theme';
 /**
  * DataLabel Module used to render the maps datalabel
  */
@@ -17,7 +16,7 @@ var DataLabel = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var text;
         var shapeNameValue;
-        for (var i = 0; i < dataSource.length; i++) {
+        for (var i = 0; i < (isNullOrUndefined(dataSource) ? 0 : dataSource.length); i++) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var data = dataSource[i];
             var dataShapePathValue = !isNullOrUndefined(data[shapeDataPath]) && isNaN(data[shapeDataPath]) &&
@@ -80,7 +79,8 @@ var DataLabel = /** @class */ (function () {
         var locationX;
         var locationY;
         style.fontFamily = this.maps.theme.toLowerCase() !== 'material' ? this.maps.themeStyle.labelFontFamily : style.fontFamily;
-        style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight || Theme.dataLabelFont.fontWeight;
+        style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight;
+        style.size = style.size || this.maps.themeStyle.fontSize;
         shape = !isNullOrUndefined(shapes) ? shapes['property'] : null;
         var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
@@ -141,7 +141,7 @@ var DataLabel = /** @class */ (function () {
         text = (!isNullOrUndefined(datasrcObj)) ? !isNullOrUndefined(datasrcObj[labelpath]) ?
             datasrcObj[labelpath].toString() : datasrcObj[layer.shapeDataPath] : shapeData['properties'][labelpath];
         if ((Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]') &&
-            (isNullOrUndefined(text) && layer.dataSource['length'] === 0)) {
+            (isNullOrUndefined(text) && (!isNullOrUndefined(layer.dataSource) && layer.dataSource['length'] === 0))) {
             for (var l = 0; l < layer.shapePropertyPath.length; l++) {
                 if (shapeData['properties'][layer.shapePropertyPath[l]]) {
                     text = shapeData['properties'][layer.shapePropertyPath[l]];
@@ -152,7 +152,7 @@ var DataLabel = /** @class */ (function () {
         if (isNullOrUndefined(text) && (layer.dataLabelSettings.template !== '' && layer.dataSource['length'] === 0)) {
             text = shapeData['properties'][layer.shapePropertyPath];
         }
-        if (isNullOrUndefined(text) && layer.dataSource['length'] > 0) {
+        if (isNullOrUndefined(text) && (!isNullOrUndefined(layer.dataSource) && layer.dataSource['length'] > 0)) {
             text = '';
         }
         var dataLabelText = text;

package/src/maps/layers/layer-panel.js

@@ -43,19 +43,10 @@ var LayerPanel = /** @class */ (function () {
             id: this.mapObject.element.id + '_Layer_Collections',
             'clip-path': 'url(#' + this.mapObject.element.id + '_MapArea_ClipRect)'
         }));
-        if (this.mapObject.layers[this.mapObject.baseLayerIndex].layerType === 'GoogleStaticMap') {
-            var staticMapSize = 640;
-            this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
-                x: ((areaRect.width - staticMapSize) / 2), y: 0,
-                width: staticMapSize, height: areaRect.height
-            }));
-        }
-        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
-            }));
-        }
+        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
+        }));
         this.layerGroup.appendChild(this.clipRectElement);
         this.mapObject.baseMapBounds = null;
         this.mapObject.baseMapRectBounds = null;
@@ -189,8 +180,7 @@ var LayerPanel = /** @class */ (function () {
             && this.mapObject.availableSize.height > 512) {
             this.mapObject.applyZoomReset = true;
             this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
-            var padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
-                20 : 0;
+            var padding = 20;
             var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
             if (!isNullOrUndefined(this.mapObject.initialTileTranslate)) {
                 this.mapObject.initialTileTranslate.x = (this.mapObject.availableSize.width / 2) - (totalSize / 2);
@@ -248,55 +238,13 @@ var LayerPanel = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.mapObject.trigger('layerRendering', eventArgs, function (observedArgs) {
             if (!eventArgs.cancel && eventArgs.visible) {
-                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) {
-                        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);
-                        }
+                if ((isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
+                    if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
+                        var bing = new BingMap(_this.mapObject);
+                        _this.bingMapCalculation(layer, layerIndex, _this, bing);
                     }
-                    else if (layer.key && layer.key.length > 1) {
-                        // eslint-disable-next-line @typescript-eslint/no-this-alias
-                        var proxy_1 = _this;
-                        var bing_1 = new BingMap(_this.mapObject);
-                        var bingType = layer.bingMapType === 'AerialWithLabel' ? 'AerialWithLabelsOnDemand' : layer.bingMapType;
-                        var url = 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/' + bingType;
-                        var ajax = new Fetch({
-                            url: url + '?output=json&include=ImageryProviders&urischeme=https&key=' + layer.key
-                        });
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        ajax.onSuccess = function (json) {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            var resource = json['resourceSets'][0]['resources'][0];
-                            var imageUrl = resource['imageUrl'];
-                            var subDomains = resource['imageUrlSubdomains'];
-                            var maxZoom = resource['zoomMax'];
-                            if (imageUrl !== null && imageUrl !== undefined && imageUrl !== bing_1.imageUrl) {
-                                bing_1.imageUrl = imageUrl;
-                            }
-                            if (subDomains !== null && subDomains !== undefined && subDomains !== bing_1.subDomains) {
-                                bing_1.subDomains = subDomains;
-                            }
-                            if (maxZoom !== null && maxZoom !== undefined && maxZoom !== bing_1.maxZoom) {
-                                bing_1.maxZoom = maxZoom;
-                            }
-                            proxy_1.mapObject['bingMap'] = bing_1;
-                            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(_this.mapObject, true);
-                            }
-                        };
-                        ajax.send();
+                    else {
+                        _this.renderTileLayer(_this, layer, layerIndex);
                     }
                 }
                 else {
@@ -404,7 +352,7 @@ var LayerPanel = /** @class */ (function () {
             var _loop_1 = function (i) {
                 var k = void 0;
                 var borderValue = {
-                    color: shapeSettings.border.color,
+                    color: shapeSettings.border.color || this_1.mapObject.themeStyle.shapeBorderColor,
                     width: shapeSettings.border.width,
                     opacity: shapeSettings.border.opacity
                 };
@@ -469,21 +417,20 @@ var LayerPanel = /** @class */ (function () {
                     if (!eventArgs.cancel) {
                         eventArgs.fill = eventArgs.fill === '#A6A6A6' ? eventArgs.shape.fill ||
                             _this.mapObject.themeStyle.shapeFill : eventArgs.fill;
-                        eventArgs.border.color = eventArgs.border.color === '#000000' ?
+                        eventArgs.border.color = eventArgs.border.color === 'transparent' ?
                             eventArgs.shape.border.color : eventArgs.border.color;
                         eventArgs.border.width = eventArgs.border.width === 0 ? eventArgs.shape.border.width : eventArgs.border.width;
                         if (isNullOrUndefined(shapeSettings.borderColorValuePath)) {
-                            _this.mapObject.layers[layerIndex].shapeSettings.border.color = eventArgs.border.color;
+                            borderValue.color = eventArgs.border.color;
                         }
                         if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
-                            _this.mapObject.layers[layerIndex].shapeSettings.border.width = eventArgs.border.width;
+                            borderValue.width = eventArgs.border.width;
                         }
                     }
                     else {
                         eventArgs.fill = fill;
-                        eventArgs.border.color = shapeSettings.border.color;
+                        eventArgs.border.color = shapeSettings.border.color || _this.mapObject.themeStyle.shapeBorderColor;
                         eventArgs.border.width = shapeSettings.border.width;
-                        _this.mapObject.layers[layerIndex].shapeSettings.border = shapeSettings.border;
                     }
                     eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
                     if (_this.groupElements.length < 1) {
@@ -680,10 +627,12 @@ var LayerPanel = /** @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var bubbleDataSource = bubble_1.dataSource;
                 this_2.mapObject.bubbleModule.bubbleCollection = [];
-                bubbleDataSource.map(function (bubbleData, i) {
-                    _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
-                });
-                this_2.groupElements.push(bubbleG);
+                if (!isNullOrUndefined(bubbleDataSource) && bubbleDataSource.length > 0) {
+                    bubbleDataSource.map(function (bubbleData, i) {
+                        _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
+                    });
+                    this_2.groupElements.push(bubbleG);
+                }
             };
             var this_2 = this;
             for (var j = 0; j < length_1; j++) {
@@ -709,9 +658,13 @@ var LayerPanel = /** @class */ (function () {
         if (this.mapObject.navigationLineModule) {
             this.groupElements.push(this.mapObject.navigationLineModule.renderNavigation(this.currentLayer, this.currentFactor, layerIndex));
         }
-        this.groupElements.map(function (element) {
-            _this.layerObject.appendChild(element);
-        });
+        if (!isNullOrUndefined(this.groupElements) && !isNullOrUndefined(this.layerObject)) {
+            this.groupElements.map(function (element) {
+                if (!isNullOrUndefined(element)) {
+                    _this.layerObject.appendChild(element);
+                }
+            });
+        }
         if (this.mapObject.markerModule) {
             this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) :
                 this.currentFactor), null);
@@ -802,7 +755,7 @@ var LayerPanel = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var index = checkShapeDataFields(layer.dataSource, shape, layer.shapeDataPath, layer.shapePropertyPath, layer);
         var colorMapping = new ColorMapping(this.mapObject);
-        if (isNullOrUndefined(layer.dataSource[index])) {
+        if (isNullOrUndefined(layer.dataSource) || isNullOrUndefined(layer.dataSource[index])) {
             return color;
         }
         return colorMapping.getShapeColorMapping(layer.shapeSettings, layer.dataSource[index], color);
@@ -1183,9 +1136,8 @@ var LayerPanel = /** @class */ (function () {
                         var tile = new Tile(tileI % ycount, j);
                         tile.left = Math.round(x);
                         tile.top = Math.round(y);
-                        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);
+                        if ((bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
+                            tile.src = bing.getBingMap(tile, '', '', userLang, bing.imageUrl, bing.subDomains);
                         }
                         else {
                             tile.src = this.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', tile.x.toString())
@@ -1212,14 +1164,13 @@ var LayerPanel = /** @class */ (function () {
             if (!(layer.type === 'SubLayer' && layer.visible)) {
                 continue;
             }
-            if ((layer.layerType !== 'Geometry' && layer.layerType !== 'GoogleStaticMap') || (layer.layerType === 'Geometry' &&
-                isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
+            if (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') {
+                    if (layer.urlTemplate.indexOf('quadkey')) {
                         bing = new BingMap(this.mapObject);
-                        subtile.src = bing.getBingMap(subtile, layer.key, layer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
+                        subtile.src = bing.getBingMap(subtile, '', '', userLang, bing.imageUrl, bing.subDomains);
                     }
                     else {
                         subtile.src = layer.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', baseTile.x.toString())
@@ -1247,111 +1198,106 @@ var LayerPanel = /** @class */ (function () {
         else {
             timeOut = 0;
         }
-        if (this.mapObject.layers[this.mapObject.baseLayerIndex].layerType === 'GoogleStaticMap') {
-            this.renderGoogleMap(this.mapObject.layers[0].key, this.mapObject.staticMapZoom);
-        }
-        else {
-            setTimeout(function () {
-                if (element) {
-                    element.style.zIndex = '1';
-                }
-                if (element1) {
-                    element1.style.zIndex = '0';
-                }
-                var animateElement;
-                if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
+        setTimeout(function () {
+            if (element) {
+                element.style.zIndex = '1';
+            }
+            if (element1) {
+                element1.style.zIndex = '0';
+            }
+            var animateElement;
+            if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
+                animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
+                element.appendChild(animateElement);
+            }
+            else {
+                if (type !== 'Pan' && element1 && element) {
+                    element1.appendChild(element.children[0]);
+                    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';
+                    }
                     animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
                     element.appendChild(animateElement);
                 }
                 else {
-                    if (type !== 'Pan' && element1 && element) {
-                        element1.appendChild(element.children[0]);
-                        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';
-                        }
-                        animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
-                        element.appendChild(animateElement);
+                    animateElement = element ? element.children[0] : null;
+                }
+            }
+            for (var id = 0; id < _this.tiles.length; id++) {
+                var tile = _this.tiles[id];
+                var imgElement = null;
+                var mapId = _this.mapObject.element.id;
+                if (type === 'Pan') {
+                    var child = document.getElementById(mapId + '_tile_' + id);
+                    var isNewTile = false;
+                    if (isNullOrUndefined(child)) {
+                        isNewTile = true;
+                        child = createElement('div', { id: mapId + '_tile_' + id });
+                        imgElement = createElement('img');
                     }
                     else {
-                        animateElement = element ? element.children[0] : null;
+                        child.style.removeProperty('display');
+                        imgElement = child.children[0];
                     }
-                }
-                for (var id = 0; id < _this.tiles.length; id++) {
-                    var tile = _this.tiles[id];
-                    var imgElement = null;
-                    var mapId = _this.mapObject.element.id;
-                    if (type === 'Pan') {
-                        var child = document.getElementById(mapId + '_tile_' + id);
-                        var isNewTile = false;
-                        if (isNullOrUndefined(child)) {
-                            isNewTile = true;
-                            child = createElement('div', { id: mapId + '_tile_' + id });
-                            imgElement = createElement('img');
-                        }
-                        else {
-                            child.style.removeProperty('display');
-                            imgElement = child.children[0];
-                        }
-                        if (!isNewTile && imgElement && imgElement.src !== tile.src) {
-                            imgElement.src = tile.src;
-                        }
-                        child.style.position = 'absolute';
-                        child.style.left = tile.left + 'px';
-                        child.style.top = tile.top + 'px';
-                        child.style.height = tile.height + 'px';
-                        child.style.width = tile.width + 'px';
-                        if (isNewTile) {
-                            imgElement.setAttribute('height', '256px');
-                            imgElement.setAttribute('width', '256px');
-                            imgElement.setAttribute('src', tile.src);
-                            imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
-                            imgElement.style.setProperty('user-select', 'none');
-                            child.appendChild(imgElement);
-                            animateElement.appendChild(child);
-                        }
+                    if (!isNewTile && imgElement && imgElement.src !== tile.src) {
+                        imgElement.src = tile.src;
                     }
-                    else {
-                        imgElement = createElement('img');
+                    child.style.position = 'absolute';
+                    child.style.left = tile.left + 'px';
+                    child.style.top = tile.top + 'px';
+                    child.style.height = tile.height + 'px';
+                    child.style.width = tile.width + 'px';
+                    if (isNewTile) {
                         imgElement.setAttribute('height', '256px');
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
-                        imgElement.style.setProperty('user-select', 'none');
                         imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
-                        var child = createElement('div', { id: mapId + '_tile_' + id });
-                        child.style.position = 'absolute';
-                        child.style.left = tile.left + 'px';
-                        child.style.top = tile.top + 'px';
-                        child.style.height = tile.height + 'px';
-                        child.style.width = tile.width + 'px';
+                        imgElement.style.setProperty('user-select', 'none');
                         child.appendChild(imgElement);
-                        if (animateElement) {
-                            animateElement.appendChild(child);
-                        }
+                        animateElement.appendChild(child);
                     }
-                    if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
-                        removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                }
+                else {
+                    imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
+                    imgElement.setAttribute('src', tile.src);
+                    imgElement.style.setProperty('user-select', 'none');
+                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
+                    var child = createElement('div', { id: mapId + '_tile_' + id });
+                    child.style.position = 'absolute';
+                    child.style.left = tile.left + 'px';
+                    child.style.top = tile.top + 'px';
+                    child.style.height = tile.height + 'px';
+                    child.style.width = tile.width + 'px';
+                    child.appendChild(imgElement);
+                    if (animateElement) {
+                        animateElement.appendChild(child);
                     }
                 }
-                if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
-                    for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
-                        var isExistingElement = false;
-                        for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
-                            if (!isExistingElement &&
-                                _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
-                                isExistingElement = true;
-                            }
-                        }
-                        if (isExistingElement) {
-                            animateElement.children[l].style.display = 'none';
-                        }
-                        else {
-                            animateElement.removeChild(animateElement.children[l]);
+                if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
+                    removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                }
+            }
+            if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
+                for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
+                    var isExistingElement = false;
+                    for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
+                        if (!isExistingElement &&
+                            _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
+                            isExistingElement = true;
                         }
                     }
+                    if (isExistingElement) {
+                        animateElement.children[l].style.display = 'none';
+                    }
+                    else {
+                        animateElement.removeChild(animateElement.children[l]);
+                    }
                 }
-            }, timeOut);
-        }
+            }
+        }, timeOut);
     };
     /**
      * Animation for tile layers and hide the group element until the tile layer rendering.
@@ -1426,7 +1372,7 @@ var LayerPanel = /** @class */ (function () {
         var eleWidth = mapWidth > 640 ? (mapWidth - 640) / 2 : 0;
         var eleHeight = mapHeight > 640 ? (mapHeight - 640) / 2 : 0;
         var center;
-        var mapType = (map.layers[map.layers.length - 1].staticMapType).toString().toLowerCase();
+        var mapType = 'roadmap';
         if (map.centerPosition.latitude && map.centerPosition.longitude) {
             center = map.centerPosition.latitude.toString() + ',' + map.centerPosition.longitude.toString();
         }
@@ -1452,8 +1398,7 @@ var LayerPanel = /** @class */ (function () {
             this.mapObject.tileZoomLevel = this.mapObject.tileZoomScale;
         }
         var level = this.mapObject.tileZoomLevel;
-        var padding = this.mapObject.layers[this.mapObject.layers.length - 1].layerType !== 'GoogleStaticMap' ?
-            20 : 0;
+        var padding = 20;
         var x;
         var y;
         var totalSize = Math.pow(2, level) * 256;