Mapbox GL JS - “Source Loaded” event

Question

I'm adding a vector tile source to my Mapbox GL js map like this:

    this.map.on('load', () => {
        this.map.addSource('userSource', {
            type: 'vector',
            url: 'mapbox://<my user source>',
        });

        this.map.addLayer({
            id: 'userDataLayer',
            type: 'fill',
            source: 'userSource',
            'source-layer': 'foobar_areas',
            paint: {
                'fill-outline-color': 'rgba(50,50,150,.4)',
                'fill-color': 'rgba(10,190,20,.2)',
            },
        });
    });

I want to initialize some other modules once userDataLayer is ready to go, but I don't know what event to listen for. I tried this:

this.map.on('data', (e) => { 
    const { dataType, sourceId, isSourceLoaded } = e; 
        if (dataType === 'source' && sourceId === 'userSource' && isSourceLoaded) {
        // ...

Except that fires many times... and then fires again when you apply filters, etc.

Is there an event that fires just when the source is loaded?

Answer 1

I was dealing with this again today, so here's an update!

As of mapbox-gl v0.44.2, it's still not quite reliable enough to listen for the sourcedata event and check the properties of the event parameter that gets passed to the callback, even though I think that's what you're supposed to do. You'd want to check sourceId === 'your-source-id', isSourceLoaded === true, and sourceDataType !== 'metadata'. If an event satisfied these 3 things, you could assume your source is loaded and ready to work with.

I've been experimenting with this technique, and I found that switching the source at runtime doesn't always fire a sourcedata event that satisfies these criteria. It's a real hassle.

The most solid solution I've been able to find so far is to listen for sourcedata events, but use map.isSourceLoaded every single time to check if your particular source is ready.

So:

function sourceCallback() {
    // assuming 'map' is defined globally, or you can use 'this'
    if (map.getSource('my-data') && map.isSourceLoaded('my-data')) {
        console.log('source loaded!');
    }
}

map.on('sourcedata', sourceCallback);

Answer 2

The solution is to use the undocumented style.load event that fires when new things finish loading into the style.

map.once('style.load', (ev) => {
    // ...
});

Answer 3

You can use below line of code

map.on('idle',function(){
   //your code here 
})

Once all the rendering part has been done then the above function will be called and then you can perform other operations.

For reference, you can follow the link : Mapbox Documentation Link

Answer 4

The answer in 2019 is:

map.once('styledata', loadTiles); //The listener will be called first time the event fires after the listener is registered.

      map.once('styledata', loadTiles);   //The listener will be called first time the event fires after the listener is registered.


     map.on("styledata", loadTiles);    // will fire multiple 3 times, whenever style changed.  
                                // event.stopPropagation(); does not work.


     map.on("load", loadTiles);       // only fire 1 time. but when you change base map, use below

  map.setStyle('mapbox://styles/mapbox/' + layerId, {diff: false});

    //  on load event will not fire, which I need it fire to re-load geojson layer. 


       map.on("styledata"    // works fine, but it fire 3 same event at same time, cause load 3 times geojson layer, cause other error when you load 3 times geojson layer at same time.

Answer 5

Answer in 2020 in Typescript

Bind the event once in constructor

this.instance.on('sourcedata', this.sectionSourceAddedCallback);

and inside callback

private sectionSourceAddedCallback = (e: mapboxgl.EventData): void => {
        if (map.getSource('sectionVectorSource') && 
            map.isSourceLoaded('sectionVectorSource') && 
             e.isSourceLoaded) 
       {
            const features = getSectionFeatures(this.instance); //get data using queryRenderedFeatures... etc..
            console.log(features);
            this.instance.off('sourcedata', this.sectionSourceAddedCallback); //Unbind event here
        }
    }

Other Useful Link, Check: https://github.com/mapbox/mapbox-gl-js/issues/1715