Search code examples
jsonleafletpolylineturfjs

How to add a polygon around a polyline leaflet

Hi guys i am quite new to leaflet and turfjs and need a little bit of help.

I have made a polyline which works but what i want is a polygon/buffer that follows the polyline and users can change the width of the polygon/buffer in nm's by slider or text field.

If anyone knows this would be a great help

Solution

  • You can utilize this slider plugin.

    https://codepen.io/anon/pen/RypEOM

    var polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]);   
turfLayer.addData(polygon);

L.control.slider(function(value) {
    if (turfLayer.getLayers().length > 1) {
        turfLayer.removeLayer(turfLayer.getLayers()[1]);
    }
    var buffered = turf.buffer(polygon, value, {units: 'kilometers'});
    turfLayer.addData(buffered);

}, {
    max: 100,
        value: 0,
    step: 10,
    size: '250px',
        orientation:'vertical',
    id: 'slider'
}).addTo(map);