How to click a button and start a new polygon without using the Leaflet.draw UI
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>
Answer
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