Allow adding sources, layers & setting terrain without waiting for map load

[mourner]

One of the biggest hurdles when adding terrain to an existing style is that we need to wait for the map load event first, and only then we can add the terrain source and set the terrain options. This is problematic both ergonomically (it's annoying to use map.on('load', () => { ... } constantly in even basic examples), and in terms of performance, since terrain tiles don't start loading until all the vector tiles finished loading and rendering.

We should investigate whether it's possible to improve the style mechanism so that:

• sources and layers could be added lazily, without waiting for load, so that their incorporation into the style would be deferred until it's loaded (if loading is in progress) instead of throwing and error
• lazily loaded sources eagerly initialize the source cache and start loading tiles before the map has finished loading.

[rsnipes]

On a related note, loving the 3D terrain features... Trying to add those (example code works well), but then struggling when switching styles. Basically, using map.on('load', () => { ... } works fine initially, but then when setting a new style the terrain source is lost and attempts to re-add get lost amongst waiting for new style to fully load (which has always been a tricky endeavor). Any idea on how to handle this better? Or... Possible to include the terrain source in Mapbox Studio defined styles?

[karimnaaji]

@rsnipes yes you can directly add terrain in your style as such to prevent this type of issue:

var map = window.map = new mapboxgl.Map({
    container: 'map',
    style: {
        ...
        'sources': {
            'mapbox-dem': {
                'type': 'raster-dem',
                'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
                'tileSize': 512,
                'maxzoom': 14
             }
         },
        'layers': [
             ...
        ],
        'terrain': {
            'source': 'mapbox-dem',
            'exaggeration': 1.5
        }
    },
    hash: true,
    center: [0, 0],
    pitch: 0,
    bearing: 0,
    zoom: 0
});

Support for Studio is incoming, once this is done you will be able to directly edit your style to add the new features there.

[stevage]

sources and layers could be added lazily, without waiting for load, so that their incorporation into the style would be deferred until it's loaded (if loading is in progress) instead of throwing and error

Yes, please. Anything would be better than "Style is not done loading". 🙏

Linking to the growing back catalog of discussion: #9779 #8691 #8765

[djibarian]

Added some comments in #2268 related to this issue, for the record.