MKCircleRenderer fillcolour overlap issue

Question

I am adding MKCircleRenderer to a map code for that is

- (MKOverlayRenderer*)mapView:(MKMapView*)mapView rendererForOverlay:(id <MKOverlay>)overlay
{
     MKCircle* circle = overlay;
        MKCircleRenderer *circleView = [[MKCircleRenderer alloc] initWithOverlay:circle];
       circleView.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.1];
      return circleView;

}

Here the issues is that when two circles overlap i do not want them to get "mixed" and display a darker color in the overlapping area as like this.

Can any one please advise any hint / solution to resolve this.

Answer 1

Rather than creating a multiple MKCircle/MKCircleRenderer overlays, create a single overlay utilizing MKOverlayPathRenderer that contains the a path consisting of the union of the individual circles. Then fill that path with the appropriate color.

Here's rather a lot of code, but it seems to do what you're looking for

//
//  CirclesOverlay
//  Circles
//
//  Created by David W. Berry on 3/26/15.
//  Copyright (c) 2015 Greenwing Software. All rights reserved.
//

#import <UIKit/UIKit.h>

@import MapKit;

@interface Circle : NSObject

@property (nonatomic, assign) CLLocationCoordinate2D    center;
@property (nonatomic, assign) CGFloat                   width;
@property (nonatomic, assign) CGFloat                   height;

+(Circle*)withCenter:(CLLocationCoordinate2D)center width:(CGFloat)width height:(CGFloat)height;
-(id)initWithCenter:(CLLocationCoordinate2D)center width:(CGFloat)width height:(CGFloat)height;

@end


@interface CirclesOverlay : NSObject<MKOverlay>

@property (nonatomic, strong, readonly) NSArray*        circles;
@property (nonatomic, strong, readonly) UIColor*        color;
@property (nonatomic, readonly) CLLocationCoordinate2D  coordinate;
@property (nonatomic, readonly) MKMapRect               boundingMapRect;

+(CirclesOverlay*)withCircles:(NSArray*)circles color:(UIColor*)color;
-(id)initWithCircles:(NSArray*)circles color:(UIColor*)color;

@end

@interface CirclesOverlayRenderer : MKOverlayPathRenderer

+(CirclesOverlayRenderer*)withCirclesOverlay:(CirclesOverlay*)circlesOverlay;
-(id)initWithCirclesOverlay:(CirclesOverlay*)circlesOverlay;

@end


//
//  CirclesOverlay.m
//  Circles
//
//  Created by David W. Berry on 3/26/15.
//  Copyright (c) 2015 Greenwing Software. All rights reserved.
//

#import "CirclesOverlay.h"

// This should probably be somewhere other than in the ViewController, but for an example it's fine
static MKMapRect MKMapRectForCoordinateRegion(MKCoordinateRegion region)
{
    MKMapPoint a = MKMapPointForCoordinate(CLLocationCoordinate2DMake(
                                                                      region.center.latitude + region.span.latitudeDelta / 2,
                                                                      region.center.longitude - region.span.longitudeDelta / 2
                                                                      )
                                           );
    MKMapPoint b = MKMapPointForCoordinate(CLLocationCoordinate2DMake(
                                                                      region.center.latitude - region.span.latitudeDelta / 2,
                                                                      region.center.longitude + region.span.longitudeDelta / 2
                                                                      )
                                           );

    return MKMapRectMake(MIN(a.x,b.x), MIN(a.y,b.y), ABS(a.x-b.x), ABS(a.y-b.y));
}

@implementation Circle

-(MKMapRect)mapRect
{
    return MKMapRectForCoordinateRegion(
                                        MKCoordinateRegionMakeWithDistance(self.center, self.height, self.width)
                                        );
}

+(Circle*)withCenter:(CLLocationCoordinate2D)center width:(CGFloat)width height:(CGFloat)height
{
    return [[self alloc] initWithCenter:center width:width height:height];
}

-(id)initWithCenter:(CLLocationCoordinate2D)center width:(CGFloat)width height:(CGFloat)height
{
    if(self = [super init])
    {
        self.center = center;
        self.width = width;
        self.height = height;
    }
    return self;
}

@end

@interface CirclesOverlay ()

@property (nonatomic, strong) NSArray*        circles;
@property (nonatomic, strong) UIColor*        color;

@end

@implementation CirclesOverlay

-(CLLocationCoordinate2D)coordinate
{
    MKMapRect   bounds = self.boundingMapRect;

    return MKCoordinateForMapPoint(MKMapPointMake(
                                                  bounds.origin.x + bounds.size.width / 2.0,
                                                  bounds.origin.y + bounds.size.height / 2.0
                                                  ));
}

-(MKMapRect)boundingMapRect
{
    MKMapRect   bounds = MKMapRectNull;

    for(Circle* circle in self.circles)
    {
        bounds = MKMapRectUnion(bounds, circle.mapRect);
    }

    return bounds;
}

+(CirclesOverlay*)withCircles:(NSArray*)circles color:(UIColor*)color
{
    return [[self alloc] initWithCircles:circles color:color];
}

-(id)initWithCircles:(NSArray*)circles color:(UIColor*)color
{
    if(self = [super init])
    {
        self.circles = circles;
        self.color = color ?: [[UIColor redColor] colorWithAlphaComponent:0.10];
    }
    return self;
}

@end

@implementation CirclesOverlayRenderer

-(CirclesOverlay*)circlesOverlay
{
    return (CirclesOverlay*)self.overlay;
}

+(CirclesOverlayRenderer*)withCirclesOverlay:(CirclesOverlay*)circlesOverlay
{
    return [[self alloc] initWithCirclesOverlay:circlesOverlay];
}

-(id)initWithCirclesOverlay:(CirclesOverlay*)circlesOverlay
{
    if((self = [super initWithOverlay:circlesOverlay]))
    {
        self.fillColor = circlesOverlay.color;
    }
    return self;
}

-(void)createPath
{
    CGMutablePathRef path = CGPathCreateMutable();

    for(Circle* circle in self.circlesOverlay.circles)
    {
        MKMapRect   mapRect = circle.mapRect;
        CGRect      cgRect = [self rectForMapRect:mapRect];

        CGPathAddEllipseInRect(path, NULL, cgRect);
    }

    self.path = path;
}

@end



//
//  ViewController.m
//  Circles
//
//  Created by David W. Berry on 3/26/15.
//  Copyright (c) 2015 Greenwing Software. All rights reserved.
//

#import "ViewController.h"
#import "CirclesOverlay.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.mapView.region = MKCoordinateRegionMake(
                                                 CLLocationCoordinate2DMake(37.3347606, -122.054883),
                                                 MKCoordinateSpanMake(0.0725, 0.0725)
                                                 );

    CirclesOverlay* overlay = [CirclesOverlay withCircles:@[
                                                            [Circle withCenter:CLLocationCoordinate2DMake(37.3347606, -122.054883) width:1000.0 height:1000.0],
                                                            [Circle withCenter:CLLocationCoordinate2DMake(37.3477606, -122.055883) width:1000.0 height:1000.0],
                                                            [Circle withCenter:CLLocationCoordinate2DMake(37.3397606, -122.054883) width:1000.0 height:1000.0],
                                                            ]
                                                    color:nil];

    [self.mapView addOverlay:overlay];
}

-(MKOverlayRenderer*)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
    if([overlay isKindOfClass:[CirclesOverlay class]])
    {
        return [CirclesOverlayRenderer withCirclesOverlay:(CirclesOverlay*)overlay];
    }
    else
    {
        return nil;
    }
}

@end