mapbox-gl-js
mapbox-gl-js copied to clipboard
CustomSource tiles transition incomplete
mapbox-gl-js version: v2.9.2 browser:
Chrome, Firefox, Android Chrome (all are latest)
Steps to Trigger Behavior
- Create custom Source from official demo
- Add some image postprocessing into loadTile (I think, this step is essential in order to reproduce)
- Add basic rasterLayer with prepared custom Source
- Issue appears and is clearly seen during zoom, pan, rotate.
- 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:
- start https://metocean.github.io/wxtilembox/
- wait 2 sec (till you see the map)
- wait 2 more sec (during flyTo)
- when zooming is finished you can see some dirty tiles from different zoom levels
- 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).