A reliable way to reload tiles from a vector tile source

[douglasg14b]

Existing Behavior

The current behavior seems to support this, but it is buggy for some reason.

maplibre-gl-js/src/source/vector_tile_source.ts

Lines 136 to 137 in 9e6d57a

	sourceCache.clearTiles();
	this.load();

The above causes the layers that rely on the source to flash, and then reload. However, if this action (clearing the tiles & loading) is performed in quick succession (Even a couple seconds apart), the tiles do not actually reload at all. Why this is, I'm not sure, is there non-synchronous code running that takes it's time to actually finish up?

Expected Solution Behavior:

• Map layers do NOT flash
• Tiles are reliably re-fetched when action is performed over-and-over

Observed Current Behavior:

• Map layers flash
• If action is performed in quick succession, layers do not reload, but they do still flash
  • There are no browser cache hits during this period.

Motivation

If you need to update a vector tile source, you need a way to force the tiles to be re-fetched.

Currently this can be hacked around by manually clearing tiles from a source's tilecache, but even that's buggy & unreliable.

For instance this PR added some ability there, but it still doesn't entirely work.

Use Cases:

• Dynamic data
• User actions change map data
• Map data change events are pushed to the client (Client needs to reload tiles)

Design Alternatives

Unknown?

Design

Unknown?

Mock-Up

User Point of view:

• map.getSource('mySource').reload()

Concepts

Unknown

Implementation

Unknown

[douglasg14b]

Two more ways that don't quite work:

Mark tiles as expired and reload the source

The following causes consistent reloads, but some weirdness happens on tile borders

        const sourceCache: any = (this.map as any).style._sourceCaches[`other:${MapSources.MinesData}`];

        for (const id in sourceCache._tiles) {

            sourceCache._tiles[id].expirationTime = Date.now() - 1000;
            sourceCache._tiles[id].state = 'reloading'; // Can also use 'expired'
            sourceCache._tiles[id].expiredRequestCount = -1 // Try and get this to be 0 when the request is triggered to avoid the artificial delay
        }
        sourceCache.reload();

Not all tiles are reloaded immediately it seems. The following shows up for a couple of seconds, and then all the tiles get re-fetched again (And then AGAIN after that)). Sometimes it takes a couple seconds anyways if it's a different tile then the one under the center of the viewport.

Sometimes tiles take a second or two to reload anyways via this method, I assume because expiredRequestCount continues to iterate despite my attempts to set it (Debugging shows it set to 3,4,5...etc after setting it to anything else.

Mark tiles state as errored

One this that does work (Still causes flashing tiles, and also causes some weird geometry simplification the more it's called):

const sourceCache: any = (this.map as any).style._sourceCaches[`other:${MapSources.MinesData}`];

for (const id in sourceCache._tiles) {
    sourceCache._tiles[id].state = 'errored';
}

This causes the tiles to be reloaded, but each subsequent reload the geometry becomes more and more simplified, as you can see here. This seems to be caused by each subsequent tile reload fetching one more z-level up (The request for the tile goes down 1 zoom level each time the tiles are marked in an errored state)

[xabbu42]

Does mapbox/mapbox-gl-js#8048 (comment) work for you?

[douglasg14b]

@xabbu42 Unfortunately not, it still suffers from:

1. The layer flashing off and back on
2. If actions are a second or two apart, it never reloads the tiles. If I perform multiple actions in a row, calls to this within a couple second window do not cause it to reload. I wait for several seconds and perform an action it reloads as expected.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[douglasg14b]

Bumpidy bump.

I'll be circling back around to this when I'm back on implementing map features, and then more debugging.

[HarelM]

What about setting cache-control for the tiles?
See #366
Might flash a bit, but work in general, wouldn't it.

[douglasg14b]

@HarelM Can you please explain what needs more info on this?

What about setting cache-control for the tiles?
Might flash a bit, but work in general, wouldn't it.

cache-control isn't on-demand tile re-fetch though? The need here is re-fetching tiles on demand in response to an event, not when their cache expires, and an extremely low cache time (ie. 1 second) would be impractical. The user may not be moving around on the map when tiles are changed, and tiles need to be updated in realtime.

Has the thread thus far made this ambiguous? If so, can you ask clarifying questions?

[HarelM]

The answer to the above question is the information I wanted to get.
Thanks.