3

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?

1
  • what do you mean 'coordinates of the circle as polygon'? Do you want a bounding box that contains the circle? Commented Dec 18, 2014 at 16:42

2 Answers 2

4

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.

2
  • Thank you for the response I figured it out using GeoDjango I found the same function that uses the coordinates and circle radius to perform the search.
    – Khalifa
    Commented Dec 25, 2014 at 15:07
  • 1
    you may want to add details as an answer, so other people can find your solution in the future
    – toms
    Commented Dec 25, 2014 at 22:32
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.