Search code examples
javascriptleafletgeojsonturfjs

turf buffer leaflet geojson ajax


I have loaded point data from a geojson api using

    var incidences = new L.GeoJSON.AJAX("http://127.0.0.1:8000/incidence_data/",{

         onEachFeature: function(feature,layer){
            //console.log(feature.properties);
            layer.bindPopup(feature.properties.name.toString())
        }
    });
    incidences.addTo(map);

now I am trying to create a button on the map that when I click the button the incidences get buffered a mile.

html

<div id="map2" class="col-md-4 well">
    <p>GeoDjango is da bomb</p>
    <button id="buffer" class="form-control btn-warning">Buffer</button>
</div>

JS

    var bufferLayer;
    var incidences2 = incidences.toGeoJSON();

    $("#buffer").click(function(){
        if ($("#buffer").html()=='Buffer'){
            var buff=turf.buffer(incidences2,1,'miles');
            bufferLayer=L.geoJSON(buff).addTo(map);
            $("#buffer").html("Remove Buffer");
      } else{
            map.removeLayer(bufferLayer);
            $("#buffer").html("Buffer");
        }
    });

then I get this error when I click on the button

turf.min.js:1 Uncaught Error: options must be an object
    at Object.t.buffer (turf.min.js:1)
    at HTMLButtonElement.<anonymous> (js.js:112)
    at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)

Solution

  • As the error suggests, you aren't passing a valid "options" parameter (in this case, you are sending the string 'miles' instead of an options object). Per the documentation (http://turfjs.org/docs#buffer), you should instead call

    var buff =turf.buffer(incidences2, 1, {units: 'miles'});