Skip to content
Go to file

Build Status Greenkeeper badge


Create a buffer around shapes drawn with Leaflet.draw.

Demo Image

See here for a live demo.


Include the source file (dist/leaflet.buffer.min.js) after the Leaflet.Draw library. In your setup script, make sure your Leaflet.Draw edit config includes a buffer property (options are below). That's it!


const osmUrl = 'http://{s}{z}/{x}/{y}.png';
const osm = L.tileLayer(osmUrl, { maxZoom: 18 });
const map = new L.Map('map', {
  layers: [osm],
  center: new L.LatLng(38.8977, -77.0366),
  zoom: 15,
const drawnItems = new L.FeatureGroup();

const drawControl = new L.Control.Draw({
  position: 'topright',
  draw: {},
  edit: {
    featureGroup: drawnItems,
    remove: true,
    buffer: {
      replacePolylines: false,
      separateBuffer: false,


replacePolylines: If true (default), buffering a polyline will result in the replacement of the polyline with a polygon. If false, buffering a polyline will result in a new polygon on top of the line, but not replacing it.

separateBuffer: If false (default), then buffering any shape actually changes the shape. If true, buffering a shape results in a copy of the shape being made, to maintain both the original shape and the buffer.

bufferStyle: style options for the buffer shapes (always used for polyline buffers; used for others iff separateBuffer is true)

You can’t perform that action at this time.