Render Title of MKPolygon

Question

I'm trying to render MKPolygon using the following code:

NSMutableArray *overlays = [NSMutableArray array];

        for (NSDictionary *state in states) {
            NSArray *points = [state valueForKeyPath:@"point"];

            NSInteger numberOfCoordinates = [points count];
            CLLocationCoordinate2D *polygonPoints = malloc(numberOfCoordinates * sizeof(CLLocationCoordinate2D));

            NSInteger index = 0;
            for (NSDictionary *pointDict in points) {
                polygonPoints[index] = CLLocationCoordinate2DMake([[pointDict valueForKeyPath:@"latitude"] floatValue], [[pointDict valueForKeyPath:@"longitude"] floatValue]);
                index++;
            }

            MKPolygon *overlayPolygon = [MKPolygon polygonWithCoordinates:polygonPoints count:numberOfCoordinates];
            overlayPolygon.title = [state valueForKey:@"name"];

            [overlays addObject:overlayPolygon];

            free(polygonPoints);
        }
[self.stateMapView addOverlays:overlays];

I used the following code to provide stroke and fill colors:

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id <MKOverlay>)overlay NS_AVAILABLE(10_9, 7_0);
{
    if ([overlay isKindOfClass:[MKPolygon class]])
    {
        MKPolygonRenderer *pv = [[MKPolygonRenderer alloc] initWithPolygon:overlay];

        pv.fillColor = [UIColor redColor];
        pv.strokeColor = [UIColor blackColor];

        return pv;
    }

    return nil;
}

Do I need to do something to render the Title? I think I should enable a configuration or something but I'm new to MapView. Or I need to create a UILabel?

Answer 1

Overlays don't automatically show their titles like annotations can (in their callout actually) so there's nothing you "need to do" or any configuration that you can enable.

A simple workaround to show titles on overlays is, as you suggest, to create a UILabel.
However, this UILabel should be added to an annotation view that is positioned at each overlay's center.

A minor drawback (or maybe not) to this method is that the titles will not scale with the zoom of the map -- they'll stay the same size and can eventually collide and overlay with other titles (but you may be ok with this).

To implement this approach:

1. For each overlay, add an annotation (using addAnnotation: or addAnnotations:) and set the coordinate to the approximate center of the overlay and the title to the overlay's title.

   Note that since MKPolygon implements both the MKOverlay and the MKAnnotation protocols, you don't necessarily need to create a separate annotation class or separate objects for each overlay. MKPolygon automatically sets its coordinate property to the approximate center of the polygon so you don't need to calculate anything. You can just add the overlay objects themselves as the annotations. That's how the example below does it.

2. Implement the mapView:viewForAnnotation: delegate method and create an MKAnnotationView with a UILabel in it that displays the title.

Example:

[self.stateMapView addOverlays:overlays];

//After adding the overlays as "overlays",
//also add them as "annotations"...
[self.stateMapView addAnnotations:overlays];


//Implement the viewForAnnotation delegate method...
-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation
{
    if ([annotation isKindOfClass:[MKUserLocation class]])
    {
        //show default blue dot for user location...
        return nil;
    }

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

        //add a UILabel in the view itself to show the title...
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 30)];
        titleLabel.tag = 42;
        titleLabel.backgroundColor = [UIColor clearColor];
        titleLabel.textColor = [UIColor blackColor];
        titleLabel.font = [UIFont boldSystemFontOfSize:16];
        titleLabel.textAlignment = NSTextAlignmentCenter;
        titleLabel.minimumScaleFactor = 0.5;
        [av addSubview:titleLabel];
        av.frame = titleLabel.frame;
    }
    else
    {
        av.annotation = annotation;
    }

    //find the UILabel and set the title HERE
    //so that it gets set whether we're re-using a view or not...
    UILabel *titleLabel = (UILabel *)[av viewWithTag:42];
    titleLabel.text = annotation.title;

    return av;
}

The alternative approach is to create a custom overlay renderer and do all the drawing yourself (the polygon line, the stroke color, the fill color, and the text). See Draw text in circle overlay and Is there a way to add text using Paths Drawing for some ideas on how to implement that.