CODEWITHSUNDEEP
javascriptleafletpaint
Hamid Reza Moaddeli
Hamid Reza Moaddeli

Reputation: 3

Leaflet, How to draw a shape like paint(brush)

I try to use this plugin https://github.com/tcoupin/leaflet-paintpolygon for image annotation in multipoint circle-shape. but this plugin does not work properly due to a bug in libraries used in it. Is there any other solution to do this in leaflet or other JS libraries? Thanks

Upvotes: 0

Views: 1637

Answers (2)

Mario Monterde
Mario Monterde

Reputation: 21

You can try 'Leaflet.draw' library (https://github.com/Leaflet/Leaflet.draw), this plugin allows to create polygons and lines:

Example in image

Upvotes: 0

treecon
treecon

Reputation: 2835

If you just want a free-hand tool, you can create it without any plugin or library. With the following code, you can start or stop a free-hand paint with a click.

let paintMode = false;
var myPolyline;

map.on('click', function() {
  paintMode = !paintMode;
  if (paintMode) {
    myPolyline = L.polyline([]).addTo(map);
  }
})

map.on('mousemove', function(e) {
  if (paintMode) {
    myPolyline.addLatLng(e.latlng);
  }
})

Here is a working jsfiddle: https://jsfiddle.net/5drknva4/

Upvotes: 5

Related Questions