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.