https://github.com/skeate/leaflet.buffer

Create buffers around Leaflet.draw shapes
https://github.com/skeate/leaflet.buffer

buffer draw leaflet

Last synced: 3 months ago
JSON representation

Create buffers around Leaflet.draw shapes

• Host: GitHub
• URL: https://github.com/skeate/leaflet.buffer
• Owner: skeate
• Created: 2014-08-29T12:58:36.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-03-06T22:23:09.000Z (almost 5 years ago)
• Last Synced: 2024-04-14T21:46:37.863Z (9 months ago)
• Topics: buffer, draw, leaflet
• Language: JavaScript
• Homepage: http://skeate.github.io/Leaflet.buffer
• Size: 2.26 MB
• Stars: 51
• Watchers: 7
• Forks: 23
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/skeate/Leaflet.buffer.svg)](https://travis-ci.org/skeate/Leaflet.buffer)

[![Greenkeeper badge](https://badges.greenkeeper.io/skeate/Leaflet.buffer.svg)](https://greenkeeper.io/)

# Leaflet.buffer

Create a buffer around shapes drawn with

[Leaflet.draw](https://github.com/Leaflet/Leaflet.draw).

![Demo Image](http://i.imgur.com/FITcpas.gif)

[See here](http://skeate.github.io/Leaflet.buffer) for a live demo.

## Usage

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:

```javascript

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);

```

## Options

`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](http://leafletjs.com/reference.html#path) for

the buffer shapes (always used for polyline buffers; used for others iff

`separateBuffer` is `true`)