Vector tiles from outdated URLs persist when source URL is updated during active tile fetching

[benjene]

Summary

When updating a vector tile source URL while tiles are still being fetched, MapLibre sometimes continues to display tiles from the old URL mixed with tiles from the new URL, resulting in inconsistent sources and data for the same layer.

Version: 5.6.2

Browsers: Firefox, Chromium, Vivaldi (likely a non-browser specific issue)

Steps to Trigger Behavior

1. Create a vector tile source and layer
2. Reassign the tile URL of the source while tiles are still being fetched
   source.tiles = [newTileURL];

Link to Demonstration

https://jsbin.com/duciyoc/edit?output

'Reproduce bug' button loads tile URL 1 (ocean contours), and then very quickly after, sets the tile URL for the existing source to the second one (mountain contours) and zooms in / out on an area where this issue is noticeable. If the issue is not reproduced, re-run the JSbin container and try again - a few times may be necessary.

Here is a video demonstration as well. At the end of the video I demonstrate the bug with my private tile server where the bug is a lot clearer: https://vimeo.com/1109544583

Expected Behavior

HTTP requests for loading tiles are resent to the new tile URL and the map consistently loads the data from the new tile URL on all tiles.

Actual Behavior

HTTP requests are sometimes not sent out again with the updated tile URL, and the map inconsistently shows tiles in the same layer for two different tile URLs. Notice in the screenshot, only an API call with the old URL is made despite having updated the source to use the second tile URL.

I believe this is due to the tiles being in the 'loading' state, since waiting until all tiles are loaded in the viewport and swapping URLs does not reproduce this issue. The last 10 seconds of the video linked above makes this clear with my own dataset.

I have noticed this in my application since I need to serve geometries on the same layer dynamically while the user might still be interacting with the map.

What I've tried

sourceCache.clearTiles();

• This successfully refetches all tiles including the stuck ones, but this is not appropriate for my use case since I do not want the features to temporarily disappear and reappear from the map - I need the previous data to remain on the screen when I hot-swap datasets.

if (sourceCache._cache) {
    sourceCache._cache.reset();
}
    
for (const id in sourceCache._tiles) {
    sourceCache._reloadTile(id, "expired");
}

map.triggerRepaint();

• Unfortunately does not force the refetching of outdated tiles with new URL

[HarelM]

Thanks for taking the time to open this issue.
sourceCache is an internal field and I don't think you should be using it.
Replacing a source url is somewhat a destructive operation, so I'm not sure you can expect it to be "graceful".
In terms of public API you can:

1. let source = map.getSource(...)
2. source.setUrl(...)

This will reload the source and its data.
if you need something more complicated you might be able to leverage addProtocol to so some magic when fetching the tiles.