@syncfusion/ej2-maps 25.2.4 → 26.1.35

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import { isNullOrUndefined, extend, createElement, Fetch, animationMode } from '@syncfusion/ej2-base';
 import { getShapeColor } from '../model/theme';
-import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement } from '../utils/helper';
+import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement, maintainToggleSelection } from '../utils/helper';
 import { getElementByID, maintainSelection, getValueFromObject } from '../utils/helper';
 import { RectOption, getTranslate, convertTileLatLongToPoint, checkShapeDataFields, CircleOption } from '../utils/helper';
 import { getZoomTranslate, fixInitialScaleForTile } from '../utils/helper';
@@ -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) {
@@ -643,18 +590,9 @@ var LayerPanel = /** @class */ (function () {
             pathEle.style.cssText = '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', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
-                }
-            }
+        if (this.mapObject.legendSettings.toggleLegendSettings.enable && this.mapObject.legendSettings.type === 'Layers') {
+            maintainToggleSelection(this.mapObject.toggledElementId, pathEle, this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ? this.currentLayer.shapeSettings
+                : this.mapObject.legendSettings.toggleLegendSettings);
         }
         groupElement.appendChild(pathEle);
     };
@@ -689,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++) {
@@ -718,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);
@@ -729,7 +673,7 @@ var LayerPanel = /** @class */ (function () {
         this.layerGroup.appendChild(this.layerObject);
     };
     /**
-     * render datalabel
+     * render datalabel.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
@@ -746,7 +690,7 @@ var LayerPanel = /** @class */ (function () {
         this.mapObject.dataLabelModule.renderLabel(layer, layerIndex, shape, layer.layerData, group, labelTemplateEle, shapeIndex, intersect);
     };
     /**
-     * To render path for multipolygon
+     * To render path for multipolygon.
      *
      * @param {any[]} currentShapeData Specifies the current shape data
      * @returns {string} Returns the path
@@ -768,7 +712,7 @@ var LayerPanel = /** @class */ (function () {
         return path;
     };
     /**
-     * To render bubble
+     * To render bubble.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {object} bubbleData - Specifies the bubble data
@@ -795,7 +739,7 @@ var LayerPanel = /** @class */ (function () {
         this.mapObject.bubbleModule.renderBubble(bubbleSettings, bubbleData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, this.mapObject.bubbleModule.id);
     };
     /**
-     * To get the shape color from color mapping module
+     * To get the shape color from color mapping module.
      *
      * @param {LayerSettingsModel} layer - Specifies the layer
      * @param {any} shape - Specifies the shape
@@ -811,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);
@@ -1192,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())
@@ -1221,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())
@@ -1256,114 +1198,109 @@ 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
+     * Animation for tile layers and hide the group element until the tile layer rendering.
      *
      * @param {string} zoomType - Specifies the zoom type
      * @param {number} translateX - Specifies the x translate point
@@ -1392,7 +1329,7 @@ var LayerPanel = /** @class */ (function () {
         }
     };
     /**
-     * Static map rendering
+     * Static map rendering.
      *
      * @param {string} apikey - Specifies the api key
      * @param {number} zoom - Specifies the zoom value
@@ -1435,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();
         }
@@ -1449,7 +1386,7 @@ var LayerPanel = /** @class */ (function () {
                 + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
     };
     /**
-     * To find the tile translate point
+     * To find the tile translate point.
      *
      * @param {number} factorX - Specifies the x factor
      * @param {number} factorY - Specifies the x factor
@@ -1461,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;

package/src/maps/layers/legend.d.ts

@@ -42,6 +42,7 @@ export declare class Legend {
     private heightIncrement;
     private widthIncrement;
     private textMaxWidth;
+    private arrowTimer;
     /**
      * @private
      */
@@ -110,6 +111,14 @@ export declare class Legend {
      * @private
      */
     drawLegendItem(page: number): void;
+    /**
+     * @param {number} legendIndex - Specifies the legend index.
+     * @param {Element} legendShapeElement - Specifies the legend shape element.
+     * @param {Element} legendTextElement - Specifies the legend text element.
+     * @returns {void}
+     * @private
+     */
+    maintainLegendToggle(legendIndex: number, legendShapeElement: Element, legendTextElement: Element): void;
     legendHighLightAndSelection(targetElement: Element, value: string): void;
     private setColor;
     pushCollection(targetElement: Element, collection: any[], oldElement: object, shapeSettings: ShapeSettings): void;