Question

I’ve got an MKAnnotation subclass representing a cluster of map pins, with the number of pins in the cluster retrievable from the MKAnnotation subclass. For these annotations, I would like to display a grey circle with a black bold number representing the number of pins in the cluster. I’ve made an MKAnnotationView subclass which implements initWithAnnotation:reuseIdentifier and drawRect: methods, and this is my implementation of the drawRect: method:

- (void)drawRect:(CGRect)rect
{

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBFillColor(context, 0.7f, 0.7f, 0.7f, 0.5f);
    CGContextFillEllipseInRect(context, rect);

    UIFont *font = [UIFont boldSystemFontOfSize: [UIFont smallSystemFontSize]];
    NSString *label = [NSString stringWithFormat:@"%i", [(LocationGroupAnnotation *)self.annotation locationCount]];
    CGPoint labelLocation;

    if ([label length] == 1)
    {
        labelLocation = CGPointMake(rect.size.width / 2.0f, (rect.size.height / 2.0f) - (font.capHeight / 2.0f));
    } else if ([label length] == 2) {
        labelLocation = CGPointMake(rect.size.width / 2.0f, (rect.size.height / 2.0f) - (font.capHeight / 2.0f));
    } else {
        labelLocation = CGPointMake(rect.size.width / 2.0f, (rect.size.height / 2.0f) - (font.capHeight / 2.0f));
    }


    [label drawAtPoint:labelLocation withFont:font];

    NSLog(@"Drawn label at (%f,%f)", labelLocation.x, labelLocation.y);
}

Ignore the values for labelLocation in the if statement, I’m going to adjust that according to how much space each letter takes up so that the number is centered. What I am getting at the moment is a translucent grey circle, but no text. I assume the text is being drawn in the wrong location. Also how do I specify that the text should appear in front of the circle rather than behind it?

Answer 1

Right before calling drawAtPoint, set the color that you want the text in otherwise it uses the color set by the CGContextSetRGBFillColor call above:

[[UIColor blackColor] set];  //or some color that contrasts with background
[label drawAtPoint:labelLocation withFont:font];

If you draw the text after the circle, it should appear above the circle and vice versa.