How to Rotate Custom Userlocationannotationview Image Using Mapkit in Swift

How to rotate custom userLocationAnnotationView image using MapKit in swift?

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.

Custom bearing roatation for mapview

Just introduce property and store the new value from the start. Then, when user pushes the button rotate the map from stored value.

    var knownHeading: CLHeading
var buttonPushed = false

func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
if buttonPushed {
mapView.animate(toBearing: newHeading.magneticHeading)
} else {
knownHeading = newHeading
}
}

@IBAction func buttonPushed() {
mapView.animate(toBearing: knownHeading.magneticHeading)
buttonPushed = true

//your other code here
}

How to rotate image based on angle in Swift?

Try the following code in the delegate method to rotate your image.

    let oldRad:Float = 1.259374
let newRad:Float = 1.239832

let theAnimation = CABasicAnimation(keyPath: "transform.rotation")

theAnimation.fromValue = NSNumber(float: oldRad)
theAnimation.toValue = NSNumber(float: newRad)

theAnimation.duration = 0.2

self.compassImage!.layer.addAnimation(theAnimation, forKey: "animateMyRotation")

self.compassImage!.transform = CGAffineTransformMakeRotation(CGFloat(newRad))


Related Topics



Leave a reply



Submit