Create a buffer around shapes drawn with Leaflet.draw.
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!
Example:
const osmUrl = 'http://{s}.tile.openstreetmap.org/{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();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
position: 'topright',
draw: {},
edit: {
featureGroup: drawnItems,
remove: true,
buffer: {
replacePolylines: false,
separateBuffer: false,
},
},
});
map.addControl(drawControl);
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
)