Overlay on MapView animated

Question

I add an overlay (array of multiple coordinates) and draw a path.

It works perfectly, but I would like (if it's possible), to draw the path with an animation (coordinate by coordinate, or fade in, etc.)

My app is only on iOS 7 or later.

Here my methods:

- (void)drawPathWithAnnotations:(NSArray*)annotations
{
    CLLocationCoordinate2D array[[annotations count]];

    for (CLLocation *loc in annotations)
    {
        array[[annotations indexOfObject:loc]] = CLLocationCoordinate2DMake(loc.coordinate.latitude, loc.coordinate.longitude);
    }

    self.routeLine = [MKPolyline polylineWithCoordinates:array count:[annotations count]];

    [self.mapview addOverlay:self.routeLine];
}

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
    if(overlay == self.routeLine){

        MKPolylineRenderer* lineView = [[MKPolylineRenderer alloc] initWithPolyline:self.routeLine];
        lineView.strokeColor = UIColorFromRGB(kAppTintColor);
        lineView.lineWidth = 3;

        return lineView;
    }

    return nil;
}

- (void)mapView:(MKMapView *)mapView didAddOverlayRenderers:(NSArray *)renderers
{
   // Animation here ? 
}

Thank you, any suggestions or ideas are appreciated! :)

I don't think this is possible with MKPolylineRenderer as-is. You could add the path as separate overlays on a timer or add one overlay but create a custom MKOverlayPathRenderer which updates its own `path` (adding the next "step" from the overlay) on a timer and calls invalidatePath on itself to refresh the display. The overlays would still be MKPolyline objects in both cases. — , Mar 18 '14 at 13:09
Ok, got it ;). If a tried the solution, I will update my post here. Thank you for the explanation ;) — Lapinou, Mar 18 '14 at 13:37
@Lapinou Hello, i also need the solution for this. Have you done this. Pls let me know. Thanks! — pankaj asudani, Oct 14 '14 at 09:54
@Lapinou Thn try this: http://stackoverflow.com/questions/11282271/draw-line-on-mkmapview-with-pattern-image/11344230#11344230 it is working for me. — pankaj asudani, Oct 16 '14 at 06:26

score 0 · Answer 1 · answered May 11 '16 at 17:53

I was looking for an answer to your question and didn't find an accepted one so here is my solution. You were right to assume didAddOverlayRenderers is where you put your animations. Here's an example of how to animate a 'fade' for an overlay:

- (void)mapView:(MKMapView *)mapView didAddOverlayRenderers:(NSArray *)renderers
{
    // Iterate through all overlayRenderers
    for (MKOverlayRenderer *overlayRenderer in renderers)
    {
        // MKPolylineRenderer
        // Animate a 'fade'
        if ([overlayRenderer isKindOfClass:[MKPolylineRenderer class]])
        {
            // Get MKPolylineRenderer
            MKPolylineRenderer *polylineRenderer = (MKPolylineRenderer *)overlayRenderer;

            // Let's manually set alpha to 0
            polylineRenderer.alpha = 0.0f;

            // Animate it back to 1
            dispatch_async(dispatch_get_main_queue(), ^{
                [UIView animateWithDuration:0.4 animations:^{
                    polylineRenderer.alpha = 1.0f
                }];
            });
        }
    }
}

Overlay on MapView animated

1 Answers1