Turf.buffer And A Draggable Marker

So far I have created a marker, transfered it to geoJSON, and created a buffer around it with Turf.buffer. How can I get this buffer to 'stick' to the marker as I drag it around th

Solution 1:

Upfront, i've got to say, i'm not familiar with Turf.js at all so shoot me if i'm wrong. One thing i don't understand about what you're doing is why are you adding buffered to the featureLayer and not the result object? I suppose you meant to do that so i changed that in my example below.

You'll need to hook onto the marker's dragend event. There you'll need to get the new results based on the marker's current geojson object. So it's best you write a function to get the results, so you can use that when placing the marker the first time and on each marker drag. In code:

// Add empty featureLayer
var layer = L.mapbox.featureLayer().addTo(map);

var marker = L.marker(new L.LatLng(38.633, -90.319), {
    draggable: true
});

// Attach handler on dragend event
marker.on('dragend', function (event) {
    // Get new results based on marker's current geojson
    var results = getResults(event.target.toGeoJSON());
    // Add the results to the featurelayer
    layer.setGeoJSON(results);
});

marker.addTo(map);

// Function for getting results
function getResults (geojson) {
    // You returned buffered, makes no sense to me
    // Changed it to return the new featurecollection
    // But you can alter it to what you need
    var buffered = turf.buffer(geojson, 2, 'miles'),
        resultFeatures = buffered.features.concat(geojson);
    return  {
        "type": "FeatureCollection",
        "features": resultFeatures
    };
}

// Get results the first time
var results = getResults(marker.toGeoJSON());
// Add the results to the featurelayer
layer.setGeoJSON(results);

Now you'll have updated results on each marker drag. Did this code quick and dirty and was not able to test it because i don't know how to use turf. Otherwise i would've created an example on Plunker. Let me know if you run into any problems. Hope that helps, good luck!

Solution 2:

So with the help of the above code and a lot of googling I came up with a solution which works. What worked: adding a draggable marker and then using the "marker.on" method to initiate a function to clear any old buffers and then a function to redraw the buffer around the current location.

        //add marker that is draggable
        var marker = L.marker(new L.LatLng(38.633, -90.319), {
            icon: L.mapbox.marker.icon({
                'marker-color': '1B05E3', 
                "marker-symbol": "pitch"
            }),
            draggable: true
        });

        //add marker popup
        marker.bindPopup('This marker is draggable! Move it around to see what locales are in your "area of walkability".');
        marker.addTo(map);

        //remove old buffers (used when marker is dragged)
        function removeBuff(){
            map.removeLayer(buff);
            };

        //create buffer (used when the marker is dragged)
        function updateBuffer(){
            //Make the marker a feature
            var pointMarker = marker.toGeoJSON();
            //buffer the marker geoJSON feature
            var buffered = turf.buffer(pointMarker, 1, 'miles');
            //add buffer to the map. Note: no "var" before "buff" makes it a global variable and usable within the removeBuff() function. 
            buff = L.mapbox.featureLayer(buffered);
            buff.addTo(map);
        };

        marker.on('drag', function(){removeBuff(), updateBuffer()});
        updateBuffer();