Mapbox-gl-js: Map#isStyleLoaded() returns true on styledataloading event

[2ndGAB]

Hello

mapbox-gl-js/v0.37.0:

I have a map where we can classically switch from one style to another, streets to satellite for example.

I want to be informed that the style is loaded to then add a layer.

According to the doc, I tried to wait that the style being loaded to add a layer based on a GEOJson dataset.

That works perfectly when the page is loaded which fires map.on('load') but I get an error when I just change the style, so when adding layer from map.on('styledataloading'), and I even get Out Of Memory problems in Firefox.

My code is:

mapboxgl.accessToken = 'pk.token';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [5,45.5],
    zoom: 7
});

map.on('load', function () {

    loadRegionMask();
});

map.on('styledataloading', function (styledata) {

    if (map.isStyleLoaded()) {
        loadRegionMask();
    }
});

$('#typeMap').on('click', function switchLayer(layer) {
    var layerId = layer.target.control.id;

    switch (layerId) {
        case 'streets':
            map.setStyle('mapbox://styles/mapbox/' + layerId + '-v10');
        break;

        case 'satellite':
            map.setStyle('mapbox://styles/mapbox/satellite-streets-v9');
        break;
    }
});

function loadJSON(callback) {   

  var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");

  xobj.open('GET', 'regions.json', true);

  xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          callback(xobj.responseText);
        }
  };
  xobj.send(null);  
}

function loadRegionMask() {

  loadJSON(function(response) {

    var geoPoints_JSON = JSON.parse(response);

    map.addSource("region-boundaries", {
      'type': 'geojson',
      'data': geoPoints_JSON,
    });

    map.addLayer({
        'id': 'region-fill',
        'type': 'fill',
        'source': "region-boundaries",
        'layout': {},
        'paint': {
            'fill-color': '#C4633F',
            'fill-opacity': 0.5
        },
        "filter": ["==", "$type", "Polygon"] // Fill up the Maine, but I want the opposite.
    });
  });
}

And the error is:

Uncaught Error: Style is not done loading
    at t._checkLoaded (mapbox-gl.js:308)
    at t.addSource (mapbox-gl.js:308)
    at e.addSource (mapbox-gl.js:390)
    at map.js:92 (map.addSource("region-boundaries",...)
    at XMLHttpRequest.xobj.onreadystatechange (map.js:63)

Why do I get this error whereas I call loadRegionMask() after testing that the style is loaded?

[mollymerp]

Hi @2ndGAB, thanks for using Mapbox. I have reproduced the behavior you're describing and I do think it is a bug. styledataloading by definition shouldn't fire when the style is loaded because the event signifies that new style data has _begun_ to load. It's returning the state of the old style.

In the meantime I would recommend listening for the data event (this event signifies that data has finished loading or changing).

var loadSource = ()=>{
  if (map.isStyleLoaded()) {
    addNewSources();
    map.off('data', loadSource);
  }
}

map.on('data', loadSource);

[2ndGAB]

@mollymerp ,
Many thanks for your answer and sorry for the delay, I'll test your workaround in the next days.

[2ndGAB]

@mollymerp ,

Ok but listening for loadSource won't solve my problem right?

Is there a workaround to really wait for the style being loaded before adding a new layer?

[mourner]

Consolidating this as a duplicate of #8691 to track the issue in one place.