Pre-caching map tiles (raster) in memory - smooth weather animation

[kukiel]

mapbox-gl-js version: 1.11.0

Question

Hi guys. My use-case is to display how the weather changes over the time and simulate it on the map. Something like this but the simulation will be much faster (lower interval between frames):

It requires to change tile source url - in addition to x/y/z there is timestamp parameter for the weather.

I tried something similar to the solution proposed here - #8048. The thing is that even when the tiles are cached in browser the whole process is not smooth enough - on a screen resolution 1920x958 I had 26 tiles for each frame and the browser is not coping with it smooth enough. Possible solution for that would be to pre-cache all the needed tiles into memory and eliminate requests. Is there any way mapbox supporting that - I would like to be able to provide all the tile urls that should be cached into memory.

Would appreciate any tips on how to solve that using mapbox - could also contribute when given some directions.

[AbelVM]

You might want to take a look at https://github.com/AbelVM/mapworkbox

[kukiel]

@AbelVM thanks for the link - I like the approach but not really my case. I need to animate weather using different raster tile urls - in the current implementation there is no easy way to handle additional parameter besides x/y/z in tiles url like timestamp.

[AbelVM]

There's where WorkBox shines as the easiest way to precache the tiles!

The link I sent you is a PoC to check the performance impact in dynamic tiles precaching based on user interaction, but your use case is the simplest one: it only requires to precache the tiles' time-series at first and that's all. I'm using that approach at MAdB app, where a WorkBox starts precaching all the tiles (up to 80MB if you stay there enough) and some other heavy resources (up to 10MB), priority sorted, as the user opens the app, and then the pan and zoom is the smoothest it can be.

You can even use it to proxy requests so Mapbox requests plain /z/x/y tiles (no changes in data source), while the cached ones have been requested to the server with the extra params. You can even manage the invalidation and refresh of the cache based on your own requirements.

Then, once precaching is managed, you have two main options to animate the map, as described here, :

• One layer per timestamp and toggle their visibility on the right sequence
• One unique layer but multiple sources where the layer source is changed with removeSource / addSource on the right sequence

[kukiel]

@AbelVM after couple iterations over the feature I found a compromise on how to have smooth transition between weather frames. The problem with preloading 45 frames of weather is that it piles up to ~1000 tile requests - even pre-caching is taking a lot so I needed to ditch that. Will have a fallback layer on lower zoom for single image source and starting from some zoom level like 6-7 the tiles layer takes on.

On a side note:
Your first solution with multiple sources and toggled visibility is working as intended - smooth as hell. The downs side is mentioned number of tiles needed to be pre-fetched. It still gave me some inspiration on how to approach that - thank you for your comments!

[andrewharvey]

Your first solution with multiple sources and toggled visibility is working as intended - smooth as hell. The downs side is mentioned number of tiles needed to be pre-fetched. It still gave me some inspiration on how to approach that - thank you for your comments!

As an aside I've had a lot of success using feature states to animate vector timeseries.

[klongmitre]

@kukiel - How are you handling forcing MapBox to reset the cache if the underlying source has been replaced?

[kukiel]

@klongmitre if you mean tile layer there is an internal api to do this, check this code https://github.com/mapbox/mapbox-gl-js/pull/8048/files

const sourceCache = this.map.style.sourceCaches[this.id];
sourceCache.clearTiles();