rhumb-arc

HTML

<script src="https://npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<div id="output"></div>

JavaScript

const p1 = turf.point([-122.3811441, 37.6213129]);
const p2 = turf.point([-118.4107187, 33.9415889]);

const bearingToCenter = turf.rhumbBearing(p1, p2)

const midPoint = turf.point(calcMidPoint(p1.geometry.coordinates, p2.geometry.coordinates));
const arcRadius = 1000;

const arc = lineArc(midPoint, 5, 360 - bearingToCenter, bearingToCenter, {units: 'kilometers'});

display(arc);
display(p1, 'one');
display(p2, 'two');

function calcMidPoint(p1, p2) {
return [((p1[0] + p2[0]) / 2), ((p1[1] + p2[1]) /2)]
}


/* output function */
function display(data, target) {
	target = target || 'output';
  var el = document.getElementById(target);
  // if not available create target element
  if (!el) {
  	el = document.createElement('div');
    el.setAttribute("id", target);
    document.body.appendChild(el);
  }
  // inject text
	var json = JSON.stringify(data, null, '\t');
  document.getElementById(target).innerHTML = json;
}


function lineArc(center, radius, bearing1, bearing2, options) {
    // Optional parameters
    options = options || {};
    if (!turf.isObject(options)) throw new Error('options is invalid');
    var steps = options.steps;
    var units = options.units;

    // validation
    if (!center) throw new Error('center is required');
    if (!radius) throw new Error('radius is required');
    if (bearing1 === undefined || bearing1 === null) throw new Error('bearing1 is required');
    if (bearing2 === undefined || bearing2 === null) throw new Error('bearing2 is required');
    if (typeof options !== 'object') throw new Error('options must be an object');

    // default params
    steps = steps || 64;

    var angle1 = turf.bearingToAzimuth(bearing1);
    var angle2 = turf.bearingToAzimuth(bearing2);
    var properties = center.properties;

    // handle angle parameters
    if (angle1 === angle2) {
        return turf.lineString(turf.circle(center, radius, options).geometry.coordinates[0], properties);
    }
    var arcStartDegree = angle1;
    var...