How to add custom transparent MKAnnotation to MKMapView?

Question

So I am trying to replicate the following scenario (translucent annotation views) :

And I have tried unsuccessfully the following implementations:

1- Creating a custom image with 30% opacity and adding to the map ---> Result: The image stays opaque.

Code:

-(id)initWithAnnotation:(id<MKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier{

self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
if (self) {

    LLAnnotation *myA = (LLAnnotation*) annotation;

    self.accessibilityLabel = myA.title;
    self.annotation = myA;
    self.enabled = YES;
    self.canShowCallout = YES;

    self.centerOffset = CGPointMake(5,-10);

    self.backgroundColor = [UIColor yellowColor];

    self.image = [UIImage imageNamed:@"circle"];
}

return self;

}`

And then adding it in - (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id )annotation_

2- Adding a sublayer to the AnnotationView and clearing it ---> Result: Doesn't show any annotation.

Code:

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

    if (annotation_ == mapView.userLocation) return nil;

    MKAnnotationView *m = [[MKAnnotationView alloc] initWithAnnotation:annotation_ reuseIdentifier:@"default"];

//    m.backgroundColor = [UIColor clearColor];

    CALayer *layer = [[CALayer alloc]init];

    layer.frame = m.frame;

    layer.backgroundColor = [UIColor lightGreenColor].CGColor;

    [m.layer addSublayer:layer];

    m.layer.cornerRadius = m.frame.size.width/2;
    m.layer.borderWidth = 2;
    m.layer.masksToBounds = YES;

    return m;
}

I was thinking that adding MKOverlays on top of annotations maybe a workaround but it shouldn't be the way to go I believe.

Does anyone have other suggestions on how to implement this?

Answer 1

Create UIImageView object and make it looks like the image you required.

Add as subview of annotationView in viewForAnnotation delegate method will do the trick.

Also you need to set center position offset for annotation image to render annotation exactly correct position of location.

Have look on below code:

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

    if (annotation_ == mapView.userLocation) return nil;

    MKAnnotationView *m = [[MKAnnotationView alloc] initWithAnnotation:annotation_ reuseIdentifier:@"default"];

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(m.center.x, m.center.y, 20, 20)];
    [imageView setBackgroundColor:[UIColor colorWithRed:0.7294 green:0.7843 blue:0.1921 alpha:1.0]];

    imageView.layer.cornerRadius = imageView.frame.size.width / 2;
    imageView.alpha = 0.6f;
    [m addSubview:imageView];

    // Also set center offset for annotation  
    [m setCenterOffset:CGPointMake(-10, -20)];

    return m;
}

Answer 2

What I would do is create an image in photoshop which has a transparent background, and then add your desired yellow circle on top. Then make the opacity of that circle to what ever opacity you want. Save the image as a PNG.

Once you have saved the image, add it to your Xcode project. Once you've added it, add the following line under your viewForAnnotation .

annotationView.image = [UIImage imageNamed:@"ThisIsThePNGImagesName.png"];

Hope that helps :)