Is there a way in Leaflet to reset the function from a L.easybutton?

Question

Using Leaflet, I linked to a L.easyButton a function which adds a geoJson polygon layer to a map, and that activates different functions "onEachFeature" of this layer. Among them, a function when clicking on a feature which creates a separate geoJson polygon layer with this feature and add it to a specific LayerGroup. What I would like is that after clicking on a feature, the different functions "onEachFeature" would not be activated anymore and that the user would need to push the L.easyButton again if he/she wants to do that another time. Everything works fine, except the fact to deactivate the "onEachFeature" functions. I tried to use map.removeControl(), map.removeLayer() and delete the variable directly, but none of these options work.

My code is:

L.easyButton( '<strong>Sélectionner une commune</strong>', function(){
    var communes_geojson = $.getJSON("data/Adm/Adm_Communes_4326.geojson",function(communes){
        var communes_new = L.geoJson(communes, {
            style:  stylelayer.communes,    
            onEachFeature: function addMyData (feature,layer){
                layer.on({
                    click: selectcommune
                });
            }
        });
        map.addControl(communes_new);
    });
    info.addTo(map);
},
{position: 'topright'}).addTo(map);

function selectcommune(e) {
    var layer=e.target;
    var feature = e.target.feature;
    var selectcommune1 = L.geoJson(feature, {
        style:  stylelayer.highlight
    }).addTo(map);

    control_map2.addOverlay({
        name:feature.properties.NameFRE,
        layer:selectcommune1
    });
    
    // don't work
    
    // map.removeControl(communes_geojson);
    // map.removeControl(communes_new);
    // map.removeControl(layer);
    
    // map.removeLayer(communes_geojson);
    // map.removeLayer(communes_new);
    // map.removeLayer(layer);  
    
    // delete communes_geojson;
    // delete communes_new;
    // delete layer;

Tahnk you for your help.

Seth Lutske Seth Lutske · Accepted Answer · 2020-12-21T22:00:07

In selectcommune, once you do what you want (style your feature and add your overlay), you then need to go back and void out the onEachFeature function that you had added with the L.easyButton:

L.easyButton( '<strong>Sélectionner une commune</strong>', function(){
    var communes_geojson = $.getJSON("data/Adm/Adm_Communes_4326.geojson",function(communes){
        var communes_new = L.geoJson(communes, {
            style:  stylelayer.communes,    
            onEachFeature: function addMyData (feature,layer){
                layer.on({
                    click: e => selectcommune(e, communes_new)
                });
            }
        });
        map.addControl(communes_new);
    });
    info.addTo(map);
},


function selectcommune(e, data) {
    var layer=e.target;
    var feature = e.target.feature;
    var selectcommune1 = L.geoJson(feature, {
        style:  stylelayer.highlight
    }).addTo(map);

    control_map2.addOverlay({
        name:feature.properties.NameFRE,
        layer:selectcommune1
    });

    data.eachLayer( layer => layer.on = () => {} )
}

So you hit the easybutton, and layer.on is set for each feature to fire the selectcommune. When it fires, it removes the layer.on function (or overwrites it to do nothing), until you hit the easybutton again.

Is there a way in Leaflet to reset the function from a L.easybutton?

1 Answers