How to implement MKAnnotationViews that rotate with the map

Question

I have an app with some annotations on it, and up until now they are just symbols that look good with the default behavior (e.g. like numbers and letters). Their directions are fixed in orientation with the device which is appropriate.

Now however I need some annotations that need to be fixed in orientation to the actual map, so if the map rotates, then the annotation symbols need to rotate with it (like an arrow indicating the flow of a river for example).

I don't want them to scale with the map like an overlay but I do want them to rotate with the map.

I need a solution that primarily works when the user manually rotates the map with their fingers, and also when it rotates due to be in tracking with heading mode.

On Google Maps (at least on android) this is very easy with a simple MarkerOptions.flat(true)

I am sure it won't be too much more difficult on ios, I hope.

Thanks in advance!

Answer 1

Here's what I used for something similar.

- (void)rotateAnnotationView:(MKAnnotationView *)annotationView toHeading:(double)heading
{
    // Convert mapHeading to 360 degree scale.
    CGFloat mapHeading = self.mapView.camera.heading;
    if (mapHeading < 0) {
        mapHeading = fabs(mapHeading);
    } else if (mapHeading > 0) {
        mapHeading = 360 - mapHeading;
    }

    CGFloat offsetHeading = (heading + mapHeading);
    while (offsetHeading > 360.0) {
        offsetHeading -= 360.0;
    }

    CGFloat headingInRadians = offsetHeading * M_PI / 180;
    annotationView.layer.affineTransform = CGAffineTransformMakeRotation(headingInRadians);
}

And then, this is called in regionDidChange etc.

Unfortunately, this solution doesn't rotate while the user is rotating the map, but it corrects itself afterwards to make sure it has the proper heading. I wrap some of the affineTransform into an animation block to make it look nice.

Hopefully this can help, or maybe help get you pointed in the right direction.