Question
- Using leaflet.js I am trying to draw arc with given radius and turn direction between B and D.
JS fiddle
https://jsfiddle.net/uyLc21fm/68/
Inputs:
- start LAT LON [point B]
- end LAT LON [point D]
- radius [in nautical miles]
- turn direction [left or right]
Required Output:
- yellow arc
What I have tried so far:
Leaflet.Circle
- makes full circle not just arc par I need between B and D.
Semicircle module
- https://github.com/jieter/Leaflet-semicircle
problem is, this draws rather “pizza” shapes, not just arcs + requires to compute bearing start/end and center of circle. {I had both computed, but not I was hoping for.} + imprecision causes disconnected between A-B straight and B-C arc
Curve module
- Problem: hard to set fixed radius with this one.
//var curvedPath = L.curve(
// [
// 'M', latlng1,
// 'Q', midpointLatLng,
// latlng2
// ], pathOptions).addTo(map);
constantly curved line
- have tried this article
- https://ryancatalani.medium.com/creating-consistently-curved-lines-on-leaflet-b59bc03fa9dc
- this did not work for me – setting is approximate “curvature”. not able to set fixed radius with above..
Below I have also tried, but they shall not be necessary for drawing/final solution – thus I consider them irrelevant.
- I can compute center of arc.
- I can compute start/end bearing of turn relative to arc center.