MKPinAnnotationView: Are there more than three colors available?

Question

According to the Apple docs, MKPinAnnotationView's pin color is available in red, green and purple. Is there any way to get other colors also? I've found nothing in the docs.

Indole

You could use ZSPinAnnotation to create annotation pins on the fly with a specified UIColor: github.com/nnhubbard/ZSPinAnnotation – Mama

Answer 1

You might find the following images useful:

and the code to use them in viewForAnnotation:

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>) annotation
{   
    // ... get the annotation delegate and allocate the MKAnnotationView (annView)
    if ([annotationDelegate.type localizedCaseInsensitiveCompare:@"NeedsBluePin"] == NSOrderedSame)
    {
        UIImage * image = [UIImage imageNamed:@"blue_pin.png"];
        UIImageView *imageView = [[[UIImageView alloc] initWithImage:image] autorelease];
        [annView addSubview:imageView];
    }
    // ...

Electrostatic

No problem. Glad you found them useful. – Electrostatic

Answer 2

some more ;)

And the original ones :

And the code:

- (MKAnnotationView*)mapView:(MKMapView*)mapView viewForAnnotation:(id <MKAnnotation>)annotation {
MKPinAnnotationView* anView =[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"test"];
anView.pinColor=MKPinAnnotationColorPurple;
UIImage* image = nil;
// 2.0 is for retina. Use 3.0 for iPhone6+, 1.0 for "classic" res.
UIGraphicsBeginImageContextWithOptions(anView.frame.size, NO, 2.0);
[anView.layer renderInContext: UIGraphicsGetCurrentContext()];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData* imgData = UIImagePNGRepresentation(image);
NSString* targetPath = [NSString stringWithFormat:@"%@/%@", [self writablePath], @"thisismypin.png" ];
[imgData writeToFile:targetPath atomically:YES]; 
return anView;
}

-(NSString*) writablePath {
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
return documentsDirectory;
}

Counterattraction

Hi, how did you get the original pins? Thanks. Are there @2x versions available? – Brame

I ran a piece of code in the simulator that writes the UIImage to the file system using UIImagePNGRepresentation(yourImage). Image -> NSData -> fileSystem. I don't have the @2x versions available :/ – Counterattraction

matt, I added the retina display for the pins. and also the code used to render them. – Counterattraction

The image link is broken. You can please fix 'em? Danke – N

strange because you are right, some time ago the links were broken BUT right now I can see them back .... :/ Don't you see them ? – Counterattraction

strange, now I don't see them again :( what's happening with imagur.com ? – Counterattraction

Is there anything that can be done so that the pin drop animation doesnt cause the original color to show when it touches down? – Woven

Do you have a retina sized image for the yellow pin? – Tetreault

Can you by chance also post the hi-res images for the orange and gray ones? – Darnley

@Counterattraction Thank you so much! How do you create these? – Darnley

@DeanLeitersdorf actually I get the original Apple ressource from the pasted code here and then I manually adjust the color of the top part of the pin using photoshop – Counterattraction

I've added a github repo extracting some of the common colors. github.com/StevenTso/MKPinAnnotationViewColoredPins – Zerk

Answer 3

You could use ZSPinAnnotation to create annotation pins on the fly with a specified UIColor: https://github.com/nnhubbard/ZSPinAnnotation

Mama

Hey @Nic-Hubbard - thanks for sharing the code. Is the reason you wouldn't add this as a category on MKAnnotation to let you set pinView.image = [MKAnnotation pinAnnotationWithColor:a.color] – Triplenerved

@Triplenerved No reason really, I guess I didn't think about it at the time! – Mama

Answer 4

I like Yonel's Answer but just a heads up, when you create a custom MKAnnotationView, you'll have to manually assign the offset. For the images Yonel provided: (you can leave out the calloutButton stuff if you don't need one of those)

#pragma mark MKMapViewDelegate
- (MKAnnotationView *)mapView:(MKMapView *)aMapView viewForAnnotation:(id <MKAnnotation>)annotation
{
    if(![annotation isKindOfClass:[MyAnnotation class]]) // Don't mess user location
        return nil;

    MKAnnotationView *annotationView = [aMapView dequeueReusableAnnotationViewWithIdentifier:@"spot"];
    if(!annotationView)
    {
        annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"spot"];
        annotationView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
        [(UIButton *)annotationView.rightCalloutAccessoryView addTarget:self action:@selector(openSpot:) forControlEvents:UIControlEventTouchUpInside];
        annotationView.enabled = YES;
        annotationView.canShowCallout = YES;
        annotationView.centerOffset = CGPointMake(7,-15);
        annotationView.calloutOffset = CGPointMake(-8,0);
    }

    // Setup annotation view
    annotationView.image = [UIImage imageNamed:@"pinYellow.png"]; // Or whatever

    return annotationView;
}

Falconet

By the way, if the annotationView successfully dequeues the annotation view, you need to update its annotation property. E.g., you'd generally have a if (!annotationView) { ... } else { annotationView.annotation = annotation; }. – Pomelo

Answer 5

And here is the PSD for the pin with shadow and its in @2x size.

http://dl.dropbox.com/u/5622711/ios-pin.psd

Use this PSD for any color you want :)

I take no credit for this PSD. I just grabbed it from http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/ They have done a wonderful job!

Delozier

Answer 6

With iOS 9, pinTintColor has been added to MKPinAnnotationView, allowing you to supply a UIColor for the pin color.

Swamper

Answer 7

Neither of the posted solutions work 100% if you are using the pin drop animation. Cannonade's solution is very neat because it allows the pin to still have both kinds of ends (the sharp point when falling and the one with the circular paper ripple) but unfortunately a glimpse of the original pin head colour can be seen when the pin bounces as it hits the map. yonel's solution of replacing the whole pin image means the pin falls with the circular paper ripple before it's even hit the map!

Manama

Answer 8

I tried this way and it seems to be ok...

UIImage * image = [UIImage imageNamed:@"blue_pin.png"];
        UIImageView *imageView = [[[UIImageView alloc] initWithImage:image]
                                 autorelease];
        [annotationView addSubview:imageView];
        annotationView = nil;

using the complete pin image... as the yonel example

Plenum

Only code that works in iOS 8 (other answers do nothing). Thanks! – Darnley

Answer 9

If it's not in the docs then most probably not, you cAn use mkannotationview and have ur own image if u wish though

Hyperactive