Drawing a half-circle on a map?

Kristin Henry
Oct 29, 2020

I want to draw a half circle. It should be simple. What am I missing?

Here’s a simple circle drawn with Leaflet on a Mapbox map:

L.circle((lat, lon), {
color: ‘#9fb391’,
weight: 0.8,
fillColor: ‘grey’,
radius: 50
}).addTo(map);

Much like circle, I should be able to draw an arc on the canvas overlay.

L.arc((lat, lon), {
color: ‘#9fb391’,
weight: 0.8,
fillColor: ‘grey’,
radius: 50,
startAngle: 0,
endAngle: Math.Pi*2,
}).addTo(map);

So, is this implemented in Leaflet? If so, what are the names used for ‘startAngle’ and ‘endAngle’ in that implementation?

If it’s not, where would I find ‘source code’ for the Leaflet implementation of L.circle, L.polyline, and more. With that, I can implement the function myself and minimize code complexity in my mapping code.

Indeed! It is a very nice plugin! Hurray!

And this is what I was able to do with it. Upper half of a circle represents the time it took for my letter to arrive at that destination. If there is…

--

--

Kristin Henry
Kristin Henry

Written by Kristin Henry

Generative and Data Artist. Creative Coder. Data Visualization Consultant. Founder of GalaxyGoo. http://kristinhenry.github.io/ Admin on vis.social