Polygon overlays interfering with each other when filling a MKPolygon with a CGPattern (using Quartz 2D)

Question

Background

In iOS6, I used to add several MKPolygon (overlays) on the MKMapView and to provide a specific MKOverlayView to the mapView:viewForOverlay: callback (see MKMapViewDelegate Class Reference). This specific view's job was to fill the polygon with a custom pattern using Quartz 2D. It did work fine.

Now, this does not seem to work anymore on iOS7 the way I used to do it.

Because mapView:viewForOverlay: is deprecated in iOS SDK7 as well as MKOverlayView and its subclasses, I have tried switching to mapView:rendererForOverlay: and subclassing MKOverlayRenderer without success: The problems encountered are the same.

The following sample codes will therefore use MKOverlayView but you can easily replace view/View with renderer/Renderer in the code bellow and get the same effect.

Problem encountered

I have reduced the problem to the smallest code sample able to reproduce it and the result is the following:

On iOS6 (as expected):

On iOS7 (not as expected):

I am expecting to have my polygons filled, always with the same pattern, and that the pattern's size remains the same on the screen independently of the map's zoom level.

Alas, on iOS7 and when adding more than one overlay on the map, the pattern's size on screen decreases while zooming out on some part of the polygon. The pattern gets its right size only when zooming in at max zoom level.

The problem does not appear:

• When adding only one overlay
• When overlays are well spaced
• For the overlay with the lowest index (When adding several overlays with mapView:insertOverlay:atIndex:)

The problem seems to happen even when only one patterned overlay was added as well as other not-patterned overlays.

Code samples

MTViewController.h

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface MTViewController : UIViewController<MKMapViewDelegate>

@property (strong, nonatomic) IBOutlet MKMapView *mapView;    

@end

MTViewController.m

#import "MTViewController.h"
#import <MapKit/MapKit.h>
#import "MTPolygonWithPatternOverlayView.h"

@implementation MTViewController

- (void)dealloc {
    self.mapView.delegate = nil;
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        self.title = @"MapTest - CGPattern";
    }
    return self;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.mapView.delegate = self;

    // Add a 4 polygon overlays on the map
    int count = 0;
    float delta = 0.012;
    for (int i = 0; i < 4; i++) {
        CLLocationCoordinate2D coords[4];
        coords[0] = CLLocationCoordinate2DMake(58.395,15.555 + (i*delta));
        coords[1] = CLLocationCoordinate2DMake(58.390,15.560 + (i*delta));
        coords[2] = CLLocationCoordinate2DMake(58.385,15.555 + (i*delta));
        coords[3] = CLLocationCoordinate2DMake(58.390,15.550 + (i*delta));
        MKPolygon *overlay = [MKPolygon polygonWithCoordinates:coords count:4];
        [self.mapView insertOverlay:overlay atIndex:count++];
    }

    // Zoom to region containing polygons
    MKCoordinateRegion region = MKCoordinateRegionMake(CLLocationCoordinate2DMake(58.390,15.561), MKCoordinateSpanMake(0.015, 0.015));
    [self.mapView setRegion:[self.mapView regionThatFits:region] animated:NO];
}

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay {
    MKOverlayView *overlayView = nil;

    if ([overlay isKindOfClass:[MKPolygon class]]) {
        MTPolygonWithPatternOverlayView *polygonOverlayView = [[MTPolygonWithPatternOverlayView alloc] initWithPolygon:overlay];
        polygonOverlayView.alpha = 1.0f;
        polygonOverlayView.strokeColor = [UIColor blueColor];
        polygonOverlayView.lineWidth = 3.0f * [[UIScreen mainScreen] scale];
        overlayView = polygonOverlayView;
    }
    return overlayView;
}

@end

MTPolygonWithPatternOverlayView.h

#import <MapKit/MapKit.h>

@interface MTPolygonWithPatternOverlayView : MKPolygonView

@end

MTPolygonWithPatternOverlayView.m

#import "MTPolygonWithPatternOverlayView.h"

@implementation MTPolygonWithPatternOverlayView

void patternReleaseInfoCallback(void *info) {
}

void drawPatternCell(void *info, CGContextRef context) {
    float cellWidth = CGContextGetClipBoundingBox(context).size.width;
    float cellHeight = CGContextGetClipBoundingBox(context).size.height;

    // Make line width look constant on screen independently of map zoom level
    CGFloat lineWidth = [[UIScreen mainScreen] scale] * cellWidth / 64.0f;
    CGContextSetLineWidth(context, lineWidth);

    // Draw following pattern in cell:
    // \       /
    //  \     /
    //   \ _ /
    //    |_|
    //   /   \
    //  /     \
    // /       \

    // Draw diagonal
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGPoint points [] = {{0.0,0.0}, {cellWidth,cellHeight }, {cellWidth,0.0}, {0.0,cellHeight}};
    CGContextStrokeLineSegments(context, points, 4);

    // Draw middle square
    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    float partWidth = cellWidth / 8;
    CGRect middleSpot = CGRectMake(partWidth * 3, partWidth*3, 2* partWidth, 2*partWidth);
    CGContextFillRect(context, middleSpot);
}

- (void)fillPath:(CGPathRef)path inContext:(CGContextRef)context {
    CGPatternCallbacks callBack;
    callBack.drawPattern = &drawPatternCell;
    callBack.releaseInfo = &patternReleaseInfoCallback;
    callBack.version = 0;

    float cellWidth = CGContextGetClipBoundingBox(context).size.width / 4;
    CGPatternRef pattern = CGPatternCreate(NULL, CGRectMake(0.0f, 0.0f, cellWidth, cellWidth), CGAffineTransformIdentity, cellWidth, cellWidth, kCGPatternTilingConstantSpacing, true, &callBack);

    CGContextSaveGState(context);
    CGColorSpaceRef  patternSpace = CGColorSpaceCreatePattern (NULL);
    CGContextSetFillColorSpace (context, patternSpace);
    CGContextAddPath(context, path);
    float alpha = 1;
    CGContextSetFillPattern(context, pattern, &alpha);
    CGContextDrawPath(context, kCGPathFill);
    CGContextRestoreGState(context);

    CGColorSpaceRelease (patternSpace);
    CGPatternRelease(pattern);
}

@end

Question

I'm on my way to report this as a bug on Apple's bug tracker but I wanted to check first if someone else finds a flaw in my use the MapKit and Quartz 2D.

Edit #1: I have tried to make fillPath's code thread safe by wrapping it in a dispatch_sync call on a common queue but it doesn't fix the problem.

Edit #2: Not fixed in iOS 7.0.3

Answer 1

Issue was actually a bug and addressed from iOS 7.1