Estoy tratando de mostrar un polígono en el mapa que se puede actualizar de manera flexible mediante una recarga. Para hacer esto, llamo a los datos de la siguiente manera:
$.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); } });
El contenido de datos de load-polygon.php se ve así:
"Polígono" "[52.485774, 13.436072],[52.534669, 13.397620],[52.542187, 13.475554],[52.499153, 13.514693]"
Si envío todos los datos a través de la consola e incluyo el polígono manualmente, todo funciona sin problemas.
Desafortunadamente, recibo un mensaje de error y no se muestra el polígono.
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)
Si saco los datos, todo se ve bien.
consola.log(fila.Polígono);
De forma manual, el polígono se puede insertar con los valores apropiados.
var latlngs = [[52.485774, 13.436072],[52.534669, 13.397620],[52.542187, 13.475554],[52.499153, 13.514693]];
var polígono = L.polygon(latlngs, {color: '#ff4f00'}).addTo(mapa);
Tal vez alguien reconozca mi problema... Gracias de antemano... Y un saludo.