Animate polyline on Mapview Mapbox iOS

Question

I am replacing GoogleMaps SDK with Mapbox SDK for my iOS app. I am stuck at a point where my app has a feature where I animate polyline(already added) on map like Uber app.

But I cant seem to make it work with Mapbox iOS SDK. Mapbox has an example where I can add polyline coordinate on map with animation but that's not I want to do.

Polyline is added right away but I want to animate the route from start to destination.

Here is my current code from Mapbox example to add polyline coordinates on map with animation.

- (void)addPolylineToStyle:(MGLStyle *)style {
    // Add an empty MGLShapeSource, we’ll keep a reference to this and add points to this later.
    MGLShapeSource *source = [[MGLShapeSource alloc] initWithIdentifier:@"polyline" features:@[] options:nil];
    [style addSource:source];
    self.polylineSource = source;

    // Add a layer to style our polyline.
    MGLLineStyleLayer *layer = [[MGLLineStyleLayer alloc] initWithIdentifier:@"polyline" source:source];
    layer.lineJoin = [NSExpression expressionForConstantValue:@"round"];
    layer.lineCap = layer.lineJoin = [NSExpression expressionForConstantValue:@"round"];
    layer.lineColor = [NSExpression expressionForConstantValue:[UIColor redColor]];

    // The line width should gradually increase based on the zoom level.
    layer.lineWidth = [NSExpression expressionWithFormat:@"mgl_interpolate:withCurveType:parameters:stops:($zoomLevel, 'linear', nil, %@)",
                       @{@14: @5, @18: @20}];
    [self.mapView.style addLayer:layer];
}

- (void)animatePolyline {
    self.currentIndex = 1;

    // Start a timer that will simulate adding points to our polyline. This could also represent coordinates being added to our polyline from another source, such as a CLLocationManagerDelegate.
    [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(tick:) userInfo:nil repeats:YES];
}

- (void)tick:(NSTimer*)timer {
    if (self.currentIndex > self.locations.count) {
        [timer invalidate];
        return;
    }

    // Create a subarray of locations up to the current index.
    NSArray *currentLocations = [self.locations subarrayWithRange:NSMakeRange(0, _currentIndex)];

    // Update our MGLShapeSource with the current locations.
    [self updatePolylineWithLocations:currentLocations];

    self.currentIndex++;
}

- (void)updatePolylineWithLocations:(NSArray<CLLocation *> *)locations {
    CLLocationCoordinate2D coordinates[locations.count];

    for (NSUInteger i = 0; i < locations.count; i++) {
        coordinates[i] = locations[i].coordinate;
    }

    MGLPolylineFeature *polyline = [MGLPolylineFeature polylineWithCoordinates:coordinates count:locations.count];

    // Updating the MGLShapeSource’s shape will have the map redraw our polyline with the current coordinates.
    self.polylineSource.shape = polyline;
}

Update: Here's a gif of what I expect to do.

Please help me what should I do to animate the route along the polyline?

Thanks

Answer 1

Thank you for updating your question with that helpful visual. You should be able to create this effect with a line-gradient style expression that updates on a timer.

While there are no polished examples of implementing this, the Mapbox iOS team has some initial code that shows the basic syntax of the line gradient expression in this example PR: https://github.com/mapbox/ios-sdk-examples/issues/203. (The specific line that defines the gradient is here.)

You can then update the expression for your MGLLineStyleLayer's .lineColor attribute on a timer.

---

⚠️ Disclaimer: I currently work at Mapbox ⚠️