@syncfusion/ej2-maps 25.2.5 → 26.1.41

package/src/maps/layers/legend.js

@@ -633,7 +633,9 @@ var Legend = /** @class */ (function () {
             }
             else {
                 var layerIndex = currentItem[currentItem.length - 1].layerIndex;
-                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, this.maps.layers[layerIndex].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
+                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, 
+                /* eslint-disable-next-line max-len */
+                this.maps.layers[layerIndex].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
                     ? 0 : this.maps.layers[layerIndex].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.opacity)
                     ? this.maps.layers[layerIndex].shapeSettings.opacity
                     : this.maps.layers[layerIndex].shapeSettings.border.opacity, this.maps.layers[layerIndex].shapeSettings.fill);
@@ -832,7 +834,7 @@ var Legend = /** @class */ (function () {
         collection.push({
             legendElement: targetElement, legendOldFill: oldElement['fill'], legendOldOpacity: oldElement['opacity'],
             legendOldBorderColor: oldElement['borderColor'], legendOldBorderWidth: oldElement['borderWidth'],
-            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color,
+            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
             shapeOldBorderWidth: shapeSettings.border.width
         });
         var length = collection.length;
@@ -1309,7 +1311,8 @@ var Legend = /** @class */ (function () {
         this.legendBorderRect = new Rect((this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
             (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
         var legendBorder = {
-            color: legend.border.color, width: legend.border.width, opacity: legend.border.opacity
+            color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
+            width: legend.border.width || this.maps.themeStyle.legendBorderWidth
         };
         legendBorder.opacity = isNullOrUndefined(legendBorder.opacity) ? 1 : legendBorder.opacity;
         var renderOptions = new RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
@@ -1496,15 +1499,17 @@ var Legend = /** @class */ (function () {
                 legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
                 rangeData = [];
                 var colorMapProcess_1 = false;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
-                    var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
-                        parseFloat(data[colorValuePath]);
-                    if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
-                        colorMapProcess_1 = true;
-                        rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
-                    }
-                });
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
+                        var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
+                            parseFloat(data[colorValuePath]);
+                        if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
+                            colorMapProcess_1 = true;
+                            rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
+                        }
+                    });
+                }
                 if (!colorMapProcess_1) {
                     rangeData.push({
                         layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
@@ -1592,23 +1597,25 @@ var Legend = /** @class */ (function () {
                 legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value;
                 equalData = [];
                 var eqaulColorProcess_1 = false;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
-                    var equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
-                        (data[colorValuePath]));
-                    if (equalValue === colorMap.value) {
-                        eqaulColorProcess_1 = true;
-                        if (equalValues.indexOf(equalValue) === -1) {
-                            equalValues.push(equalValue);
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
+                        var equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                            (data[colorValuePath]));
+                        if (equalValue === colorMap.value) {
+                            eqaulColorProcess_1 = true;
+                            if (equalValues.indexOf(equalValue) === -1) {
+                                equalValues.push(equalValue);
+                            }
+                            equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
                         }
-                        equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
-                    }
-                    else {
-                        if (outOfRangeValues.indexOf(equalValue) === -1) {
-                            outOfRangeValues.push(equalValue);
+                        else {
+                            if (outOfRangeValues.indexOf(equalValue) === -1) {
+                                outOfRangeValues.push(equalValue);
+                            }
                         }
-                    }
-                });
+                    });
+                }
                 for (var x = 0; x < equalValues.length; x++) {
                     for (var y = 0; y < outOfRangeValues.length; y++) {
                         if (equalValues[x] === outOfRangeValues[y]) {
@@ -1875,7 +1882,7 @@ var Legend = /** @class */ (function () {
                             if (isVisible && mapElement !== null) {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                    mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                    mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                     mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
@@ -1905,7 +1912,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0 : this.maps.layers[k].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
                                         isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
@@ -1962,7 +1971,7 @@ var Legend = /** @class */ (function () {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
                                     layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
-                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
+                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                     layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                         this.maps.layers[j].shapeSettings.opacity :
@@ -1982,7 +1991,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
                                             ? 0 : this.maps.layers[j].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
                                         isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity)
@@ -2004,7 +2015,7 @@ var Legend = /** @class */ (function () {
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
                                 layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                 layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
-                                layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
+                                layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
@@ -2054,7 +2065,7 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
-                                    LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                    LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
@@ -2075,7 +2086,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, 
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, 
                                         /* eslint-disable-next-line max-len */
                                         (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0
@@ -2136,7 +2149,7 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
-                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
+                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                     mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
@@ -2157,7 +2170,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0
                                             : this.maps.layers[k].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
@@ -2177,7 +2192,7 @@ var Legend = /** @class */ (function () {
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                 mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :
                                     this.maps.layers[k].shapeSettings.border.width).toString());
-                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
+                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                     this.maps.layers[k].shapeSettings.opacity :
                                     this.maps.layers[k].shapeSettings.border.opacity).toString());

package/src/maps/layers/marker.js

@@ -55,83 +55,85 @@ var Marker = /** @class */ (function () {
         Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
-                var eventArgs = {
-                    cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
-                    width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
-                    template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
-                    border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
-                    shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
-                };
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
-                    eventArgs = markerColorChoose(eventArgs, data);
-                    eventArgs = markerShapeChoose(eventArgs, data);
-                    var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                    var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                    var offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                            + markerIndex + '_dataIndex_' + dataIndex;
-                        var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        if (maps.isTileMap) {
-                            translatePoint = (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object();
-                        }
-                        var scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
-                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['location'];
-                        if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
-                        }
-                        else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, maps, _this.markerSVGObject);
-                        }
-                    }
-                    nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
-                    markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
-                    markerCount += (eventArgs.cancel) ? 1 : 0;
-                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
-                        maps.markerNullCount + 1 : maps.markerNullCount;
-                    var markerDataLength = markerData.length - maps.markerNullCount;
-                    var isMarkersClustered = false;
-                    if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
-                        layerElement.appendChild(_this.markerSVGObject);
-                        if (currentLayer.markerClusterSettings.allowClustering) {
-                            maps.svgObject.appendChild(_this.markerSVGObject);
-                            maps.element.appendChild(maps.svgObject);
-                            if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
-                                && maps.zoomSettings.enable) {
-                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
-                                layerElement.appendChild(_this.markerSVGObject);
+            if (!isNullOrUndefined(markerSettings.dataSource)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                    maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
+                    var eventArgs = {
+                        cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
+                        width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
+                        template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
+                        border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
+                        shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
+                    };
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
+                        eventArgs = markerColorChoose(eventArgs, data);
+                        eventArgs = markerShapeChoose(eventArgs, data);
+                        var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                            parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                        var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                            parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                        var offset = markerSettings.offset;
+                        if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
+                            var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                + markerIndex + '_dataIndex_' + dataIndex;
+                            var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                            if (maps.isTileMap) {
+                                translatePoint = (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object();
                             }
-                            else {
-                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                            var scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
+                            var transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['location'];
+                            if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerTemplateCount++;
+                                markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                maps.renderReactTemplates();
+                            }
+                            else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerCount++;
+                                marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, maps, _this.markerSVGObject);
                             }
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
                         }
-                    }
-                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
-                        getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
-                        if (maps.checkInitialRender) {
-                            if (currentLayer.markerClusterSettings.allowClustering && !isMarkersClustered) {
-                                clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
+                        nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
+                        markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
+                        markerCount += (eventArgs.cancel) ? 1 : 0;
+                        maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
+                            maps.markerNullCount + 1 : maps.markerNullCount;
+                        var markerDataLength = markerData.length - maps.markerNullCount;
+                        var isMarkersClustered = false;
+                        if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
+                            layerElement.appendChild(_this.markerSVGObject);
+                            if (currentLayer.markerClusterSettings.allowClustering) {
+                                maps.svgObject.appendChild(_this.markerSVGObject);
+                                maps.element.appendChild(maps.svgObject);
+                                if ((currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData))
+                                    && maps.zoomSettings.enable) {
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                    layerElement.appendChild(_this.markerSVGObject);
+                                }
+                                else {
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                }
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                         }
-                    }
+                        if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
+                            getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                            if (maps.checkInitialRender) {
+                                if (currentLayer.markerClusterSettings.allowClustering && !isMarkersClustered) {
+                                    clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    maps.renderReactTemplates();
+                                }
+                            }
+                        }
+                    });
                 });
-            });
+            }
         });
     };
     /**
@@ -188,35 +190,37 @@ var Marker = /** @class */ (function () {
                         Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting) {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var markerData = markerSetting.dataSource;
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                                var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                                var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                                if (!isNullOrUndefined(latitude) && !isNullOrUndefined(longitude)) {
-                                    minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
-                                        longitude : minLong_1;
-                                    maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
-                                        latitude : maxLat_1;
-                                    minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
-                                        latitude : minLat_1;
-                                    maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
-                                        longitude : maxLong_1;
-                                    if (minLong_1 > longitude) {
-                                        minLong_1 = longitude;
-                                    }
-                                    if (minLat_1 > latitude) {
-                                        minLat_1 = latitude;
-                                    }
-                                    if (maxLong_1 < longitude) {
-                                        maxLong_1 = longitude;
-                                    }
-                                    if (maxLat_1 < latitude) {
-                                        maxLat_1 = latitude;
+                            if (!isNullOrUndefined(markerData) && markerData.length > 0) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                                    var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                        !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                    var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                        !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                    if (!isNullOrUndefined(latitude) && !isNullOrUndefined(longitude)) {
+                                        minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
+                                            longitude : minLong_1;
+                                        maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
+                                            latitude : maxLat_1;
+                                        minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
+                                            latitude : minLat_1;
+                                        maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
+                                            longitude : maxLong_1;
+                                        if (minLong_1 > longitude) {
+                                            minLong_1 = longitude;
+                                        }
+                                        if (minLat_1 > latitude) {
+                                            minLat_1 = latitude;
+                                        }
+                                        if (maxLong_1 < longitude) {
+                                            maxLong_1 = longitude;
+                                        }
+                                        if (maxLat_1 < latitude) {
+                                            maxLat_1 = latitude;
+                                        }
                                     }
-                                }
-                            });
+                                });
+                            }
                         });
                     }
                 });

