Avoid tile popping/flicker on RasterTileSource setTiles

[jo-chemla]

Motivation

This dynamic raster tiles support PR is a great addition, especially for periodic/multi-temporal raster tilesets.

However, it induces tiles popping on tiles url update, as shown in this react-map-gl issue. When one does use setTiles with a single TMS url, the previous rasterLayer tiles of the source are dumped - resulting in the map background style being displayed for a short amount of time until the new tiles are loaded and start populating the map. This makes for a harsh transition especially for periodic tilesets.

Design Alternatives

What would be interesting is to allow for a different approach, to unload each tile only when the new one is loaded, similar to how zoom.earth works.

Mock-Up

Mapbox example with tiles popping

https://github.com/mapbox/mapbox-gl-js/assets/16822841/ec032bfd-797c-4303-92b7-bba53334f8d2

Zoom.earth example without tiles popping

https://github.com/mapbox/mapbox-gl-js/assets/16822841/acea8ee4-5ef2-410f-875e-470ac9322271

[jo-chemla]

Bugfix for a similar issue on ImageSource shown in this issue/PR. It involved retaining the _loaded status on the source while fetching the new image.

Probably cannot be applied here since this property is at the source level rather than for each tile, but might be useful.

[underbluewaters]

I'd love to see RasterSource match the behavior ImageSource. I'm trying to choose between using ImageSource vs Raster for showing Esri dynamic map services. I have to choose between an old-school presentation where an image for the whole viewport is requested or a more appealing tiled presentation. Unfortunately changing the layers requested with the tiled presentation results in this "tile popping" so I will probably use ImageSource instead.

[jo-chemla]

I'm trying to choose between using ImageSource vs Raster for showing Esri dynamic map services.

Exactly in the same mindset, using ImageSource could be a replacement to avoid tile popping for wmts server, requesting an image at viewport extent and resolution.

It might not work for all cases, especially for non-matching or non-mercator projections, plus wondering what would happen at low zoom levels in globe view for example.

By the way, did not know about frontiersi/mapbox-gl-esri-sources , interesting library for the task.

[tb4764]

I came up with mapbox-gl.js from another branch a while ago for a different purpose, but, don't know how, it doesn't show the flicker effect when calling setTiles. To make it work, replace your mapbox-gl.js in the dist directory with the one attached. I've already spent some time to figure out what's different, but didn't get anywhere. At least it works for now. mapbox-gl.js.zip

It would be nice if someone decodes this, and makes a PR.