How to rotate custom userLocationAnnotationView image using MapKit in swift?

Question

I'm trying to find a way to show the direction of the user on the map using MapKit. The native MapKit way to do that always rotate the entire map. Since user position is also an MKAnnotationView, I decided to create a specific class to override it and use a specific image (with an arrow).

class UserLocationAnnotationView: MKAnnotationView {

override init(frame: CGRect) {
    super.init(frame: frame)
}

override init(annotation: MKAnnotation!, reuseIdentifier: String!) {

    super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)

    var frame = self.frame
    frame.size = CGSizeMake(130, 130)
    self.frame = frame
    self.backgroundColor = UIColor.clearColor()
    self.centerOffset = CGPointMake(-30, -50)

}

required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)!
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
*/
override func drawRect(rect: CGRect) {
    // Drawing code
    UIImage(named: "userLocation.png")?.drawInRect(CGRectMake(65, 65, 65, 65))


}

Now I'm trying to find a way to rotate that MKAnnotationView image in the didUpdateHeading func of the locationManager.

class ViewController: UIViewController, MKMapViewDelegate, CLLocationManagerDelegate { 

var userLocationView :MKAnnotationView?

func locationManager(manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
    print(newHeading.magneticHeading)
}

The print of newHeading.magneticHeading works and it pretty accurate. Now how can I rotate my custom UserLocationAnnotationView ?

Thanks for your help.

Answer 1

I can't give you complete code examples at this point but I hope I can give you some pointers to go off on.

First, I don't think you would necessarily have to subclass MKAnnotationView. You could simply assign your UIImage to its image property. I think that would make things easier unless you do require the customization.

Now, I assume you have successfully added the annotation to the map and have a reference to it.

To rotate the heading indicator, I see three options:

1. Rotate MKAnnotationView's image property:
   • Method: When the heading changes, create a rotated copy of the UIImage and assign it to the image property. Example (not tested).
   • Con: Can't easily animate the rotation.
2. Rotate the MKAnnotationView itself:
   • Method: When the heading changes, use MKAnnotationView's/UIView's transform property. Assign an appropriate CGAffineTransform to it.
   • Pro: Easiest
   • Con: Also rotates the detail/callout views. If you need these, this will not be an option for you.
3. Put the UIImage into a UIImageView and add that one as a subview to MKAnnotationView:
   • Method: Similar to 2. but use the transform property on the UIImageView directly not on the MKAnnotationView itself. This way callout views are not rotated.
   • Pro: Should work well.
   • Con: A bit more work.

What you also need:

• A function to convert from degrees to radians. The affine transformations require radians.
• If you want to animate the rotation (except for 1.) wrap the change to the transform property in UIView's static animate method.