Creating buffer around point in LeafletJS?

Question

I am using LeafletJS. I want to create buffer around point.

After Selecting a point buffer radius will be specifed by user in feet. After searching of a while I found this link of JSTS.

Does JSTS buffer works with LeafletJS? I am not able to find any sample for this. Any other solutions to achieve same will be appreciated.

After looking into the code of JSTS and searching for a while, I came to a conclusion, there is no conversion between JSTS geometry and Leaflet JS geometry. So it is not possible to use it without implementing conversion.

Answer 1

You can do this using turf. Here is some code for an example:

var turf = require('turf') // this line is for node.js, but you do not need it in the browser
var pt = {
  type: 'Feature',
  geometry: {
    type: 'Point',
    coordinates: [0, 0]
  },
  properties: {}
};
var unit = 'miles'

// 10 mile ring
var buffered = turf.buffer(pt, 10, unit)

UPDATE:

turf's inputs and outputs are all simply GeoJSON. There are no special turf types. buffered is a regular GeoJSON object, so you can add it to your map like this:

L.geoJson(buffered).addTo(map);

I recommend reading both the turf documentation on data and the Leaflet documentation on GeoJSON before going much further.

Answer 2

Just to add for future reference, I got JSTS to work with Leaflet.js by exporting / importing GeoJSON between the two libraries.

It's obviously not very efficient if you're doing a lot of processing but for simple one off conversions it's a pretty straightforward solution.

function buffer(leafletGeometry, distance){
    var reader = new jsts.io.GeoJSONReader();
    var input = reader.read(leafletGeometry.toGeoJSON());
    input = input.geometry.buffer(distance);

    var bufferGeoJSON = new jsts.io.GeoJSONWriter().write(input);
    return L.geoJson(bufferGeoJSON);
}

Answer 3

Can't you use LeafletJS circle? Do you plan on doing some spatial queries with that buffer?