drawing circle with radius specified in meters on a map

16
votes

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).

1
javascriptd3.jsleafletmapbox
"I need more flexibility to play with my data." What do you want that leaflet can't do? – L. Sanna
Are you talking about geodesic polygons? I do not think Leaflet supports this, not without some plugin. This post may offer some help: gis.stackexchange.com/questions/17388/… . It's related to OpenLayers, but the logic could work here too. – Patrick D
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
@PatrickD My data points are basically circles with radius specified in metres. I thought Leaflet's L.Circle supports this. – Bala
Leaflet's circle already do what you want. What's your problem? – L. Sanna

1 Answers

44
votes

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);