MKPinAnnotationView not centered

Question

After uploading a custom image for the MKPinAnnotationView, I noticed that the pin was off-centered. The pin is supposed to be on a point on the route's polyline, and in the center of an mkcircle; however, the pin seems to be to the right of the polyline and a little north of the center. I tried experimenting with the centerOffset property, but when I plug values into the property, nothing seems to change. Here is the code,

-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation{

static NSString *viewID = @"MKPinAnnotationView";
MKPinAnnotationView *annotationView = (MKPinAnnotationView*)
[self.mapView dequeueReusableAnnotationViewWithIdentifier:viewID];

if(annotationView ==nil){
    annotationView = [[MKPinAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:viewID];
}


annotationView.image = [UIImage imageNamed:@"Pin.png"];
annotationView.enabled = YES;

//doesn't move the pin, still offcentered
annotationView.centerOffset = CGPointMake(0,-50);
return annotationView;
 }

Just something to add, I also noticed that with the new pin image, nothing pops up when I click on the pin. Before, with the default pin, a bubble of text would appear after clicking on the pin. Since this is the case, I want to include the code for the method that makes and places the pin on the map,

-(void) createAndAddAnnotationForCoordinate : (CLLocationCoordinate2D)coordinate{

MKPointAnnotation* annotation = [[MKPointAnnotation alloc]init];
annotation.coordinate = coordinate;
annotation.title = @"This is a pin!";

[mapView addAnnotation:annotation];


}

I also tried changing the pin image to see if that would influence the positioning of the MKPinAnnotationView. Although I was able to center the pin by editing the image, it isn't centered for other polylines. Any help would be appreciated!

Answer 1

First, an important point is that when using a custom annotation image, it's best to use the plain MKAnnotationView class instead of its subclass MKPinAnnotationView which is designed to automatically display a standard pin image.

This is because MKPinAnnotationView includes some built-in adjustments of the annotation view's frame and centerOffset based on its own pin image. In some cases, your custom image will even be replaced on the screen with the default pin image. So even though MKPinAnnotationView has an image property, the class will not always use it as expected.

Second, set the centerOffset such that as the map is zoomed, the part of the image that "points" to the coordinate keeps pointing to the coordinate. This is because the centerOffset is in screen CGPoints and does not scale with the zoom level of the map. If the centerOffset is not set properly, the "point" of the image will start to drift from the target coordinate.

Also note you may not even need to set centerOffset since the default will put the center of the image at the coordinate which you may be ok with.

Based on the image you posted, here is the code and resulting appearance without setting centerOffset (leaving it at the default):

-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation{

    static NSString *viewID = @"MKPinAnnotationView";

    MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:viewID];

    if (annotationView ==nil) {
        annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:viewID];
        annotationView.image = [UIImage imageNamed:@"Pin.png"];
        annotationView.canShowCallout = YES;
    }
    else {
        annotationView.annotation = annotation;
    }

    return annotationView;
}

(I added the red center lines to show where the target coordinate is relative to the pin image.)

Here is the code and resulting appearance with centerOffset set so that the bottom points to the coordinate:

-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation{

    static NSString *viewID = @"MKPinAnnotationView";

    MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:viewID];

    if (annotationView ==nil) {
        annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:viewID];
        annotationView.image = [UIImage imageNamed:@"Pin.png"];
        annotationView.canShowCallout = YES;
        annotationView.centerOffset = CGPointMake(0,-15);
    }
    else {
        annotationView.annotation = annotation;
    }

    return annotationView;
}

Answer 2

You have to set MKCoordinateRegion to load the map, edit your createAndAddAnnotationForCoordinate method as below

-(void) createAndAddAnnotationForCoordinate : (CLLocationCoordinate2D)coordinate{

MKCoordinateRegion viewRegion = MKCoordinateRegionMakeWithDistance(coordinate, 3000, 3000); //Set zooming level
    MKCoordinateRegion adjustedRegion = [mapView regionThatFits:viewRegion]; //add location to map
    [mapView setRegion:adjustedRegion animated:YES]; // create animation zooming

MKPointAnnotation* annotation = [[MKPointAnnotation alloc]init];
annotation.coordinate = coordinate;
annotation.title = @"This is a pin!";

[mapView addAnnotation:annotation];


}