drawing circle with radius specified in meters on a map

javascript d3.js leaflet mapbox
Bala picture Bala · Jun 25, 2013 · Viewed 30.2k times · Source

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

Answer

geraldarthur picture geraldarthur · Dec 9, 2013

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

Related questions

How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More
Resize svg when window is resized in d3.js

I'm drawing a scatterplot with d3.js. With the help of this question : Get the size of the screen, current web page and browser window I'm using this answer : var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(…

Read More
D3 Appending Text to a SVG Rectangle

I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should …

Read More