How to allow only one feature/polygon to be edited at a time with Leaflet?

Question

It's been days I'm trying to solve my problem.

I have a polygon layer from a GeoJSON. I want to edit my polygons with the click event. When I click on a polygon it becomes editable but what I want is that when I click on another polygon, the first polygon is no longer in editable mode.

OpenLayers but naturally does not Leaflet.

Here's an excerpt from my code:

var editableLayers = new L.FeatureGroup().addTo(map);
var polygon_json;
    $.ajax({
    type: "GET",
    dataType: "json",
    url: "get_json.php", 
    success: function (response) {
                        meaux_json = L.geoJson(response, {
                        onEachFeature: onEachFeature    
                        });
                      }
    });

//edit the targeted polygon
function onEachFeature (feature, layer) {
                    editableLayers.addLayer(layer);
                    layer.on('click', function(e){
                    e.target.editing.enable();
                    });
               }

One person was able to do it but I am having difficulty understanding how : https://github.com/dwilhelm89/Ethermap

Answer 1

I think you are close. In your onEachFeature function you should store the feature that was clicked so you can enable/disable editing in the click handler.

var selectedFeature = null;
//edit the targeted polygon
function onEachFeature (feature, layer) {
     editableLayers.addLayer(layer);
     layer.on('click', function(e){
          if(selectedFeature)
               selectedFeature.editing.disable();
          selectedFeature = e.target;
          e.target.editing.enable();
     });
}