MKMapView Annotations

This post will show how to style a custom MKMapView pin via the MKAnnotationView. Like all of these short posts, the goal is not to teach you how to use a particular control, in this case MKMapView, but rather just to highlight a single facet of how it can be styled uniquely with Pixate.

MKAnnotationViews are created much like cells are created in a UITableView, that is, they are reused if possible and otherwise created anew. A typical MKAnnotationView might be created like this:

annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier];
annotationView.enabled = YES;
annotationView.canShowCallout = YES;
annotationView.styleClass = @"myAnnotations";

Because in this case we just want to style all of the pins in the same way, rather than using styleId we'll use styleClass so we can reference any of these pins via a single CSS class name.

We'll start by using an image as the pin. In your CSS file, it's as easy as specifying something like this:

.myAnnotations {
    image: url("pin.png");
}

Which might generate a pin that looks like this:

Next let's use a scalable vector file rather than a static bitmap. We'll use a .svg file for our next pin:

.myAnnotations {
    image: url("star.svg");
    image-size: 32pt 32pt;
}

Even though we specified the .svg file in the same way we specified the .png bitmap above, notice we did add image-size this time. That's because the image is a vector file, so we need to tell Pixate how large you want it rendered. In this case, we'll use 32 by 32 points. (Note: With both retina and non-retina devices now, it's much better to use points ('pt') versus pixels ('px') as points will automatically use the correct number of pixels on retina or non-retina displays.) We now get a map pin like this:

Finally, let's not use any canned imagery at all, but rather just a custom background created with a radial gradient from red to none (i.e. transparent).

.myAnnotations {
    background-color: radial-gradient(red, none);
    background-size: 32 32;
}

This would generate a map pin that looks something like this:

And for some fun, if we take the styling from the previous post's custom disclosure button example, we can use that style as-is to get something like this:

Hope you enjoyed this article.

[Published: 2012-12-16]