Fix tiles preloading when a source is not yet loaded

src/source/source.js

@@ -60,6 +60,7 @@ export interface Source {
 
     fire(event: Event): mixed;
     on(type: MapEvent, listener: (Object) => any): Evented;
+    off(type: MapEvent, listener: (Object) => any): Evented;
     setEventedParent(parent: ?Evented, data?: Object | () => Object): Evented;
 
     +onAdd?: (map: Map) => void;

src/source/source_cache.js

@@ -994,6 +994,17 @@ class SourceCache extends Evented {
      * @returns {Object} Returns `this` | Promise.
      */
     _preloadTiles(transform: Transform | Array<Transform>, callback: Callback<any>) {
+        if (!this._sourceLoaded) {
+            const waitUntilSourceLoaded = () => {
+                if (!this._sourceLoaded) return;
+                this._source.off('data', waitUntilSourceLoaded);
+                this._preloadTiles(transform, callback);
+            };
+
+            this._source.on('data', waitUntilSourceLoaded);
+            return;
+        }
+
         const coveringTilesIDs: Map<number, OverscaledTileID> = new Map();
         const transforms = Array.isArray(transform) ? transform : [transform];
 

test/unit/source/source_cache.test.js

@@ -1897,5 +1897,26 @@ test('SourceCache#_preloadTiles', (t) => {
         sourceCache.getSource().onAdd();
     });
 
+    t.test('waits until source is loaded before preloading tiles', (t) => {
+        const transform = new Transform();
+        transform.resize(511, 511);
+        transform.zoom = 0;
+
+        const {sourceCache} = createSourceCache({
+            loadTile (tile) {
+                t.ok(sourceCache._sourceLoaded, 'source is loaded before preloading tiles');
+                t.equal(tile.tileID.key, new OverscaledTileID(0, 0, 0, 0, 0).key);
+                t.end();
+            }
+        });
+
+        // Marks source as not loaded
+        sourceCache._sourceLoaded = false;
+        sourceCache._preloadTiles(transform);
+
+        // Fires event that marks source as loaded
+        sourceCache.getSource().onAdd();
+    });
+
     t.end();
 });