Allow raster source tile updates to re-trigger tile request that failed previously (#4890)

* Clear errored tile on initial data load event from source

* Add supporting unit test

* Revise approach to attach to original event broadcast and catch at reload call

* Remove unused 'e'

* Update test to reflect updated main branch

* Feedback updates. Remove unneeded boolean var. Remove unused Boolean cast

* Update changelog

* Spacing

---------

Co-authored-by: Aaron Caldwell <[email protected]>

Author: wagewarbler

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### 🐞 Bug fixes
 - ⚠️ Fix order of normalizeSpriteURL and transformRequest in loadSprite ([#3897](https://github.com/maplibre/maplibre-gl-js/issues/3897))
 - ⚠️ Remove unminified prod build ([#4906](https://github.com/maplibre/maplibre-gl-js/pull/4906))
+- Fix issue where raster tile source won't fetch updates following request error ([#4890](https://github.com/maplibre/maplibre-gl-js/pull/4890))
 - _...Add new stuff here..._
 
 ## v5.0.0-pre.3

src/source/raster_tile_source.ts

@@ -85,7 +85,7 @@ export class RasterTileSource extends Evented implements Source {
         extend(this, pick(options, ['url', 'scheme', 'tileSize']));
     }
 
-    async load() {
+    async load(sourceDataChanged: boolean = false) {
         this._loaded = false;
         this.fire(new Event('dataloading', {dataType: 'source'}));
         this._tileJSONRequest = new AbortController();
@@ -101,7 +101,7 @@ export class RasterTileSource extends Evented implements Source {
                 // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
                 // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
                 this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
-                this.fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
+                this.fire(new Event('data', {dataType: 'source', sourceDataType: 'content', sourceDataChanged}));
             }
         } catch (err) {
             this._tileJSONRequest = null;
@@ -133,7 +133,7 @@ export class RasterTileSource extends Evented implements Source {
 
         callback();
 
-        this.load();
+        this.load(true);
     }
 
     /**

src/source/source_cache.test.ts

@@ -527,6 +527,33 @@ describe('SourceCache / Source lifecycle', () => {
 
     });
 
+    test('does reload errored tiles, if event is source data change', () => {
+        const transform = new MercatorTransform();
+        transform.resize(511, 511);
+        transform.setZoom(1);
+
+        const sourceCache = createSourceCache();
+        sourceCache._source.loadTile = async (tile) => {
+            // this transform will try to load the four tiles at z1 and a single z0 tile
+            // we only expect _reloadTile to be called with the 'loaded' z0 tile
+            tile.state = tile.tileID.canonical.z === 1 ? 'errored' : 'loaded';
+        };
+
+        const reloadTileSpy = jest.spyOn(sourceCache, '_reloadTile');
+        sourceCache.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
+                sourceCache.update(transform);
+                sourceCache.getSource().fire(new Event('data', {dataType: 'source', sourceDataType: 'content', sourceDataChanged: true}));
+            }
+        });
+        sourceCache.onAdd(undefined);
+        // We expect the source cache to have five tiles, and for all of them
+        // to be reloaded
+        expect(Object.keys(sourceCache._tiles)).toHaveLength(5);
+        expect(reloadTileSpy).toHaveBeenCalledTimes(5);
+
+    });
+
 });
 
 describe('SourceCache#update', () => {

src/source/source_cache.ts

@@ -253,7 +253,7 @@ export class SourceCache extends Evented {
             !this._coveredTiles[id] && (symbolLayer || !this._tiles[id].holdingForFade());
     }
 
-    reload() {
+    reload(sourceDataChanged?: boolean) {
         if (this._paused) {
             this._shouldReloadOnResume = true;
             return;
@@ -262,7 +262,9 @@ export class SourceCache extends Evented {
         this._cache.reset();
 
         for (const i in this._tiles) {
-            if (this._tiles[i].state !== 'errored') this._reloadTile(i, 'reloading');
+            if (sourceDataChanged || this._tiles[i].state !== 'errored') {
+                this._reloadTile(i, 'reloading');
+            }
         }
     }
 
@@ -928,7 +930,7 @@ export class SourceCache extends Evented {
         // for sources with mutable data, this event fires when the underlying data
         // to a source is changed. (i.e. GeoJSONSource#setData and ImageSource#serCoordinates)
         if (this._sourceLoaded && !this._paused && e.dataType === 'source' && eventSourceDataType === 'content') {
-            this.reload();
+            this.reload(e.sourceDataChanged);
             if (this.transform) {
                 this.update(this.transform, this.terrain);
             }

src/ui/events.ts

@@ -461,6 +461,7 @@ export type MapSourceDataEvent = MapLibreEvent & {
     source: SourceSpecification;
     sourceId: string;
     sourceDataType: MapSourceDataType;
+    sourceDataChanged?: boolean;
     /**
      * The tile being loaded or changed, if the event has a `dataType` of `source` and
      * the event is related to loading of a tile.