Mapbox-gl-js: How to load data after map style is loaded

[Iam-jegan]

mapbox-gl-js version: latest version

getting error like "Style not done loading" often. Can you please tell me how to avoid this?

[mourner]

Source/layer manipulations can only be done after the style is loaded, so you have to wrap you code in map.on('style.load', function () { ... }) handler. See examples, e.g. this one: https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/

[shantilal-narola]

http://fuzzytolerance.info/blog/2016/03/16/Leaflet-to-Mapbox-GL/

Use this, this will defiantly work.

[nathanredblur]

Even if the that event is triggered, your map could be not full ready.
It's an issue in MapBox, I needed to do this to solve my problem

myMap.on('style.load', () => {
  const waiting = () => {
    if (!myMap.isStyleLoaded()) {
      setTimeout(waiting, 200);
    } else {
      loadMyLayers();
    }
  };
  waiting();
});

[CodeAmend]

I have been trying to figure out how to do this without a timeout. My issue was the text was not rendering by the time the on load event was called. So instead of using map.on('load'), i would use map.on('idle').

map.on('idle', () => {
   // map.getCanvas().toDataURL()
}