mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

CustomSource tiles transition incomplete

Open SergeiMelman opened this issue 3 years ago • 0 comments

mapbox-gl-js version: v2.9.2 browser:

Chrome, Firefox, Android Chrome (all are latest)

Steps to Trigger Behavior

  1. Create custom Source from official demo
  2. Add some image postprocessing into loadTile (I think, this step is essential in order to reproduce)
  3. Add basic rasterLayer with prepared custom Source
  4. Issue appears and is clearly seen during zoom, pan, rotate.
  5. If issue is not seen, try to refresh the page, so tiles are reloaded from the local cache.
const map = new mapboxgl.Map({container: 'map', style: { version: 8, name: 'Empty', sources: {}, layers: [] }});

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

	async loadTile(tile, init) {
		const im = createImageBitmap(await (await fetch(`https://tile.openstreetmap.org/${tile.z}/${tile.x}/${tile.y}.png`, init)).blob());
		/*simulate data heavy preprocessing*/ await Promise.all([im, new Promise((resolve) => setTimeout(resolve, 2500))]);
		return im;
	},
};
map.on('load', async () => {
				map.addSource(customSource.id, customSource);
				map.addLayer({ id: 'rasterLayer', type: 'raster', source: customSource.id });
				setTimeout(() => map.flyTo({ center: [0, 15], zoom: 4 }), 4000);
			});

Link to Demonstration

Demo description:

  1. start https://metocean.github.io/wxtilembox/
  2. wait 2 sec (till you see the map)
  3. wait 2 more sec (during flyTo)
  4. when zooming is finished you can see some dirty tiles from different zoom levels
  5. If you try to move (pan) the map then all tiles become normal

Expected Behavior

All tiles are clear

Actual Behavior

Some tiles appear faded (semitransparent) and look like the transition between zoom levels was not completed.

Notes

IMO the issue tends to appear if many tiles are loaded at the same time. In the demo I added timer to simulate data processing. The issue is harder (but possible) to reproduce if loadTile resolves fast (no heavy processing). If the timer is set to random, then the issue is harder to see (but possible).

SergeiMelman avatar Aug 11 '22 05:08 SergeiMelman