"Error with Leaflet Map - Unable to display tiles on the map"

Hossam Ayman — Thu, 02 Feb 2023 08:17:39 +0000

I am encountering an issue when drawing polygons, point, and line features on a map using the Leaflet.js library.

The polygon is correctly displayed on the map, but the moment I try to draw a point ** or **line, they *disappear * immediately after releasing the mouse click. I need assistance to correct this issue and make the drawing of points and lines on the map functional.

`var map = L.map("leaflet-map", {
center: [37.7749, -122.4194],
zoom: 8,
});

let osm = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}", {
foo: "bar",
attribution:
'© OpenStreetMap contributors',
});
osm.addTo(map);

var CyclOSM = L.tileLayer(
"https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
{
attribution:
'CyclOSM | Map data: © OpenStreetMap contributors',
}
);

CyclOSM.addTo(map);

var Esri_WorldImagery = L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
{
attribution:
"Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
}
).addTo(map);

let baseLayers = {
"Esri World Imagery": Esri_WorldImagery,
"Open Street Map": osm,
"Cycl OSM": CyclOSM,
};
//Creates three feature groups for points, polygons, and lines on the map
var pointLayer = L.featureGroup().addTo(map);
var polygonsLayer = L.featureGroup().addTo(map);
var lineLayer = L.featureGroup().addTo(map);
var polygon;
var point;
var line;
var allLayers = L.featureGroup([pointLayer, polygonsLayer, lineLayer]).addTo(
map
);

//Add new shapes drawn on the map to the appropriate feature group
map.on("draw:created", function (e) {
var type = e.layerType,
layer = e.layer;
if (type === "point") {
point = layer;
point.addTo(pointLayer);
point.addTo(map);
} else if (type === "polygon") {
polygon = layer;
polygon.addTo(polygonsLayer);
polygonsLayer.addTo(map);
} else if (type === "line") {
line = layer;
line.addTo(lineLayer);
lineLayer.addTo(map);
}
});

var drawControl = new L.Control.Draw({
draw: {
marker: true,
polyline: true,
polygon: true,
rectangle: true,
circle: true,
},
}).addTo(map);`

DEV Community: Hossam Ayman

"Error with Leaflet Map - Unable to display tiles on the map"