Export Leaflet Map To Geojson

Is it possible to export geojson from leaflet to save the map state? I want to store the markers, zoom & map center to load it later. There is plenty of ways to load geojson o

Solution 1:

There's no "out-of-the-box" option to export all the markers on the map to GeoJSON but it's something you can do easily do yourself. Leaflet's L.Marker has a toGeoJSON method:

Returns a GeoJSON representation of the marker (GeoJSON Point Feature).

http://leafletjs.com/reference.html#marker-togeojson

For example:

// Create a markervar marker = new L.Marker([0, 0]);
// Get the GeoJSON objectvar geojson = marker.toGeoJSON();
// Log to consoleconsole.log(geojson);

Will output to your console:

{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[0,0]}}

If you want to store all the markers added to your map in a GeoJSON collection, you could do something like this:

// Adding some markers to the mapvar markerA = new L.Marker([0, 0]).addTo(map),
    markerB = new L.Marker([1, 1]).addTo(map),
    markerC = new L.Marker([2, 2]).addTo(map),
    markerD = new L.Marker([3, 3]).addTo(map);

// Create an empty GeoJSON collectionvar collection = {
    "type": "FeatureCollection",
    "features": []
};

// Iterate the layers of the map
map.eachLayer(function (layer) {
    // Check if layer is a markerif (layer instanceof L.Marker) {
        // Create GeoJSON object from markervar geojson = layer.toGeoJSON();
        // Push GeoJSON object to collection
        collection.features.push(geojson);
    }
});

// Log GeoJSON collection to console
console.log(collection);

Will output to your console:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[0,0]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[1,1]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[2,2]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[3,3]}}]}

Edit: However, as the QP found out, if you're able to put your markers into a L.LayerGroup, L.FeatureGroup or L.GeoJSON layer you can just use it's toGeoJSON method which returns a GeoJSON featurecollection:

Returns a GeoJSON representation of the layer group (GeoJSON FeatureCollection).

http://leafletjs.com/reference.html#layergroup-togeojson

If you want to store the map's current bounds (center and zoom) you could simply add it to the collection doing this:

var bounds = map.getBounds();

var collection = {
    "type": "FeatureCollection",
    "bbox": [[
        bounds.getSouthWest().lng,
        bounds.getSouthWest().lat
    ], [
        bounds.getNorthEast().lng,
        bounds.getNorthEast().lat
    ]],
    "features": []
};

You can later restore it by using the bbox member in conjunction with L.Map's setBounds method. That's it. You could send it to the server or download it via dataurl whatever you like. Hope that helps, good luck.

Solution 2:

I've found a simplier solution based on iH8's answer and a colleague's help.

First, create a FeatureGroup layer and add it to the map:

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

Then add the marker (or other elements) to the layer:

var marker = new L.marker([lat, lon]).addTo(drawnItems);

And export everything when you want to :

var collection = drawnItems.toGeoJSON();
var bounds = map.getBounds();

collection.bbox = [[
    bounds.getSouthWest().lng,
    bounds.getSouthWest().lat,
    bounds.getNorthEast().lng,
    bounds.getNorthEast().lat
]];

// Do what you want with this:
console.log(collection);