Map.loaded() gets confused when a GeoJSON layer is added

[averas]

mapbox-gl-js 0.31.0:

Steps to Trigger Behavior

1. Load a clean slate Mapbox streets map without any extra layers
2. Pan/zoom around and assess that Map#loaded always returns true as the map settles
3. Add a GeoJSON source/layer
4. Pan/zoom around and assess that Map#loaded sporadically returns false even after the map settles

The behaviour above can be evaluated at: http://codepen.io/anon/pen/OWMwOX

Open the console and and click the "Loaded" button to get the state of Map#loaded. I have never been able to provoke a false Map#loaded without the GeoJSON source/layer, but after it is added ("Add GeoJSON Layer") it will after a couple of pans/zooms (sometimes up to 10-15)

This behaviour currently affects plugins such as Draw which is dependent on this state to add its dependencies. I know there are upcoming changes to Map#loaded (#3941, #2792) and hopefully this can be adressed as part of that.

I would also like to suggest that some work is invested in more clearly defining and documenting the state-transition model for Mapbox GL JS so that is becomes very clear which underlying phenomena that make the Map move between different states, which events it will emit when doing so, and which parts of the API that are available when the map is in different states. There is certainly a lot of work already done here, but since even adding and removing Draw is hard to do in a clean manner (mapbox/mapbox-gl-draw#572) I argue there is some room for improvement.

[ARolek]

I just encountered this issue with a GeoJSON source layer exactly as @averas describes.

Edit. I was using mapboxgl 0.28.0. I just tried with 0.31.0 and the behavior is the same.

[stevage]

Ah, I think I may have just hit this. In my situation, I was generating and adding a GeoJSON source, and waiting for a load event to do further things (or checking .loaded). The load event was never fired, so the 'further things' only happened if the race condition happened such that .loaded() was already true. (Usually because I had stepped through in the Chrome debugger.)

[lcapel]

Also hitting this issue, the load callback does not seem to fire consistently leading to the handler not being called and the GeoJSON layer not being appended. I've had more success not using the async handler all together but I'm worried that is the wrong approach and styles may not load correctly in a production environment. 😕

UPDATE: This turned out to be my fault I believe, I was registering the load handler too late and the error seemed to be happening randomly because of a race condition. I have now fixed this issue in my project 👍

[mollymerp]

@averas are you able to reproduce with v0.32.1? I can reproduce w your original codepen but not with v0.32.1 or the current master branch so this may have been fixed with another PR? 🤔

May have been fixed by #3985

[mollymerp]

I tracked down the reason map.loaded() was returning false to certain tiles never getting their state updated to 'loaded' which I'm pretty sure was a result of that race condition and is now fixed. Closing for now but please reopen if you're still seeing this on the most recent release.