I am using Leaflet.Draw to draw a circle.
var circle = L.circle(new L.LatLng(latitude, longitude), number, circle_options).addTo(featureGroup);
I need the coordinates of the circle as a polygon (LatLng[]
).
Is it possible?
I am using Leaflet.Draw to draw a circle.
var circle = L.circle(new L.LatLng(latitude, longitude), number, circle_options).addTo(featureGroup);
I need the coordinates of the circle as a polygon (LatLng[]
).
Is it possible?
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.
Yes, for others finding this, it is possible.
const circle = new L.Circle([3,-60], 1000000).addTo(map);
console.log(circle.getLatLng());
use .getLatLngs()
for shapes like polylines