Draw, edit and save several polygons at once Leaflet.Editable

Question

in Leaflet.Editable I need to draw several polygons, be able to edit them and at the end save them as GeoJSON or delete them all together by external button. I can do it with one polygon:

map = new L.Map('mapa', {
    maxBounds: extent,
    minZoom: 12,
    zoomControl:false,
    touchZoom: true,
    tap: false,
    editable:true,
    attributionControl:true,
    zoomControl: true
    });
    
$('body').on('click','#start_drawing',function(e){
    newPolygon=map.editTools.startPolygon('',{color:'#d7191c', opacity:0.8, weight: 5,fillColor:'#d7191c', fillOpacity:0.2});
});

$('body').on('click','#delete_drawing',function(e){
    map.removeLayer(newPolygon);
});

$('body').on('click','#save_drawing',function(e){
    newPolygon.toGeoJSON();
});

I tried to set featureLayer for LeafletEditable, but it created empty LayerGroup.

Thanks for help, Dan

Answer 1

Grouping the new polygons is the way to go, but you need to set up a group to hold them outside the callbacks for the controls. Add an empty group to the map first, then add the new polygons to that as you create them. Something along these lines should work:

map = new L.Map('mapa', {
    maxBounds: extent,
    minZoom: 12,
    zoomControl:false,
    touchZoom: true,
    tap: false,
    editable:true,
    attributionControl:true,
    zoomControl: true
});

const fg = L.featureGroup().addTo(map);

$('body').on('click','#start_drawing',function(e){
    const newPolygon=map.editTools.startPolygon('',{color:'#d7191c', opacity:0.8, weight: 5, fillColor:'#d7191c', fillOpacity:0.2});
    fg.addLayer(newPolygon);
});

$('body').on('click','#delete_drawing',function(e){
    fg.clearLayers();
});

$('body').on('click','#save_drawing',function(e){
    let geoJSON = fg.toGeoJSON();
    // Do something with geoJSON...
});