Question

Imagine that I have 6 circles. My timer calls first 2 circles in the beginning and overlay them on map view. Then after 2 seconds, it calls other circles and add them on map view. My problem is how to remove previous overlays.I want to see smooth transition for instance radar map.

Make it short, it would like to remove previous overlays and add the new overlays without flickering! Thanks a lot in advance!!.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize mapView;
@synthesize timer;
@synthesize circle1,circle2,circle3,circle4,circle5,circle6;



- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    CLLocationCoordinate2D zoomLocation1;

zoomLocation1.latitude=29.830071;
zoomLocation1.longitude=-95.319099;
circle1 = [MKCircle circleWithCenterCoordinate:zoomLocation1 radius:15000];
circle1.title=@"first level";

CLLocationCoordinate2D zoomLocation2;
zoomLocation2.latitude=29.830071;
zoomLocation2.longitude=-95.319099;
circle2 = [MKCircle circleWithCenterCoordinate:zoomLocation2 radius:4000];
circle2.title=@"first level";

CLLocationCoordinate2D zoomLocation3;
zoomLocation3.latitude=29.830071;
zoomLocation3.longitude=-95.319099;
circle3 = [MKCircle circleWithCenterCoordinate:zoomLocation3 radius:6000];
circle3.title=@"second level";

CLLocationCoordinate2D zoomLocation4;
zoomLocation4.latitude=29.830071;
zoomLocation4.longitude=-95.319099;
circle4 = [MKCircle circleWithCenterCoordinate:zoomLocation4 radius:18000];
circle4.title=@"second level";

CLLocationCoordinate2D zoomLocation5;
zoomLocation5.latitude=29.830071;
zoomLocation5.longitude=-95.319099;
circle5 = [MKCircle circleWithCenterCoordinate:zoomLocation5 radius:1000];
circle5.title=@"third level";

CLLocationCoordinate2D zoomLocation6;
zoomLocation6.latitude=29.830071;
zoomLocation6.longitude=-95.319099;
circle6 = [MKCircle circleWithCenterCoordinate:zoomLocation6 radius:13000];
circle6.title=@"third level";


    MKCoordinateRegion viewRegion=MKCoordinateRegionMakeWithDistance(zoomLocation1, 60*1609, 60*1609);

MKCoordinateRegion adjustedRegion=[mapView regionThatFits:viewRegion];

[mapView setRegion:adjustedRegion animated:YES];
mapView.mapType=MKMapTypeStandard;
[mapView setDelegate:(id)self];
i=0;
}

- (void)viewDidUnload
{
[self setMapView:nil];
[super viewDidUnload];
// Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:    (UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

- (IBAction)drawButton:(id)sender {
timer = [NSTimer scheduledTimerWithTimeInterval:(2.0) target:self     selector:@selector(addingOverlay) userInfo:nil repeats:YES];

}


- (void)addingOverlay {

i=i+1;    
switch(i%3)
{
    case 1:
        [mapView removeOverlays: [mapView overlays]];
        [mapView addOverlay:circle1];
        [mapView addOverlay:circle2];
        break;
    case 2:
        [mapView removeOverlays: [mapView overlays]];
        [mapView addOverlay:circle3];
        [mapView addOverlay:circle4];
        break;
    case 3:
        [mapView removeOverlays: [mapView overlays]];
        [mapView addOverlay:circle5];
        [mapView addOverlay:circle6];
        break;

}


}

-(MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay> )overlay
{
MKCircleView *circleView = [[MKCircleView alloc] initWithOverlay:overlay];
if ([overlay.title isEqualToString:@"first level"]) 
{
circleView.strokeColor = [UIColor redColor];
circleView.lineWidth = 2;
circleView.fillColor=[UIColor yellowColor];
}
else if([overlay.title isEqualToString:@"second level"])
{
circleView.strokeColor = [UIColor whiteColor];
circleView.lineWidth = 2;
circleView.fillColor=[UIColor blackColor];
}
else{
circleView.strokeColor = [UIColor greenColor];
circleView.lineWidth = 2;
circleView.fillColor=[UIColor redColor];


}

return circleView;
}




@end

Answer 1

I just posted this answer to a similar question.

It has a function that I use (drawRangeRings) that draws two circles. In my example, both circles have the same center coordinate, but different radius values, and colors. You could easily change the code to use different center coordinates for each circle if you need that.

Basically, I call drawRangeRings when the center coordinate changes, and it removes the original two circles, and draws two new ones at a different location.

Let me know if this isn’t exactly what you needed.

I don’t see any flicker when I use this in my app.