Leaflet draws a circle using SVG. For example:
new L.Circle([3,-60], 1000000).addTo(map)
Results in the following html:
<path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="#0033ff" fill-opacity="0.2" class="leaflet-clickable" d="M823,-88A205,205,0,1,1,822.9,-88 z"></path>
My guess is that there is no direct way to access the "coordinates" through Leaflet - this is done in the browser with SVG from a center point and a radius.
If you need access to coordinates, you could approximate a circle with a L.Polygon, using the following code adapted from here:
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
function drawCirclePoly(lng, lat, radius, map)
{
var points = 32;
// find the radius in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(lat * d2r);
var extp = new Array();
for (var i=0; i < points+1; i++) // one extra here makes sure we connect the
{
var theta = Math.PI * (i / (points/2));
ex = lng + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ey = lat + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new L.LatLng(ey, ex));
}
// print the lat-lng array to the console
console.log(extp);
// add the circle to the map
circlepoly = new L.Polygon(extp).addTo(map);
}
drawCirclePoly(-60, -3, 100, map);
Note radius is in miles in this example. Increase or decrease the number of points as needed.
Your events are propagating to the map. Leaflet provides DomEvent methods to prevent this, for example (using jQuery):
$('div').each(function () {
L.DomEvent.on(this,'mousedown',L.DomEvent.stop);
L.DomEvent.on(this,'click',L.DomEvent.stop);
L.DomEvent.on(this,'touchstart',L.DomEvent.stop);
});
UDPATE
Based on comments below, the following should also work in place of the code above:
L.DomEvent.disableClickPropagation();
Reference: http://leafletjs.com/reference.html#domevent-disableclickpropagation
Best Answer
Simply trigger a
"click"event on the "Draw a polygon" toolbar button (it has a specific class "leaflet-draw-draw-polygon"):Demo: http://playground-leaflet.rhcloud.com/zaze/1/edit?html,output