18

Any pointers on how to draw a circle of radius, specified in meters, on top of a geographical map using D3 would be pretty helpful.

I tried to use Leaflet and it's Circle(or CircleMarker) that accepts radius in meters, but I need more flexibility to play with my data. D3 seems to be pretty helpful, but am not sure how to draw a circle of given radius on top of a map, such the circle covers an area corresponding to the given radius (and adapts to zoom and change in projection).

Bala
  • 323
  • 1
  • 2
  • 6
  • "I need more flexibility to play with my data." What do you want that leaflet can't do? – L. Sanna Jun 25 '13 at 17:37
  • Are you talking about geodesic polygons? I do not think Leaflet supports this, not without some plugin. This post may offer some help: http://gis.stackexchange.com/questions/17388/how-to-create-geodesic-polygons-in-openlayers . It's related to OpenLayers, but the logic could work here too. – Patrick D Jun 25 '13 at 19:03
  • In D3 you would have a geographic projection that tells it how to translate world coordinates into map coordinates. You can then use this to figure out the map radius of a circle at a specific position. – Lars Kotthoff Jun 25 '13 at 19:57
  • @PatrickD My data points are basically circles with radius specified in metres. I thought Leaflet's L.Circle supports this. – Bala Jun 25 '13 at 20:15
  • 1
    Leaflet's circle already do what you want. What's your problem? – L. Sanna Jun 25 '13 at 20:51
  • @LSA problem is that I would need to vary the radius depending on other parameters dynamically. Hence, the need for D3. However, I'm not sure how I can go about using D3, here. – Bala Jun 25 '13 at 20:55
  • OK. So you don't care about geodesic circles. You care about dynamically changing the radius? How about using `L.Circle.setRadius()` whenever you need to do so? – Patrick D Jun 26 '13 at 12:37

1 Answers1

50

You can pass these radii in meters using the latest version of Leaflet. The radius will change relative to zoom levels.

Here's some more information via Leaflet's documentation

L.circle([lat,lng], radius).addTo(map);
dresende
  • 2,211
  • 1
  • 16
  • 25
geraldarthur
  • 1,494
  • 1
  • 12
  • 19