@syncfusion/ej2-maps 19.4.53 → 19.4.56-105067

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

@@ -56,8 +56,7 @@ var LayerPanel = /** @class */ (function () {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !isNullOrUndefined(this.mapObject.legendModule) &&
-                    this.mapObject.legendModule.totalPages.length > 0 ? this.mapObject.legendModule.legendTotalRect.height : areaRect.height
+                width: areaRect.width, height: areaRect.height
             }));
         }
         this.layerGroup.appendChild(this.clipRectElement);
@@ -68,6 +67,14 @@ var LayerPanel = /** @class */ (function () {
             _this.currentLayer = layer;
             _this.processLayers(layer, index);
         });
+        if (!isNullOrUndefined(this.mapObject.legendModule) && this.mapObject.legendSettings.position === 'Float') {
+            if (this.mapObject.isTileMap) {
+                this.layerGroup.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+            else {
+                this.mapObject.svgObject.appendChild(this.mapObject.legendModule.legendGroup);
+            }
+        }
     };
     /**
      * Tile rendering
@@ -195,7 +202,7 @@ var LayerPanel = /** @class */ (function () {
             panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
         }
         if (panel.mapObject.markerModule) {
-            panel.mapObject.markerModule.markerRender(panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
+            panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
         }
         panel.translateLayerElements(panel.layerObject, layerIndex);
         panel.layerGroup.appendChild(panel.layerObject);
@@ -227,9 +234,21 @@ var LayerPanel = /** @class */ (function () {
         };
         this.mapObject.trigger('layerRendering', eventArgs, function (observedArgs) {
             if (!eventArgs.cancel && eventArgs.visible) {
-                if (layer.layerType !== 'Geometry') {
+                if (layer.layerType === 'OSM') {
+                    layer.urlTemplate = 'https://a.tile.openstreetmap.org/level/tileX/tileY.png';
+                }
+                if (layer.layerType === 'Google') {
+                    layer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
+                }
+                if (layer.layerType !== 'Geometry' || (isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                     if (layer.layerType !== 'Bing' || _this.bing) {
-                        _this.renderTileLayer(_this, layer, layerIndex);
+                        if (!isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
+                            var bing = new BingMap(_this.mapObject);
+                            _this.bingMapCalculation(layer, layerIndex, _this, bing);
+                        }
+                        else {
+                            _this.renderTileLayer(_this, layer, layerIndex);
+                        }
                     }
                     else if (layer.key && layer.key.length > 1) {
                         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -262,7 +281,7 @@ var LayerPanel = /** @class */ (function () {
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _this.mapObject.arrangeTemplate();
                             if (_this.mapObject.zoomModule && (_this.mapObject.previousScale !== _this.mapObject.scale)) {
-                                _this.mapObject.zoomModule.applyTransform(true);
+                                _this.mapObject.zoomModule.applyTransform(_this.mapObject, true);
                             }
                         };
                         ajax.send();
@@ -298,6 +317,17 @@ var LayerPanel = /** @class */ (function () {
             this.mapObject.baseMapBounds = null;
         }
     };
+    LayerPanel.prototype.bingMapCalculation = function (layer, layerIndex, proxy, bing) {
+        bing.imageUrl = layer.urlTemplate;
+        bing.subDomains = ['t0', 't1', 't2', 't3'];
+        bing.maxZoom = '21';
+        proxy.mapObject['bingMap'] = bing;
+        proxy.renderTileLayer(proxy, layer, layerIndex, bing);
+        this.mapObject.arrangeTemplate();
+        if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
+            this.mapObject.zoomModule.applyTransform(this.mapObject, true);
+        }
+    };
     LayerPanel.prototype.bubbleCalculation = function (bubbleSettings, range) {
         if (bubbleSettings.dataSource != null && bubbleSettings != null) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -493,60 +523,66 @@ var LayerPanel = /** @class */ (function () {
                             }
                             break;
                         case 'LineString':
-                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            currentShapeData.map(function (lineData) {
-                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                            currentShapeData.map(function (lineData, index) {
+                                if (index === 0) {
+                                    path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                }
+                                else {
+                                    path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                }
+                            });
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = _this.mapObject.renderer.drawPath(pathOptions);
+                            }
+                            break;
+                        case 'MultiLineString':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map(function (multilineData) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                multilineData.map(function (lineData, index) {
+                                    if (index === 0) {
+                                        path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
+                                    }
+                                    else {
+                                        path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
+                                    }
+                                });
                             });
                             if (path.length > 3) {
-                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
+                                    eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                 pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                             }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var pointData = currentShapeData['point'];
-                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / _this.currentFactor;
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
+                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                             break;
+                        case 'MultiPoint':
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            currentShapeData.map(function (multiPointData, index) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                var pointData = multiPointData['point'];
+                                var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
+                                circleOptions = new CircleOption((shapeID + "_multiLine_" + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
+                                pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
+                                _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
+                            });
+                            break;
                         case 'Path':
                             path = currentShapeData['point'];
                             pathOptions = new PathOption(shapeID, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                             pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                             break;
                     }
-                    if (!isNullOrUndefined(pathEle)) {
-                        var property = (Object.prototype.toString.call(_this.currentLayer.shapePropertyPath) === '[object Array]' ?
-                            _this.currentLayer.shapePropertyPath : [_this.currentLayer.shapePropertyPath]);
-                        var properties = void 0;
-                        for (var j = 0; j < property.length; j++) {
-                            if (!isNullOrUndefined(currentShapeData['property'])) {
-                                properties = property[j];
-                                break;
-                            }
-                        }
-                        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
-                            (currentShapeData['property'][properties]) : ''));
-                        pathEle.setAttribute('tabindex', (_this.mapObject.tabIndex + i + 3).toString());
-                        if (drawingType === 'LineString') {
-                            pathEle.setAttribute('style', 'outline:none');
-                        }
-                        maintainSelection(_this.mapObject.selectedElementId, _this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-                        if (_this.mapObject.toggledShapeElementId) {
-                            for (var j = 0; j < _this.mapObject.toggledShapeElementId.length; j++) {
-                                var styleProperty = _this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
-                                    _this.currentLayer.shapeSettings : _this.mapObject.legendSettings.toggleLegendSettings;
-                                if (_this.mapObject.toggledShapeElementId[j] === pathEle.id) {
-                                    pathEle.setAttribute('fill', styleProperty.fill);
-                                    pathEle.setAttribute('stroke', styleProperty.border.color);
-                                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
-                                }
-                            }
-                        }
-                        groupElement.appendChild(pathEle);
+                    if (!isNullOrUndefined(pathEle) && drawingType !== 'MultiPoint') {
+                        _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
                     }
                     if (i === _this.currentLayer.layerData.length - 1) {
                         _this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
@@ -564,6 +600,50 @@ var LayerPanel = /** @class */ (function () {
             this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
         }
     };
+    /**
+     * layer features as bubble, marker, datalabel, navigation line.
+     *
+     * @param {groupElement} Element - Specifies the element to append the group
+     * @param {pathEle} Element - Specifies the svg element
+     * @param {drawingType} string - Specifies the data type
+     * @param {currentShapeData} any - Specifies the layer of shapedata.
+     * @param {index} number - Specifies the tab index.
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, currentShapeData, index) {
+        var property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
+            this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
+        var properties;
+        for (var j = 0; j < property.length; j++) {
+            if (!isNullOrUndefined(currentShapeData['property'])) {
+                properties = property[j];
+                break;
+            }
+        }
+        pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
+            (currentShapeData['property'][properties]) : ''));
+        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        pathEle.setAttribute('role', '');
+        if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
+            pathEle.setAttribute('style', 'outline:none');
+        }
+        maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
+        if (this.mapObject.toggledShapeElementId) {
+            for (var j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
+                var styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
+                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
+                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
+                    pathEle.setAttribute('fill', styleProperty.fill);
+                    pathEle.setAttribute('stroke', styleProperty.border.color);
+                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
+                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
+                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
+                }
+            }
+        }
+        groupElement.appendChild(pathEle);
+    };
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
@@ -624,7 +704,7 @@ var LayerPanel = /** @class */ (function () {
             _this.layerObject.appendChild(element);
         });
         if (this.mapObject.markerModule) {
-            this.mapObject.markerModule.markerRender(this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
+            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
                 : this.currentFactor), null);
         }
         this.translateLayerElements(this.layerObject, layerIndex);
@@ -751,7 +831,8 @@ var LayerPanel = /** @class */ (function () {
                 break;
             case 'linestring':
                 var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1;
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     latitude = points[1];
@@ -766,31 +847,61 @@ var LayerPanel = /** @class */ (function () {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            case 'point': {
-                var arrayCollections_1 = false;
-                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
-                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
+            case 'multilinestring':
+                var extraSpaces_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                var multiLineData_1 = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map(function (points, index) {
-                    if (Object.prototype.toString.call(points) === '[object Array]') {
+                coordinates.map(function (multiPoints) {
+                    newData = [];
+                    multiPoints.map(function (points) {
                         latitude = points[1];
                         longitude = points[0];
-                        arrayCollections_1 = true;
                         var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
-                        _this.currentLayer.layerData.push({
-                            point: point, type: type, lat: latitude, lng: longitude, property: properties
+                        _this.calculateBox(point, extraSpaces_1);
+                        newData.push({
+                            point: point, lat: latitude, lng: longitude
                         });
-                    }
+                    });
+                    multiLineData_1.push(newData);
                 });
-                if (!arrayCollections_1) {
-                    latitude = coordinates[1];
-                    longitude = coordinates[0];
-                    var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                    this.calculateBox(point, extraSpace_2);
-                    this.currentLayer.layerData.push({
-                        point: point, type: type, lat: latitude, lng: longitude, property: properties
+                multiLineData_1['property'] = properties;
+                multiLineData_1['type'] = type;
+                this.currentLayer.layerData.push(multiLineData_1);
+                break;
+            case 'point':
+                var pointExtraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                latitude = coordinates[1];
+                longitude = coordinates[0];
+                var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                this.calculateBox(point, pointExtraSpace);
+                this.currentLayer.layerData.push({
+                    point: point, type: type, lat: latitude, lng: longitude, property: properties
+                });
+                break;
+            case 'multipoint': {
+                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
+                        parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
+                    (this.currentLayer.shapeSettings.circleRadius * 2);
+                newData = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                coordinates.map(function (points) {
+                    latitude = points[1];
+                    longitude = points[0];
+                    var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
+                    _this.calculateBox(point, extraSpace_2);
+                    newData.push({
+                        point: point, lat: latitude, lng: longitude
                     });
-                }
+                });
+                newData['property'] = properties;
+                newData['type'] = type;
+                this.currentLayer.layerData.push(newData);
                 break;
             }
             case 'path':
@@ -802,12 +913,12 @@ var LayerPanel = /** @class */ (function () {
     };
     LayerPanel.prototype.calculateBox = function (point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
         }
         else {
-            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
             this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
-            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x + extraSpace);
             this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
         }
     };
@@ -825,6 +936,10 @@ var LayerPanel = /** @class */ (function () {
             var end = convertGeoToPoint(bounds.latitude.max, bounds.longitude.max, null, layer, this.mapObject);
             mapHeight = end.y - start.y;
             mapWidth = end.x - start.x;
+            if (mapHeight === 0 || mapWidth === 0) {
+                mapWidth = mapSize.width / 2;
+                mapHeight = mapSize.height;
+            }
         }
         else {
             mapHeight = mapWidth = 500;
@@ -919,15 +1034,28 @@ var LayerPanel = /** @class */ (function () {
                             _this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'multilinestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map(function (multiPoint, index) {
+                            multiPoint.map(function (point, index) {
+                                _this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
+                            });
+                        });
+                        break;
                     case 'linestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (point, index) {
-                            _this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                            _this.calculateRectBox(point, 'linestring', index === 0 ? true : false);
                         });
                         break;
                     case 'point':
                         _this.calculateRectBox(coordinates, 'point');
                         break;
+                    case 'multipoint':
+                        coordinates.map(function (point, index) {
+                            _this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
+                        });
+                        break;
                 }
             }
         });
@@ -966,7 +1094,7 @@ var LayerPanel = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
         var _this = this;
-        if (type !== 'LineString' && type !== 'point') {
+        if ((type !== 'linestring' && type !== 'multilinestring') && (type !== 'point' && type !== 'multipoint')) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(coordinates, function (currentCoords) {
                 if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
@@ -1035,7 +1163,7 @@ var LayerPanel = /** @class */ (function () {
                         var tile = new Tile(tileI % ycount, j);
                         tile.left = x;
                         tile.top = y;
-                        if (baseLayer.layerType === 'Bing') {
+                        if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             var key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                         }
@@ -1064,11 +1192,13 @@ var LayerPanel = /** @class */ (function () {
             if (!(layer.type === 'SubLayer' && layer.visible)) {
                 continue;
             }
-            if (layer.layerType === 'OSM' || layer.layerType === 'Bing') {
+            if ((layer.layerType !== 'Geometry' && layer.layerType !== 'GoogleStaticMap') || (layer.layerType === 'Geometry' &&
+                isNullOrUndefined(layer.shapeData) && !isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                 for (var _b = 0, proxTiles_1 = proxTiles; _b < proxTiles_1.length; _b++) {
                     var baseTile = proxTiles_1[_b];
                     var subtile = extend({}, baseTile, {}, true);
                     if (layer.layerType === 'Bing') {
+                        bing = new BingMap(this.mapObject);
                         subtile.src = bing.getBingMap(subtile, layer.key, layer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
                     }
                     else {
@@ -1114,7 +1244,7 @@ var LayerPanel = /** @class */ (function () {
                 else {
                     if (type !== 'Pan' && element1 && element) {
                         element1.appendChild(element.children[0]);
-                        if (!isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
+                        if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
                             document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
                                 _this.mapObject.element.id + '_animated_tiles_old';
                         }
@@ -1128,7 +1258,10 @@ var LayerPanel = /** @class */ (function () {
                 var id = 0;
                 var _loop_3 = function (tile) {
                     var imgElement = createElement('img');
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                     var mapId = _this.mapObject.element.id;
                     imgElement.onload = function () {
                         if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
@@ -1240,7 +1373,7 @@ var LayerPanel = /** @class */ (function () {
             '&zoom=' + zoom + '&center=' + center + '&maptype=' + mapType + '&key=' + apikey;
         document.getElementById(this.mapObject.element.id + '_tile_parent').innerHTML
             = '<div id="' + this.mapObject.element.id + '_StaticGoogleMap"' + 'style="position:absolute; left:' + eleWidth + 'px; top:'
-                + eleHeight + 'px"><img src="' + staticMapString + '"></div>';
+                + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
     };
     /**
      * To find the tile translate point
@@ -1298,6 +1431,27 @@ var LayerPanel = /** @class */ (function () {
         this.mapObject.previousTileHeight = factorY;
         return new Point(x, y);
     };
+    /**
+     * @returns {void}
+     * @private
+     */
+    LayerPanel.prototype.destroy = function () {
+        this.mapObject = null;
+        this.groupElements = [];
+        this.layerObject = null;
+        this.currentLayer = null;
+        this.rectBounds = null;
+        this.tiles = [];
+        this.clipRectElement = null;
+        this.tileSvgObject = null;
+        this.ajaxModule = null;
+        this.ajaxResponse = [];
+        this.layerGroup = null;
+        if (!isNullOrUndefined(this.bing)) {
+            this.bing.destroy();
+        }
+        this.bing = null;
+    };
     return LayerPanel;
 }());
 export { LayerPanel };

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

@@ -20,6 +20,10 @@ export declare class Legend {
      * @private
      */
     legendBorderRect: Rect;
+    /**
+     * @private
+     */
+    initialMapAreaRect: Rect;
     /**
      * @private
      */
@@ -149,9 +153,8 @@ export declare class Legend {
     /**
      * To destroy the legend.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }