leaflet.js – how to draw leaflet arc using – start point, end point, radius and turn direction?

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/

example

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

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.