Leaflet: Error while trying to get a GeoJSON from multipolygon Layer

Question

The issue is this one:

I successfully could implmement a MultiPolygon Layer in Leaflet, but I'm getting an error while trying to convert it to a GeoJSON object.

My code is this one:

let colecccionPoligonos=[];
    const multiPolygonOptions = {color:'red', weight:2, fillOpacity: 0.5};
    
    function swapCoords(coords){
        
        for (const val of coords[0]){
            const aux=val[0];
            val[0]=val[1];
            val[1]=aux;
        }
        return coords;
    }

    function anadirPoligono(poligono){

        colecccionPoligonos.push([[swapCoords(poligono.geometry.coordinates)]]);
        
        if(multipolygon){
            map.removeLayer(multipolygon);
        }

        multipolygon=L.polygon(colecccionPoligonos,multiPolygonOptions);
        console.log(multipolygon);
        
        
        map.addLayer(multipolygon);
        console.log(colecccionPoligonos);
        console.log(multipolygon.toGeoJSON(8));
        
    }

I've implemented the 'swapCoords' since I'm recieving a GeoJSON whose lat/lng values are in inverted order.

The result I'm getting is this one, with the layer added, the structure of the array passed to L.polygon, and the error shown at the image:

The details of the error are:

GeoJSON.js:272 Uncaught TypeError: Cannot read properties of null (reading 'alt')
    at Mi (GeoJSON.js:272:16)
    at zi (GeoJSON.js:288:4)
    at zi (GeoJSON.js:287:4)
    at zi (GeoJSON.js:287:4)
    at e.toGeoJSON (GeoJSON.js:368:16)
    at anadirPoligono (busqueda:477:28)
    at <anonymous>:1:1

Any idea of what's going wrong? Any more info needed?

Thanks a lot! Leandro

Answer 1

I've found the trouble.

It was about the nesting levels of the array passed as argument to L.polygon.

If we pass to it an array with more nesting levels that are required, it still will properly generate the wanted layer. However, we'll have an error while calling 'toGeoJSON()' from the Layer object created, since it will attempt to read the '_latlngs' attribute of the Layer object, and then crashing in some point of the generation of the wanted GeoJSON object.

So now, I have the line:

colecccionPoligonos.push(swapCoords(poligono.geometry.coordinates));

By removing the double brackets in the argument passed to 'push', which I had previously.

The code of the method which was throwing the error was this one:

// @function latLngToCoords(latlng: LatLng, precision?: Number|false): Array
// Reverse of [`coordsToLatLng`](#geojson-coordstolatlng)
// Coordinates values are rounded with [`formatNum`](#util-formatnum) function.
export function latLngToCoords(latlng, precision) {
    latlng = toLatLng(latlng);
    return latlng.alt !== undefined ?
        [Util.formatNum(latlng.lng, precision), Util.formatNum(latlng.lat, precision), Util.formatNum(latlng.alt, precision)] :
        [Util.formatNum(latlng.lng, precision), Util.formatNum(latlng.lat, precision)];
}

I think the issue was: since that method 'latLngToCoords' expected a 'latlng' object though it's first parameter, but in a previous step, that object wasn't properly generated because of this issue, that parameter was being recieved with a NULL value, so then I was having that error.

Now, I'm having this result:

Notice, at the console, the current nesting levels of the array now passed to L.polygon. The passed array will be the value of the '_latlngs' property of the generated layer.