How to use center and lineArc to draw a curved line from PointA and PointB ?

I’m using a Layer and a Feature from react-mapbox-gl to draw a line from point to point B` ( see screenshot 1)

My goal is to use line-arc and center from turf js in order to have a curved line between point A and point B

I managed to get a curved line, but it’s not starting at Point A and it’s not finishing at Point B… it is instead drawn in the middle of the map (see screenshot number 2)

Here is my code

     const features = turf.featureCollection([
       turf.point(this.state.startFlying),   // [-122.3811441, 37.6213129]
       turf.point(this.state.destinationFlying),  // [-118.4107187, 33.9415889]
     ]);

    const theCenter = turf.center(features);
    const arcRadius = 5;
    const bearing1 = 25;
    const bearing2 = 47;

    const arc = turf.lineArc(theCenter, arcRadius, bearing1, bearing2);
    const mappedCurvedFlyingCurve = arc.geometry.coordinates;

[savy-91]

Here is how I did it:

drawArc(id: string, start: UniversalPlace, finish: UniversalPlace) {
    let route: LineString = {
      type: 'LineString',
      coordinates: [
        [start.longitude, start.latitude],
        [finish.longitude, finish.latitude]
      ]
    };
    route = projection.toWgs84(route);
    const lineD = lineDistance(route, {units: 'kilometers'});
    const mp = midpoint(route.coordinates[0], route.coordinates[1]);
    const center = destination(
      mp,
      lineD,
      bearing(route.coordinates[0], route.coordinates[1]) - 90
    );
    const lA = lineArc(
      center,
      distance(center, route.coordinates[0]),
      bearing(center, route.coordinates[1]),
      bearing(center, route.coordinates[0])
      );
    this.mapView.addLayer(
      {
        id,
        type: 'line',
        source: {
          type: 'geojson',
          data: projection.toMercator(lA)
        },
        paint: {
          'line-width': 4,
          'line-color': '#FCA526'
        }
      }
    );
  }

Example of the result:

[stebogit]

@crevulus I believe the issue is, once again, projection/spherical distortion, i.e. working with euclidean (plane) distance and bearing instead of Rhumb functions. In your case the distances are so big, compared to @savy-91’s example, that the final result is way off.

Look at this example, I believe it works much better, although still not 100% accurate:

const start = [-118.30078125, 33.925129700072]; // LA
const end = [-157.6318359375, 20.92039691397189]; // Hawaii
// rhumb functions
const radius = turf.rhumbDistance(start, end);
const midpoint = turf.midpoint(start, end);
const bearing = turf.rhumbBearing(start, end) - 89; // <-- not 90˚
const origin = turf.rhumbDestination(midpoint, radius, bearing);

const curvedLine = turf.lineArc(
  origin,
  turf.distance(origin, start),
  turf.bearing(origin, end),
  turf.bearing(origin, start),
  { steps: 128 }
);