GIS – Create buffer with given units using leaflet

In our previous blogs, we learned about GIS and their data models as well as Implementation leaflet for GIS solution. Now, from this blog, we will learn how to create a new polygon by creating a Buffer that is 250ft around the perimeter of the selected parcel.


the selected parcel with buffer

In the above image, the yellow area is selected parcel and the red area shown as Buffer polygon.

Parcel: Plot an area of land.

For the creation of buffer first we need to get selected parcel coordinates, Some parcel has only four coordinates and some has multiple, it depends on parcel shape.

You can also use the below method for creating the polygon.I am using Turf javascript for the creation of a polygon and buffer.

“Turf is a modular geospatial analysis engine written in JavaScript. It performs geospatial processing tasks with GeoJSON data and can be run on a server or in a browser.”
You can download turf.js from

Turf.polygon: Takes an array of LinearRings and optionally an Object with properties and returns a GeoJSON Polygon feature.

var polygon = turf.polygon([[ [-2.275543, 53.464547], [-2.275543, 53.489271], [-2.215118, 53.489271], [-2.215118, 53.464547],

[-2.275543, 53.464547] ]], { name: ‘mypoly’, population: 500});

After creation of polygon, we will create a buffer for the created polygon. First, we need to know ‘what is the buffer’.

“A buffer in GIS is a zone around a map feature measured in units of distance or time. A buffer is useful for proximity analysis”.

buffer types


For the creation of buffer around the selected parcel/polygon, we are using Turf.Buffer method.

Turf.Buffer: Turf.Buffer calculates a buffer for input features for a given radius. FeatureCollection may be geojson polygon, line or point as per our requirement. Units supported are miles, kilometers, feet, and degrees (negative values are allowed).


  • Input to be buffered (FeatureCollection | Geometry | Feature)
  • Radius is the distance to draw the buffer.


  • Units is a string type. The units are supported by turf units (optional, default “kilometers”) only.
  • Steps is number  type for number of steps (optional, default 64)


var poly = turf.polygon([[plg.feature.geometrynoflip.coordinates[0][0]]]);

Var ft = 200;

var buffered = turf.buffer(poly, ft, { units: ‘feet’ });

In above example input as the selected polygon, Unite as feet and Steps are 200.

For showing created buffer on the map, we need to bind with the map.

Var parcelbuf = new L.GeoJSON(buffered, { style: parcel200ftStyle });



polygon with created buffer


This is how we create a buffer with given units using leaflet.

If you are looking to get more updates or assessments for GIS, contact us today at +1-484-876-1867 or send us a message.

Related Posts

Leave a comment