CODEWITHSUNDEEP
iosiphonemkmapviewcalayermkannotationview
jonypz
jonypz

Reputation: 1555

How to add custom transparent MKAnnotation to MKMapView?

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

enter image description here

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?

Upvotes: 2

Views: 2626

Answers (2)

Mehul Patel
Mehul Patel

Reputation: 23053

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;
}

enter image description here

Upvotes: 5

Seb OH
Seb OH

Reputation: 835

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 :)

Upvotes: 0

Related Questions