Question

Is it possible to replace the pin icon of an annotation by a dynamic text label?

Maybe using css, or dynamically creating an image?

For example a label is done with CSS on Google Maps API with JavaScript.

Answer 1

Yes, it’s possible.

In iOS MapKit, you’ll need to implement the viewForAnnotation delegate method and return an MKAnnotationView with a UILabel added to it.

For example:

-(MKAnnotationView *)mapView:(MKMapView *)mapView 
    viewForAnnotation:(id<MKAnnotation>)annotation
{
    if ([annotation isKindOfClass:[MKUserLocation class]])
        return nil;

    static NSString *reuseId = @"reuseid";
    MKAnnotationView *av = [mapView dequeueReusableAnnotationViewWithIdentifier:reuseId];
    if (av == nil)
    {
        av = [[[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseId] autorelease];

        UILabel *lbl = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 30)] autorelease];
        lbl.backgroundColor = [UIColor blackColor];
        lbl.textColor = [UIColor whiteColor];
        lbl.alpha = 0.5;
        lbl.tag = 42;
        [av addSubview:lbl];

        //Following lets the callout still work if you tap on the label...
        av.canShowCallout = YES;
        av.frame = lbl.frame;
    }
    else
    {
        av.annotation = annotation;
    }

    UILabel *lbl = (UILabel *)[av viewWithTag:42];
    lbl.text = annotation.title;        

    return av;
}

Make sure the map view’s delegate property is set otherwise this delegate method will not get called and you will get the default red pins instead.