Mapbox Annotation Image centering

Question

I started using MapBox in a project. When I am adding annotation with custom images, it is not centered correct. It is appears little bit lower of the original pins. Is it possible to change center point of the annotation image?

How it should be:

How it stands now:

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation {
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"driverPinId"];

    if (!annotationImage) {
        UIImage *image = [UIImage imageNamed:@"DriverPin"];
        annotationImageWithImage:image reuseIdentifier:@"driverPinId"];
    }

    return annotationImage;
}

Answer 1

You should use MGLAnnotationView instead of MGLAnnotationImage because MGLAnnotationView a descendant of UIView so you can add to it anything you want as with ordinary UIView.

func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
    guard annotation is MGLPointAnnotation else {
        return nil
    }
    guard let castAnnotation = annotation as? MapPointMarker else {
        return nil
    }
    if (!castAnnotation.willUseImage) {
        return nil;
    }

    let identifier = castAnnotation.imageName!
    var image: UIImage = UIImage(named: castAnnotation.imageName!)!

    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)

    if annotationView == nil {
        annotationView = MGLAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        let imageView = UIImageView(image: image)
        annotationView!.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)
        annotationView?.addSubview(imageView)
        annotationView?.centerOffset = CGVector(dx: 0, dy: -image.size.height / 2.0)
    }

    return annotationView
}

In code snippet above I've adding UIImageView to annotationView and with annotationView?.centerOffset = CGVector(dx: 0, dy: -image.size.height / 2.0) move image up.

Hope this help.

Answer 2

You just need to adjust the center offset of MKAnnotationView according to your image size.

Edit : you can also check the MapBox Document Example and description here

As Document says:

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation
{
    // Try to reuse the existing ‘pisa’ annotation image, if it exists
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"pisa"];

    // If the ‘pisa’ annotation image hasn‘t been set yet, initialize it here
    if ( ! annotationImage)
    {
        // Leaning Tower of Pisa by Stefan Spieler from the Noun Project
        UIImage *image = [UIImage imageNamed:@"pisavector"];

        // The anchor point of an annotation is currently always the center. To
        // shift the anchor point to the bottom of the annotation, the image
        // asset includes transparent bottom padding equal to the original image
        // height.
        //
        // To make this padding non-interactive, we create another image object
        // with a custom alignment rect that excludes the padding.
        image = [image imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, image.size.height/2, 0)];

        // Initialize the ‘pisa’ annotation image with the UIImage we just loaded
        annotationImage = [MGLAnnotationImage annotationImageWithImage:image reuseIdentifier:@"pisa"];
    }

    return annotationImage;
}

Answer 3

You just need to adjust image by doubling the height of the image. I checked and it worked perfectly.

// Adjust image by doubling the height of the image
- (UIImage *)adjustImage:(UIImage *)image {

    CGSize newSize = CGSizeMake(image.size.width, image.size.height * 2);
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0);

    [image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return newImage;
}

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation {
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"driverPinId"];

    if (!annotationImage) {
        UIImage *image = [UIImage imageNamed:@"DriverPin"];

        // The anchor point of an annotation is currently always the center. To
        // shift the anchor point to the bottom of the annotation, the image
        // asset includes transparent bottom padding equal to the original image
        // height.
        image = [self adjustImage: image];

        // To make this padding non-interactive, we create another image object
        // with a custom alignment rect that excludes the padding.
        image = [image imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, image.size.height/2, 0)];

        // Initialize the ‘DriverPin’ annotation image with the UIImage we just loaded.
        annotationImage = [MGLAnnotationImage annotationImageWithImage:image reuseIdentifier:@"driverPinId"];
    }

    return annotationImage;
}