4

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.

enter image description here

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

Thanks

Paras Gorasiya
  • 1,295
  • 2
  • 13
  • 33
  • It's not very clear to me what you mean by "animate the route from start to destination." Can you provide a visual aid of some sort or describe the animation (i.e. is it a change in width, pulsing effect, or something else) a bit more? – riastrad Jul 17 '19 at 13:23
  • Please check my updated question. This is something I am already doing with Google Maps SDK but I am not able to do it with Mapbox SDK. – Paras Gorasiya Jul 18 '19 at 02:03
  • it's pretty obvious what is meant: the line "fills in" from the beginning to the end. – Fattie Jul 18 '19 at 02:05
  • Thanks @Fattie for quickly understanding the question. Any leads from your end? – Paras Gorasiya Jul 18 '19 at 03:00
  • @riastrad Can you provide any lead on this? – Paras Gorasiya Jul 23 '19 at 08:31

1 Answers1

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 ⚠️

riastrad
  • 1,624
  • 10
  • 22
  • Thanks for the answer. I cant figure out how to use it. Could you please help posting a little bit code. It would be very useful. Thanks – Paras Gorasiya Jul 30 '19 at 07:20