Directions Line/Path Not Appearing on Map

[AddoSolutions]

Hey All,

I have an issue with a fairly intricate map with multiple layers, data sources (all of which update realtime) and directions that are dynamically added based on outside coordinates.

I wanted to post what I knew about it and the workaround for documentation and further help by others:

The fix I had to use was:

    this.directions = new Directions({});
    this.directions.on('route',()=>{
      try {
        this.directions.mapState()
      }catch(e){
        console.error(e);
      }
    })

Digging into this, I found that the culprit of this is: https://github.com/mapbox/mapbox-gl-directions/blob/master/src/directions.js#L88 where even though the map is actually loaded, this function returns false. Digging into that, it appears that is located here: https://github.com/mapbox/mapbox-gl-js/blob/b57f79d94a530bcc382f65e424f1342c23c84448/src/ui/map.js#L1570 and for me this._styleDirty was returning true which was causing the entire thing to fall apart.

Interestingly enough directions._map._loaded did in fact return true, however that function simply didn't want to play ball.

Hopefully this helps someone else, and if I can aid in debugging this further, feel free to reach out!

[LVSant]

Thanks! That really did the trick for me!

Actually I'm using mapbox-gl-directions along with react-mapbox-gl and encountered the same issue.

Your snippet fixes it.