Leaflet Control Layer for buffer TurfJS

Question

How can i make buffer from turf js to my control layer?

here is my code for buffer :

var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
            
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: IconTransportasi
                }).bindTooltip(feature.properties.nama_sarpras);
            },
            onEachFeature: function (feature, latlng) {
                var bufferedtransportasi = turf.buffer(feature, 10, {units: 'kilometers'});
                L.geoJSON(bufferedtransportasi).addTo(map)
            }
            
        }).addTo(map);

And this my code for control layer. I want layer bufferedtransportasi to my control layer :

var baseLayers = {
        "OpenStreetMap": LayerKita,
        "OpenCycleMap": L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'),
        "Outdoors": L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')
    };

    var overlays = {
        "Sekolah": Sekolah,
        "Kesehatan": Kesehatan,
        "Transportasi": Transportasi
    };

    L.control.layers(baseLayers, overlays).addTo(map);

Answer 1

If you want to enable / disable all buffer layers together you need to add them to a LayerGroup and then add the LayerGroup to the layer control:

var bufferGroup = L.featureGroup().addTo(map);
var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
            
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: IconTransportasi
                }).bindTooltip(feature.properties.nama_sarpras);
            },
            onEachFeature: function (feature, latlng) {
                var bufferedtransportasi = turf.buffer(feature, 10, {units: 'kilometers'});
                L.geoJSON(bufferedtransportasi).addTo(bufferGroup)
            }
            
        }).addTo(map);


var overlays = {
        "Sekolah": Sekolah,
        "Kesehatan": Kesehatan,
        "Transportasi": Transportasi,
        "Buffer": bufferGroup
    };

L.control.layers(baseLayers, overlays).addTo(map);

To add each buffer as own control, add the buffer layer to the overlays object:

    var overlays = {
        "Sekolah": Sekolah,
        "Kesehatan": Kesehatan,
        "Transportasi": Transportasi
    };

var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
            
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: IconTransportasi
                }).bindTooltip(feature.properties.nama_sarpras);
            },
            onEachFeature: function (feature, latlng) {
                var bufferedtransportasi = turf.buffer(feature, 10, {units: 'kilometers'});
                var buffer = L.geoJSON(bufferedtransportasi).addTo(map)
                overlays[feature.properties.nama_sarpras] = buffer;
            }
            
        }).addTo(map);


 L.control.layers(baseLayers, overlays).addTo(map);