Why is my polyline on the wrong bearing?

I am trying to overlay duplicate segments of polylines on a map via javascript. I am using latlon.js and geo.js from here

The idea is that a user can input the distance they have travelled and when the map is refreshed, a second multipolyline will be added. To calculate the the point which represents where the user currently is, I am using a known previous location and known 'next location' to calculate a bearing between the two and then using that bearing, combined with the distance the user has travelled to calculate where they are now, before finally creating a new polyline based on that data.

The problem is that this new polyline is drawn incorrectly on my map and I don't understand why. You can see the problem at [removed]. Log in as User2/pass2 and then select 'challenges' from the nav bar. The most relevant code from map.js follows. I am using leaflet maps.

``````  var userDistance = GymloopChallenge.user_distance;
var lastPoint;
var comparisonArr = []; //used to calculate bearing
if (userDistance <= dist1) {
comparisonArr = [rioLL,laLL];
userPoly = [];
lastPoint = rioLL;
console.log('if 1');

} else if(userDistance >= dist1 && userDistance <= dist2 ) {
comparisonArr = [laLL,nyLL];
distToAdd = Math.abs(dist2 - userDistance);
userPoly = [line5];
lastPoint = laLL;
console.log('if 2');
} else if (userDistance > dist2 && userDistance <= dist3) {
comparisonArr = [nyLL,lonLL];
distToAdd = Math.abs(userDistance - dist3);
userPoly = [line5, line1];
lastPoint = nyLL;
console.log('if 3');
} else if (userDistance > dist3 && userDistance <= dist4) {
comparisonArr = [lonLL,sydLL];
distToAdd = Math.abs(userDistance - dist4);
userPoly = [line5,line1,line2];
lastPoint = lonLL;
console.log('if 4');
} else if (userDistance > dist4 && userDistance <= dist5) {
comparisonArr = [sydLL,tokLL];
distToAdd = Math.abs(userDistance - dist5);
userPoly = [line5,line1,line2,line3];
lastPoint = sydLL;
console.log('if 5');
}

//console.log("COmparison array: "+comparisonArr);
var bearing = comparisonArr[0].finalBearingTo(comparisonArr[1]);
var userLocation = lastPoint.destinationPoint(bearing, distToAdd);
//console.log(userLocation);

userLineStartPoint = new L.LatLng(lastPoint._lat,lastPoint._lon );
userLocationMapPoint = new L.LatLng(userLocation._lat,userLocation._lon );
userPoly.push(new Array(userLineStartPoint ,userLocationMapPoint));
console.log(userPoly);
var userPolyline = new L.MultiPolyline(userPoly, {
color: 'red',
id:'poly2',
weight: 3,
opacity: 0.8

});
``````
-

Because you're only dealing with a simple representation of a journey between world cities, and straight lines are easy to draw, you need to use loxodromic calculations. Luckily latlon.js provides just the functions you need: `rhumbDistanceTo()`, `rhumbBearingTo()`, and `rhumbDestinationPoint()`, which should be drop-in replacements for the functions you are already using.