[GIS] Add polygon (buffered line) created by turf.js to map in Leaflet

leafletturf

I am trying to create a buffered line layer by creating GeoJSON line string from routing line and buffering it with turf.js and then show it on the map.

Here is my code:

route.on('routeselected', function(e) {
    var r = e.route;
        var lineCoordinates = [],
            i,
            latLng;
        for (i = 0; i < r.coordinates.length; i++) {
            latLng = L.latLng(r.coordinates[i]);
            lineCoordinates.push([latLng.lng, latLng.lat]);
        }

        let lineString = L.polyline(lineCoordinates,{color: 'black'});
        var buffered = turf.buffer(lineString, 500, {units: 'miles'});
        var bufferedLayer = L.geoJSON(null);
        bufferedLayer.addData(buffered);
        bufferedLayer.addTo(map);
        });

Any suggestion?

Best Answer

turf.buffer method returns GeoJSON feature, which cannot be directly added to the map. You have to create GeoJSON layer, add feature to the layer and layer to the map. Leaflet polyline also has to be converted to GeoJSON to be used as input to turf.buffer method.

Code could then look something like this:

var buffered = turf.buffer(lineString.toGeoJSON(), 500, {units: 'miles'});
var bufferedLayer = L.geoJSON(null);
bufferedLayer.addData(buffered);
bufferedLayer.addTo(map);
Related Question