CustomSource fantom tiles

[SergeiMelman]

mapbox-gl-js version:
v2.9.2, v2.10.0
browser:
Chrome, Firefox, Android Chrome (all are latest)

Steps to Trigger Behavior

1. Create custom Source
2. Skip some tiles in async loadTile(tile, init)(return undefined/null )
3. Add basic rasterLayer with prepared custom Source
4. Issue appears and is clearly seen while using the map - undefined tiles still appear with irrelevant images.

NOTE

If async loadTile(tile, init) is resolving slowly, then fantom tile-picture may appear before actual tile is resolved during zooming

Link to Demonstration

https://metocean.github.io/wxtilembox/bug2.html

1. Start demo
2. wait during zoom in
3. wait during zoom out
   DEMO:

			const map = new mapboxgl.Map({
				container: 'map',
				style: { version: 8, name: 'Empty', sources: {}, layers: [] },
				// projection: { name: 'globe' },
			});

			map.addControl(new mapboxgl.NavigationControl());

			map.showTileBoundaries = true;

			const customSource = {
				type: 'custom',
				dataType: 'raster',
				id: 'customSource',
				tileSize: 256,

				async loadTile({ x, y, z }, init) {
					if (!(x >> (z - 1) && y >> (z - 1))) return; // skip all tiles but bottom-right quadrant of the world
					const canvas = document.createElement('canvas');
					canvas.width = canvas.height = this.tileSize;
					const ctx = canvas.getContext('2d');
					ctx.fillStyle = `rgb(${~~(20 * x)},${~~(20 * y)},${~~(20 * z)})`;
					ctx.fillRect(25, 25, canvas.width - 50, canvas.height - 50);
					ctx.font = '15px sans-serif';
					ctx.fillStyle = 'red';
					ctx.fillText(z + '/' + x + '/' + y, 50, 170);

					return canvas;
				},
			};

			map.on('load', async () => {
				map.addSource(customSource.id, customSource);
				map.addLayer({ id: 'rasterLayer', type: 'raster', source: customSource.id, paint: { 'raster-fade-duration': 0 } });
				setTimeout(() => map.flyTo({ center: [174.8, -40.9], zoom: 6 }), 2000);
				setTimeout(() => map.flyTo({ center: [174.8, -40.9], zoom: 1 }), 4000);
			});

Expected Behavior

Tiles from bottom-right quadrant of the world should be visible. Others should be transparent/invisible.

Actual Behavior

At low zoom level you will see 'yelow' tiles with a wrong Z/X/Y coord imprinted.

[SergeiMelman]

The issue has the same behaviour if loadTile returns ImageData obtained from the canvas' context.

[SergeiMelman]

I fixed the Demo to present the issue more clearly

[SergeiMelman]

If loadTile does throw instead of return null/undefined then everything works perfect.

[stepankuzmin]

Hi @SergeiMelman,

Thanks for reporting the issue! CustomSource API is still an experimental feature, and we are currently refactoring it here #12063

This PR will denote the "missing" vs. "empty" tile behavior in CustomSource by the undefined vs. null value returned by the loadTile. If the implementation returned undefined as tile data, a map would render an overscaled parent tile in the tile's space. If the implementation returned null as tile data, a map would render nothing in the tile's space.

[SergeiMelman]

Thanks for the CustomSource API. It seems the #12063 covers everything described here.