https://github.com/tcoupin/leaflet-paintpolygon
Leaflet plugin to create polygon with circle as paint
https://github.com/tcoupin/leaflet-paintpolygon
brush circle draw leaflet leaflet-paintpolygon paint polygon turf turfjs
Last synced: 7 months ago
JSON representation
Leaflet plugin to create polygon with circle as paint
- Host: GitHub
- URL: https://github.com/tcoupin/leaflet-paintpolygon
- Owner: tcoupin
- License: gpl-3.0
- Created: 2018-05-10T16:45:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-14T19:56:06.000Z (over 1 year ago)
- Last Synced: 2024-03-14T20:57:22.576Z (over 1 year ago)
- Topics: brush, circle, draw, leaflet, leaflet-paintpolygon, paint, polygon, turf, turfjs
- Language: JavaScript
- Homepage: https://tcoupin.github.io/leaflet-paintpolygon
- Size: 296 KB
- Stars: 48
- Watchers: 4
- Forks: 11
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
⚠️⚠️⚠️ This plugin is no more maintened since 2020. I am no more working with leaflet (and geographical data), I can't help you for solving bugs. ⚠️⚠️⚠️
You can use it at your own risk or fork it and change my name for yours on leaflet plugins page.
# leaflet-paintpolygon
[](https://david-dm.org/tcoupin/leaflet-paintpolygon)
[](https://www.npmjs.com/package/leaflet-paintpolygon)
[](https://www.npmjs.com/package/leaflet-paintpolygon)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Ftcoupin%2Fleaflet-paintpolygon)
Create polygon on leaflet map like Paint[brush]! Choose your brush size and draw ! Or erase...
Mobile and desktop compatible, based on [turf.js](http://turfjs.org).
[Demo](https://tcoupin.github.io/leaflet-paintpolygon)
**Turf packages are already included in dist js.**
## Use it
```
L.control.paintPolygon().addTo(map)
```
### Options
```
options: {
position: 'topright', // position of the control
radius: 30, // radius on start (pixel)
minRadius: 10, // min radius (pixel)
maxRadius: 50, // max radius (pixel)
layerOptions: {}, // path style of drawed layer (see: https://leafletjs.com/reference-1.3.0.html#path-option)
drawOptions: { // path style on draw (see: https://leafletjs.com/reference-1.3.0.html#path-option)
weight: 1
},
eraseOptions: { // path style on erase (see: https://leafletjs.com/reference-1.3.0.html#path-option)
color: '#ff324a',
weight: 1
},
menu: { // Customize menu, set to false to prevent adding control UI on map, you need to build your own UI (on map or not)
drawErase: true,
size: true,
eraseAll: true
}
}
```
### External control
Add `menu: false` in options object to prevent UI creation and bind your own UI to controls methods. See below for API and [this example](https://tcoupin.github.io/leaflet-paintpolygon/examples/2_externalcontrol.html).
## API
* `setRadius(radius)`: set radius of circle (in pixel)
* `startDraw()`: start drawing
* `startErase()`: start erasing
* `stop()`: stop drawing or erasing
* `eraseAll()`: erase all...
* `getData()`: return feature as GeoJSON
* `setData(data)`: set the feature as GeoJSON
* `getLayer()`: return [GeoJSON layer](https://leafletjs.com/reference-1.3.0.html#geojson)