Center an MKAnnotation in a specific MKMapRect

Question

I'm attempting to center an annotation/coordinate within a given MKMapRect. I started by creating the rect which is the visible area between the mapview and another view. This rect is then converted to a rect proportional to the map view in order that it be displayed correctly. I then set the annotation to be displayed in the top left, for testing purposes.

if let annotation = annotation {

    let visibleRect = CGRectMake(0, 0, CGRectGetWidth(mapView.frame), CGRectGetMinY(stackViewController.view.frame))
    let convertedRect = mapView.convertRect(visibleRect, toView: mapView)
    let convertedMapRect = MKMapRectMake(Double(convertedRect.origin.x), Double(convertedRect.origin.y), Double(convertedRect.width), Double(convertedRect.height))

    let point = MKMapPointForCoordinate(annotation.coordinate)
    let pointRect = MKMapRectMake((MKMapRectGetMidX(convertedMapRect) - point.x) / 2, (MKMapRectGetMidY(convertedMapRect) - point.y) / 2, convertedMapRect.size.width, convertedMapRect.size.height)


    mapView.setVisibleMapRect(pointRect, animated: true)
    mapView.selectAnnotation(annotation, animated: true)
}

This code works perfectly, and will display the annotation in the top left as expected. However, when I try to center the annotation within that rect instead of having it in the top left, the map is centered in the sea, rather than in New York. This generally occurs because the point is invalid. Having logged the rect, it returns too small an x and y value when I perform the center calculation. I assume this is because the number of pixels hasn't correctly been converted to the map's coordinate system. Is this why, and how can I scale it?

if let annotation = annotation {

    let visibleRect = CGRectMake(0, 0, CGRectGetWidth(mapView.frame), CGRectGetMinY(stackViewController.view.frame))
    let convertedRect = mapView.convertRect(visibleRect, toView: mapView)
    let convertedMapRect = MKMapRectMake(Double(convertedRect.origin.x), Double(convertedRect.origin.y), Double(convertedRect.width), Double(convertedRect.height))

    let point = MKMapPointForCoordinate(annotation.coordinate)
    let pointRect = MKMapRectMake((MKMapRectGetMaxX(convertedMapRect) - point.x) / 2, (MKMapRectGetMaxX(convertedMapRect) - point.y) / 2, convertedMapRect.size.width, convertedMapRect.size.height)

    mapView.setVisibleMapRect(pointRect, animated: true)
    mapView.selectAnnotation(annotation, animated: true)
}

score 3 · Accepted Answer · edited May 23 '17 at 11:50

I stumbled across this post here, which massively helped: Centering MKMapView on spot N-pixels below pin.

As mentioned in the answer, you should work out the destination point by converting it out of the map view and into your view controller's view with a more or less standardised frame.

// define the rect in which to center the annotation
let visibleRect = CGRectMake(0, 0, CGRectGetWidth(view.frame), 200)

centerAnnotationInRect(someAnnotation, rect: visibleRect)

func centerAnnotationInRect(annotation: MKAnnotation, rect: CGRect) {

    guard let mapView = mapView else {
        return
    }

    let visibleCenter = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect))

    let annotationCenter = mapView.convertCoordinate(annotation.coordinate, toPointToView: view)

    let distanceX: CGFloat = visibleCenter.x - annotationCenter.x
    let distanceY = visibleCenter.y - annotationCenter.y

    mapView.scrollWithOffset(CGPoint(x: distanceX, y: distanceY), animated: true)
}

Center an MKAnnotation in a specific MKMapRect

1 Answers1