[GIS] Leaflet Draw – Get Circle extent

leafletleaflet-draw

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?

Best Answer

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.

Related Question