2

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?

spockshr
  • 372
  • 2
  • 14

1 Answers1

0

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.

Moritz
  • 1,710
  • 1
  • 8
  • 13
  • I have retrieved the maneuvers and banner instructions. What is the logic to know if a maneuver is visited? Till now I have been finding the closest maneuver but not the next maneuver. – spockshr Aug 25 '20 at 09:28
  • 1
    The directionsRoute object, that is part of the directions API response contains the waypoints along with the maneuvers in the correct chronological order. You would have to write your own logic to track which ones have been visited and which one s next. – Moritz Aug 26 '20 at 13:22