package/src/maps/layers/navigation-selected-line.js

@@ -61,7 +61,7 @@ var NavigationLine = /** @class */ (function () {
                 dashArray = navigation[i].dashArray;
                 arrowSettings = navigation[i].arrowSettings;
                 showArrow = !isNullOrUndefined(arrowSettings) ? arrowSettings.showArrow : false;
-                if (longitude.length === latitude.length && visible) {
+                if (!isNullOrUndefined(longitude) && !isNullOrUndefined(latitude) && longitude.length === latitude.length && visible) {
                     for (var i_1 = 0; i_1 < longitude.length; i_1++) {
                         var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
                         point.push(location_1);

package/src/maps/layers/polygon.js

@@ -1,3 +1,4 @@
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { PathOption, calculatePolygonPath, maintainSelection } from '../utils/helper';
 /**
  * When injected, this module will be used to render polygon shapes over the Maps.
@@ -28,12 +29,14 @@ var Polygon = /** @class */ (function () {
                 id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
             });
             var polygonData = polygonSetting.points;
-            var path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
-            var pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
-            var polygonEle = maps.renderer.drawPath(pathOptions);
-            maintainSelection(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
-            polygonSVGObject.appendChild(polygonEle);
-            polygonsSVGObject.appendChild(polygonSVGObject);
+            if (!isNullOrUndefined(polygonSetting.points) && polygonSetting.points.length > 0) {
+                var path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
+                var pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
+                var polygonEle = maps.renderer.drawPath(pathOptions);
+                maintainSelection(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
+                polygonSVGObject.appendChild(polygonEle);
+                polygonsSVGObject.appendChild(polygonSVGObject);
+            }
         });
         return polygonsSVGObject;
     };

package/src/maps/maps.js

@@ -332,7 +332,7 @@ var Maps = /** @class */ (function (_super) {
                     _loop_2(i);
                 }
             }
-            if (layer.dataSource instanceof MapAjax || !isNullOrUndefined(layer.dataSource['dataOptions'])) {
+            if (layer.dataSource instanceof MapAjax || (!isNullOrUndefined(layer.dataSource) && !isNullOrUndefined(layer.dataSource['dataOptions']))) {
                 _this.processAjaxRequest(layer, layer.dataSource, 'DataSource');
             }
             if (_this.serverProcess['request'] === _this.serverProcess['response'] && length === layerIndex) {
@@ -772,8 +772,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.createTile = function () {
         var mainLayer = this.layersCollection[0];
         var padding = 0;
-        if (mainLayer.isBaseLayer && (mainLayer.layerType === 'OSM' || mainLayer.layerType === 'Bing' ||
-            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google' || (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== ''))) {
+        if (mainLayer.isBaseLayer && (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== '' && isNullOrUndefined(mainLayer.shapeData))) {
             removeElement(this.element.id + '_tile_parent');
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
@@ -824,7 +823,7 @@ var Maps = /** @class */ (function (_super) {
             var baseLayer = mainLayers[i];
             if (baseLayer.visible && baseIndex === i) {
                 baseLayer.isBaseLayer = true;
-                this.isTileMap = (baseLayer.layerType === 'Geometry' && !isNullOrUndefined(baseLayer.shapeData)) ? false : true;
+                this.isTileMap = !isNullOrUndefined(baseLayer.shapeData) ? false : true;
                 this.layersCollection.push(baseLayer);
                 break;
             }
@@ -2110,7 +2109,6 @@ var Maps = /** @class */ (function (_super) {
             var render = false;
             var isMarker = false;
             var isLayer = false;
-            var isStaticMapType = false;
             for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                 var prop = _a[_i];
                 switch (prop) {
@@ -2132,17 +2130,13 @@ var Maps = /** @class */ (function (_super) {
                                     var collection = Object.keys(newProp.layers[x]);
                                     for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
                                         var collectionProp = collection_1[_b];
-                                        if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') ||
-                                            (isNullOrUndefined(this.layers[x].shapeData)
-                                                && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
+                                        if ((isNullOrUndefined(this.layers[x].shapeData)
+                                            && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
                                             this.isReset = true;
                                         }
                                         else if (collectionProp === 'markerSettings') {
                                             isMarker = true;
                                         }
-                                        else if (collectionProp === 'staticMapType') {
-                                            isStaticMapType = true;
-                                        }
                                     }
                                 }
                             }
@@ -2186,9 +2180,6 @@ var Maps = /** @class */ (function (_super) {
                         this.render();
                     }
                 }
-                else if (newProp.layers && isStaticMapType) {
-                    this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
-                }
                 else {
                     this.createSVG();
                     this.renderElements();
@@ -2513,7 +2504,7 @@ var Maps = /** @class */ (function (_super) {
                 }
                 for (var _b = 0, _c = polygonSetting.polygons; _b < _c.length; _b++) {
                     var polygon = _c[_b];
-                    if (polygon.points.length > 0) {
+                    if (!isNullOrUndefined(polygon.points) && polygon.points.length > 0) {
                         isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
                         isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
                         istooltipVisible = layer.polygonSettings.tooltipSettings.visible || istooltipVisible;
@@ -2622,7 +2613,7 @@ var Maps = /** @class */ (function (_super) {
         var latitude = 0;
         var longitude = 0;
         if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
-            var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
+            var padding = 10;
             pageY = pageY + padding;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
             var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;