I am trying to display a polygon on the map that can be flexibly updated by a reload. To do this, I call the data as follows:
$.get('./load-polygon.php', function(csvString) {
map.eachLayer(function (layer)
{
if (layer instanceof L.Polygon)
{
layer.remove();
}
});
var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
for (var i in data)
{
var row = data[i];
var polygon = L.polygon([row.Polygon], {color: '#ff4f00'}).addTo(map);
}
});
The data content of the load-polygon.php looks like this:
"Polygon" "[52.485774, 13.436072],[52.534669, 13.397620],[52.542187, 13.475554],[52.499153, 13.514693]"
If I output all data via the console and include the polygon manually, everything works without any problems.
Unfortunately, I get an error message and the polygon is not displayed.
Uncaught TypeError: Cannot read properties of null (reading '0')
at i._projectLatlngs (leaflet.js:5:79693)
at i._projectLatlngs (leaflet.js:5:79838)
at i._projectLatlngs (leaflet.js:5:79838)
at i._project (leaflet.js:5:79369)
at i._reset (leaflet.js:5:75435)
at i.onAdd (leaflet.js:5:74837)
at i._layerAdd (leaflet.js:5:63932)
at i.whenReady (leaflet.js:5:42041)
at i.addLayer (leaflet.js:5:64307)
at i.addTo (leaflet.js:5:63275)
If I output the data, everything looks fine.
console.log(row.Polygon);
Manually, the polygon can then be inserted with the appropriate values.
var latlngs = [[52.485774, 13.436072],[52.534669, 13.397620],[52.542187, 13.475554],[52.499153, 13.514693]];
var polygon = L.polygon(latlngs, {color: '#ff4f00'}).addTo(map);
Maybe someone recognizes my problem... Thanks in advance... And best regards.
var row = data[i]; console.log(row);