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?