How to rotate the navigation image according to the user direction in MKMapView?

Question

I would like to show the user's current location while toggling Location mode on Free Ride in the Simulator. It's working fine, but take a look at the image below:

I want this image to rotate as the direction of the route changes. How can I do that? Here you can download the project. I have not implemented route on the below project, I only changed the arrow's direction towards the route.

Answer 1

If I understand your question correctly, you want your arrow to be aligned with the path drawn in the map, at every position on the path.

What I'd do is create a CAKeyframeAnimation with its path property set to the path on the map, and its rotationMode set to kCAAnimationRotateAuto. Add this animation to an image view containing the arrow.

Once you've added the animation, set the imageView.layer.speed = 0 and control imageView.layer.timeOffset to move the arrow. This value goes from 0 to 1, and interpolates it to a position on the path.

CoreAnimation will now automatically rotate the view in a tangential direction to the path at every point.