Directions Line/Path Not Appearing on Map

Nobody has claimed this yet.

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:

```javascript
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!

Start with src/directions.js around line 88 and the referenced mapbox-gl-js map.js logic around line 1570. Reproduce the missing directions line with dynamically added directions, realtime layers, and outside coordinates, then investigate the differing _loaded and _styleDirty states. Done means the route appears reliably without relying on the reported event-handler workaround.

Written by the indexing model from the issue text.