Leaflet Delete feature properties from GoeJson with button

Question

I have simple code but can't get how to make it works.. The idea is to press the "Delete" button to change "area" value to "0" in each feature made in GeoJson. Code below works, (but automatically, without the button), and it is clear for me:

function onEachFeature(feature, layer) {

feature.properties.area = 'x'; 

};

But when I want start changing values using the button (I put function inside OnEachFeature) the operation works only for the last feature in geoJson file..

function onEachFeature(feature, layer) {


function foo(){

feature.properties.area = 'x'; 

}

document.getElementById('delete').onclick = foo;


};

My question is how to make it works for each feature (Press the button -> Change area value ) ? I will be very grateful for your answers !

Below link for GeoJson file:

https://api.npoint.io/2ba17bdbb50601803cd0

Answer 1

You can use getLayers to get all the features and then change their area property:

var geojson = L.geoJSON(data, {
    onEachFeature: onEachFeature
}).addTo(map);

function deleteArea() {
    var layers = geojson.getLayers();
    for (var i = 0; i < layers.length; i++) {
        layers[i].feature.properties.area = 0;
    }
}

document.getElementById('delete').onclick = deleteArea;