toGeoJSON

[jfgirard]

Hi,
I'm working with L.GeoJSON and the editing tools. I didn't find a built-in way to extract the GeoJSON from a layer when it's time to save back to server.

Here is what I did. The target variable is from the click event (e.target):

toGeoJSON: function(target) {
    if (target instanceof L.Marker) {
        //Point
        return {
            coordinates: this.latLngToCoords(target.getLatLng()),
            type: 'Point'
        }
    } else if (target instanceof L.MultiPolygon || target instanceof L.MultiPolyline) {
        //MultiPolygon and MultiLineString
        var multi = [];
        var layers = target._layers;
        for (var stamp in layers) {
            multi.push(this.toGeoJSON(layers[stamp]).coordinates);
        }
        return {
            coordinates: multi,
            type: (target instanceof L.MultiPolygon) ? 'MultiPolygon': 'MultiLineString'
        };
    } else if (target instanceof L.Polygon) {
        //Polygon
        var coords = this.latLngsToCoords(target.getLatLngs());
        return {
            coordinates: [coords],
            type: 'Polygon'
        };
    } else if (target instanceof L.Polyline) {
        //Linestring
        var coords = this.latLngsToCoords(target.getLatLngs());
        return {
            coordinates: coords,
            type: 'LineString'
        };
    } else if (target instanceof L.FeatureGroup) {
        //Multi point and GeometryCollection
        var multi = [];
        var layers = target._layers;
        var points = true;
        for (var stamp in layers) {
            var json = this.toGeoJSON(layers[stamp]);
            multi.push(json);
            if (json.type !== 'Point') {
                points = false;
            }
        }
        if (points) {
            var coords = multi.map(function(geo){
                return geo.coordinates;
            });
            return {
                coordinates: coords,
                type: 'MultiPoint'
            };
        } else {
            return {
                geometries: multi,
                type: 'GeometryCollection'
            };
        }
    }
},

latLngToCoords: function(latlng) {
    return [latlng.lng, latlng.lat];
},

latLngsToCoords: function(arrLatlng) {
    var coords = [];
    arrLatlng.forEach(function(latlng) {
        coords.push(this.latLngToCoords(latlng));
    },
    this);
    return coords;
}

I don't know where to include such a function in the leaflet framework... But I think it would be very useful working with edit tools.

Jeff

[mourner]

Thanks for the code! I'll think about this... By the way, you're not the first. :) Here's an earlier pull request for this: #645

[brunob]

Great ! I had started to do a similar thing last week based on GeometryToLayer ;)

I think this implementation is more advanced that the one referenced in #645 (multi point and geometry collection handled).

Here is the code i've started to use, just in case :

var layerToGeometry = function(layer) {
    var json, type, latlng, latlngs = [], i;

    if (L.Marker && (layer instanceof L.Marker)) {
        type = 'Point';
        latlng = LatLngToCoords(layer._latlng);
        return JSON.stringify({"type": type, "coordinates": latlng});

    } else if (L.Polygon && (layer instanceof L.Polygon)) {
        type = 'Polygon';
        latlngs = LatLngsToCoords(layer._latlngs, 1);
        return JSON.stringify({"type": type, "coordinates": [latlngs]});

    } else if (L.Polyline && (layer instanceof L.Polyline)) {
        type = 'LineString';
        latlngs = LatLngsToCoords(layer._latlngs);
        return JSON.stringify({"type": type, "coordinates": latlngs});

    }
}

var LatLngToCoords = function (LatLng, reverse) { // (LatLng, Boolean) -> Array
    var lat = parseFloat(reverse ? LatLng.lng : LatLng.lat),
        lng = parseFloat(reverse ? LatLng.lat : LatLng.lng);

    return [lng,lat];
}

var LatLngsToCoords = function (LatLngs, levelsDeep, reverse) { // (LatLngs, Number, Boolean) -> Array
    var coord,
        coords = [],
        i, len;

    for (i = 0, len = LatLngs.length; i < len; i++) {
        coord = levelsDeep ?
                LatLngToCoords(LatLngs[i], levelsDeep - 1, reverse) :
                LatLngToCoords(LatLngs[i], reverse);
        coords.push(coord);
    }

    return coords;
}

Anyway, i think we got a problem in polyline handling in geometryToLayer() with geojson polygons but i'll discuss aobut this in another issue.

++

[cgwyllie]

@jfgirard Thanks for your snippet, very useful! I agree this is something that would be useful to see in Leaflet.

I have a minor addition to make. I noticed the method wasn't handling polygons with holes in them, so I have added code to handle that:

...
else if (target instanceof L.Polygon) {
    //Polygon
    var coords = this.latLngsToCoords(target.getLatLngs());
    coords = [coords];
    if (target._holes.length) {
        // Deal with holes
        for (var h in target._holes) {
            coords.push(this.latLngsToCoords( target._holes[h] ));
        }
    }
    return {
        coordinates: coords,
        type: 'Polygon'
    };
}
...

Thanks again,
Chris

(referenced: http://www.geojson.org/geojson-spec.html#polygon)

[jfgirard]

@cgwyllie Thanks for the fix! I ll update my code.

Jeff

[mourner]

Considering this feature for Leafet.draw plugin (as it only makes sense in editing context). Leaflet/Leaflet.draw#81 cc @tmcw

[yohanboniface]

as it only makes sense in editing context

IHMO, GeoJSON is quite a standard to communicate through API, so regardless of how the features have been created, one can use GeoJSON to send a request to a third party GIS. So my opinion is that better stands in the core.
(Note that regarding https://github.com/yohanboniface/Leaflet.Storage, I'm using Leaflet.draw, so I'm not partisan ;) )

[mourner]

Thanks Yohan, sounds reasonable!
Related: #1369 (useful feedback in comments)

[ghuntley]

❤️ @jfirebaugh