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.

Solution 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];
    }
    // ...

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

Solution 3

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

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

Solution 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!

View more solutions

Comments

[Ankit Sharma]

No problem. Glad you found them useful.

[Matt Sephton]

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

[yonel]

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

[yonel]

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

[Sonny Saluja]

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

[yonel]

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 ?

[yonel]

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

[MGA]

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

[earnshavian]

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]

[Nic Hubbard]

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

[Andrew]

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

[Dean Leitersdorf]

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

[Dean Leitersdorf]

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

[yonel]

@DeanLeitersdorf : added ;)

[Dean Leitersdorf]

@yonel Thank you so much! How do you create these?

[yonel]

@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

[StevenTsooo]

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

[Rob]

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