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

StackOverflow https://stackoverflow.com/questions/22730888

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() {  


});

I'm able to put an existing polygon into edit mode no problem.

$('.edit_polygon').click(function() {  
    var name = $(this).text();
    geojson_layer.eachLayer(function (layer) {
        if (name == layer.feature.properties.name){                   
            layer.editing.enable();  
        }                    
    });
    return false;
});

Thanks to Jacob Toye for assistance. I've made a little demo. 

<!DOCTYPE html>
<html>
<head>
    <title>Button click</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <link rel="stylesheet" href="Leaflet.draw/dist/leaflet.draw.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="Leaflet.draw/dist/leaflet.draw.js"></script>
</head>
<body>
    <div><button id="draw_poly" onclick="drawPolygon()" >Draw Polgyon</button></div>
    <div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
    <script>        
        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
        map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(51.505, -0.04), zoom: 13});
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        map.on('draw:created', function (e) {
            var type = e.layerType,
            layer = e.layer;
            drawnItems.addLayer(layer);
        });

        polygon_options = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#6e83f0',
                weight: 4,
                opacity: 0.5,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.2,
                clickable: true
            }
        }

        function drawPolygon(){
            var polygonDrawer = new L.Draw.Polygon(map, polygon_options);     
            polygonDrawer.enable();
        }
    </script>
</body>
</html>
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top