KamilDwo / leaflet-paintpolygon

Leaflet plugin to create polygon with circle as paint

Home Page:https://tcoupin.github.io/leaflet-paintpolygon

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

leaflet-paintpolygon

Dependency Status npm npm Twitter

Create polygon on leaflet map like Paint[brush]! Choose your brush size and draw ! Or erase... Mobile and desktop compatible, based on turf.js.

Demo

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

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

About

Leaflet plugin to create polygon with circle as paint

https://tcoupin.github.io/leaflet-paintpolygon

License:GNU General Public License v3.0


Languages

Language:JavaScript 68.1%Language:HTML 19.4%Language:CSS 12.5%