[GIS] Creating buffer around point in LeafletJS

bufferjavascriptjstsleafletpoint

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.

Best Answer

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.

Related Question