How to click a button and start a new polygon without using the Leaflet.draw UI

Question

What I\'m struggling with is how to click a button and start a new polygon without using the Leaflet.draw UI. e.g.

$(\'#draw_poly\').click(function() {  


}         


        

Answer 1

To start drawing a shape is very straight forward. You create a handler for the type of shape you want and then enable that handler.

E.g. for drawing a polyline you would do:

// Define you draw handler somewhere where you click handler can access it. N.B. pass any draw options into the handler
var polygonDrawer = new L.Draw.Polyline(map);

// Assumming you have a Leaflet map accessible
map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    // Do whatever you want with the layer.
    // e.type will be the type of layer that has been draw (polyline, marker, polygon, rectangle, circle)
    // E.g. add it to the map
    layer.addTo(map);
});

// Click handler for you button to start drawing polygons
$('#draw_poly').click(function() {
    polygonDrawer.enable();
});

Check out the docs for more info:

"draw:created" event: https://github.com/Leaflet/Leaflet.draw#drawcreated Draw handler options: https://github.com/Leaflet/Leaflet.draw#draw-handler-options