Animated directional arrows "aroundMe" style using ngCordova

It's hard to give a plain answer to this question because a lot depends on the actual graphical representation. For instance, in what direction do you point where rotate(0deg).

I can explain the formula you've found, which might help you to clear the issue yourself. The hard part is the following:

  var dLon = (lng2 - lng1);  var y = Math.sin(dLon) * Math.cos(lat2);  var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);  var rad = Math.atan2(y, x);

What you see here is Haversines formula (https://en.wikipedia.org/wiki/Haversine_formula). Normally one could suffice with two sets of coordinates and calculate the angle between them. When working with latitude and longitude this will not work because the earth is not a flat surface. The first three lines are Haversine and the result (x and y) are coordinates on the unit circle (https://en.wikipedia.org/wiki/Unit_circle)

The next step is to calculate the angle from the point on this unit circle to the center. We can use the arctangant for this. Javascript has a helper function atan2 which simplifies this process. The result is simple the angle of your point towards the center of the circle. In other words, your position towards your point of interest. The result is in radians and needs to be converted to degrees. (https://en.wikipedia.org/wiki/Atan2)

A simplified version with a flat coordinate system would look like this:

var deltaX = poi.x - you.x;var deltaY = you.y - poi.y;var rotation = toDeg(Math.atan2(deltaX, deltaY));bearingElement.css('transform', 'rotate(' + rotation + 'deg)');

Where poi is the Point of Interest and you is your position.

To compensate for your own rotation, you need to substract your own rotation. In the above sample the result would become:

var deltaX = poi.x - you.x;var deltaY = you.y - poi.y;var rotation = toDeg(Math.atan2(deltaX, deltaY));rotation -= you.rotation;bearingElement.css('transform', 'rotate(' + rotation + 'deg)');

I've made a Plunckr in which you can see a simple flat coordinate system. You can move and rotate you and the point of interest. The arrow inside 'you' will always point towards the poi, even if you rotate 'you'. This is because we compensate for our own rotation.

https://plnkr.co/edit/OJBGWsdcWp3nAkPk4lpC?p=preview

Note in the Plunckr that the 'zero'-position is always to the north. Check your app to see your 'zero'-position. Adjust it accordingly and your script will work.

Hope this helps :-)