Search code examples
javascriptleafletmapboxgeojsonturfjs

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 the map?

   <script>
        L.mapbox.accessToken = 'fg.eyJ1IjoisdflksdaklsjZWwiLCJhIjoiRHNwX0ZWNCJ9.Ov2O5sslkdqV93_R0lq3Q';
        var map = L.mapbox.map('map', 'example.kf6j9ec4')
            .setView([38.633, -90.319],12);

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

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

        //Make the marker a feature
        var pointMarker = marker.toGeoJSON();

        //buffer the marker geoJSON feature
        var buffered = turf.buffer(pointMarker, 2, 'miles');

        var resultFeatures = buffered.features.concat(pointMarker);
        var result = {
            "type": "FeatureCollection",
            "features": resultFeatures
        };

        L.mapbox.featureLayer().setGeoJSON(buffered).addTo(map);
        marker.addTo(map);

    </script>

Solution

  • 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();