Custom MKAnnotationView location drastically changes when rotate or zoom in/out of map

Question

I've got two custom MKAnnotationViews, which display fine when they are initially added to the MKMapView.

The issue is, when rotating, or zooming out, their drawn locations seem to become more and more off. To reiterate, the closer I zoom in, the more accurate they appear, but when zooming out and rotating they are completely off. Any ideas?

Looks good (initial state):

Looks bad (and wrong):

My viewForAnnotation method is pretty basic, nothing fancy going on here.

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {


        if let annotation = annotation as? PKDriverAnnotation
            {
            let identifier = "driver"
            var annotationView: PKDriverAnnotationView
            if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) { // 2
                dequeuedView.annotation = annotation
                annotationView = dequeuedView as! PKDriverAnnotationView
            } else {
                // 3
                annotationView = PKDriverAnnotationView(annotation: annotation, reuseIdentifier: identifier)
                annotationView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(PKTransactionMapViewController.annotationViewTapped(recognizer:))))
            }

            self.driverAnnotationView = annotationView

            return annotationView
        } else if let annotation = annotation as? PKAnnotation {
            let identifier = "pin"
            var view: MKAnnotationView
            if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) { // 2
                dequeuedView.annotation = annotation
                view = dequeuedView
            } else {
                // 3
                view = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
                view.image = UIImage(named: "TransactionAnnotation")
                view.canShowCallout = false
                view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(PKHomeViewController.annotationViewTapped(recognizer:))))

                let profilePic = FBSDKProfilePictureView(frame: CGRect(x: 4, y: 4, width: 43, height: 43))
                profilePic.center = CGPoint(x: view.bounds.midX, y: profilePic.center.y)
                profilePic.profileID = self.transaction!.availableParking.holder.fbid
                profilePic.layer.cornerRadius = 21.0
                profilePic.clipsToBounds = true
                view.addSubview(profilePic)
            }

            return view
        }
        return nil
    }

Update

I suspected this was somewhat related to anchor points, and I was able to fix the "parking pin annotation views" rotation by view.layer.anchorPoint = CGPoint(x: 0.5, y: 1.0), but had no luck with driver annotation view (the one w/ the car)

Appreciate the help SO!

Answer 1

You should set the centerOffset of your MKAnnotationView. As the documentation says:

By default, the center point of an annotation view is placed at the coordinate point of the associated annotation. You can use this property to reposition the annotation view as needed. This x and y offset values are measured in points. Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.