Adding many layers to a map but only visible those on demand

[kikocorreoso]

Hi all,

It is my first time working with maplibre/mapbox and maybe this is something stupid but I can't find a good answer in the docs/discussions/internet/etc.

Imagine I want a map and I want to offer tens of layers to the user but only very few of them shall be requested, loaded and visible when page is ready.

Most of the examples I see follow this pattern:

const map = new maplibregl.Map({
    ...
 });

map.on('load', () => {
        map.addSource('layer1', {
            ...
        });
        map.addLayer({
            ...
            'source': 'layer1',
            ...
        });

        map.addSource('layer2', {
            ...
        });
        map.addLayer({
            ...
            'source': 'layer2',
            ...
        });

        map.addSource('layer3', {
            ...
        });
        map.addLayer({
            ...
            'source': 'layer3',
            ...
        });
        
        ...
});

My questions:

• If I add all layers in map.on('load'..., would all layers be requested to the server when the page is accessed?
• If I use visibility: none, would be the non visible layers loaded but only non visible when the page is accessed?
• What would be the best way to offer all options to users but only load some of the layers at start so the user will only request the layers they are interested in?

Thank you very much for any hint on this.

Kind regards.

[HarelM]

Layers tell the client what to render, source is the data. When you define s source you get all the data in the tiles and decide what to render using the layers.
You can set and change visibility of the layers as you need to show or hide details.
I hope this answers your question.

[kikocorreoso]

Hi @HarelM

Thanks for your help.

So if I add two sources then both sources will be requested even if I only want to show one layer from one source when the map is loaded?

Is there a best practice to load a source only when the user wants to use one layer that uses this source?

For instance:

• source1: very light and layer1 depending on source1.
• source2: very heavy and layer2 depending on source2.

First map view with only layer1 visible (and only source1 requested).

If the user wants to add layer2 (e.g. click event on a menu) then and only then source2 is requested.

[HarelM]

If there are no layers that uses a source, then the source data won't be requested.
You can add and remove layers as you see fit.

[kikocorreoso]

Thanks!!!!