Leaflet – Creating GeoJSON Polygon Layer from Turf Buffer on GeoJSON Point Layer

leafletturf

I have Leaflet GeoJSON point layer that I buffer with turf and add to the map. The code works well but I want to add the point attributes to the polygon layer but I am unsure of how to do to that. Anyone can run this code in the console if they have a an app with Leaflet and turf

var all_day=L.layerGroup();
$.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson", function(data) {
        L.geoJSON(data, {
                onEachFeature: function(feature,layer){
                            layer.bindPopup('<b>Magnitude</b>= '+feature.properties.mag+'<br>'+
                                            '<b>Place</b>= '+feature.properties.place+'<br>');
                            var magnitude=feature.properties.mag;
                            var place=feature.properties.place;

                            var buffed=turf.buffer(feature.geometry,magnitude*10)

                            L.geoJSON(buffed, {
                              onEachFeature: function(feature,layer){
                                layer.bindPopup('<b>Magnitude</b>= '+magnitude+'<br>'+
                                            '<b>Place</b>= '+place+'<br>')
                              }}).addTo(all_day);
                                           
                        }
                    }).addTo(all_day);
});
all_day.addTo(map);

I saw something like this answer https://stackoverflow.com/questions/35760126/leaflet-draw-not-taking-properties-when-converting-featuregroup-to-geojson/35819611#35819611 but it didn't work for me and its kind of clunky.

Best Answer

All you have to do after you create buffed feature is to assign to it the properties from parent feature:

buffed.properties = feature.properties;

Code could then look something like this:

L.geoJSON(data, {
  onEachFeature: function(feature,layer) {
    layer.bindPopup('<b>Magnitude</b>= ' + feature.properties.mag + '<br>'+
                    '<b>Place</b>= ' + feature.properties.place + '<br>');
    var buffed = turf.buffer(feature.geometry, feature.properties.mag * 10);
    buffed.properties = feature.properties;
    L.geoJSON(buffed, {
      onEachFeature: function(feature,layer) {
        layer.bindPopup('<b>Magnitude</b>= ' + feature.properties.mag + '<br>'+
                        '<b>Place</b>= ' + feature.properties.place + '<br>');
      }
    }).addTo(all_day);
  }
}).addTo(all_day);
Related Question