[GIS] Making a GeoJSON layer editable with the Leaflet.Editable plugin

geojsonleaflet

I'm new to Leaflet and the Leaflet.Editable plugin, but I'd like to make GeoJSON layer editable. When I mean "editable", I mean a user can stretch the polygons at will.

Here is a good example of what I'd like.

My current code is as follows: 

var map = L.map('mapid', {editable: true}).setView([39.08344, -77.6497145], 13);

L.tileLayer('Some Valid Tile Layer',
    {
    attribution: 'Myself',
    maxZoom: 18
}).addTo(map);

$.ajax({

    url: 'http://127.0.0.1:8000/static/map/geoJSON/elementary_boundaries.geojson',
    dataType: 'json',
    success: function(data){

        console.log('The data was received');
        L.geoJson(data, {

            onEachFeature: function(feature, layer){
                layer.enableEdit(); // incorrect, but code would go here

            }
        }).addTo(map);

    },

    failure: function(data){
        console.log('The data wasn\'t received');
    }

});

I don't fully understand features vs layers, and I fully don't understand leaflet's geometry construction flow, so I'm sure my problem is elementary.

Best Answer

For future searchers, an alternative solution is to catch the 'edited' event from the editable extension and update the GeoJSON geometry to match that of the layer:

 this.mapHost.map.on('editable:vertex:dragend', (event: any) =>
      {
         // Note: the layer latlngs have been updated here but not the geojson geometry
         // copy changes to geojson
         event.layer.feature.geometry = (event.layer as any).toGeoJSON().geometry;
      });
Related Question