Mapbox GL JS: Updating Banner Instruction along the route (Finding next maneuver point)

Question

Mapbox Android SDK and iOS SDK has navigation feature but Mapbox GL JS does not have. I am able to trying to create a navigation experience in Mapbox GL JS using available features. However, I am having trouble with the banner instructions. Along the route, how to know which is the next maneuver and which banner instruction to display.

Most of the answers in stackoverflow and google point to finding the nearest maneuver point but, it can give two maneuverpoints : one ahead of the current position and one behind the current position. How to know if the maneuver point has already been passed, even though the point is nearest to the current location?

What I want is something like BannerInstructionObserver of the Mapbox Android SDK from which I can know when to update the banner or the maneuver. What is the logic behind this, which I can implement using Mapbox GL JS?

Answer 1

You are correct that there is no such feature for Mapbox GL GS.

I have worked around this in the past by keeping a list of waypoints and respective maneuver instructions and deleting the ones visited from the list. The current waypoint / manuever is the one next on the list. I would only display it once it comes into range of my current position.

You can generate these lists from the directionsRoute object you get by requesting a route from the Mapbox Directions API.