CODEWITHSUNDEEP
mapbox-gl-jsmapbox-gl
thiagoxvo
thiagoxvo

Reputation: 367

Mapbox GL JS performance with multiple layers

I am creating an app using mapbox-gl-js which has a lot of layers. The users have the option to show/hide these layers.

Performance wise, is it better (1) to create all layers at once and display/hide them when it's needed using opacity or visibility for example or should (2) I create/remove the layers every time I show/hide them?

If option 1 is the best, should I use opacity (paint property) or visibility (layout property) to control this show/hide behavior?

Upvotes: 2

Views: 358

Answers (1)

Ricardo Weiss
Ricardo Weiss

Reputation: 51

When creating all layers previously, you are going to have a smoother user experience, without the need of wait to load, and potential flickering.

The issue is that if the user dont necessarily need all layers, that means if he is not going to view all and still have to download and load all the data, it can cause an unnecessary usage of memory and cpu (and battery if the user is in a mobile phone).

So you have a trade off here, between pre-loading everything and having a smoother UX, or loading only when necessary, saving some computering costs but it can have some flickering or waiting time to load the data depending on the size of it.

About the opacity vs visibility question, visibility generally costs less to set than opacity, as changing the layout is faster than the paint in most cases.

Upvotes: 0

Related Questions