Seems to be drawing tiles multiple times in a single render

[maeneak]

This is evident when using alpha blend and zooming. Possibly in the getVisibleCoordinates call or possibly overlapping render calls. Investigating

[maeneak]

mapbox is returning 'parent tiles' in the visible tiles array which it uses for smooth scrolling and zooming. Need to find a way to either use these tiles properly or discard them.
https://github.com/mapbox/mapbox-gl-js/blob/master/src/render/draw_raster.js

[maeneak]

Initial solution is to filter the parents and the children and use one of the collections for rendering.

        let zoom = this.map.getZoom();
        let tiles = this.sourceCache.getVisibleCoordinates().map(tileid => this.sourceCache.getTile(tileid));
        let children = tiles.filter(coord => {return coord.tileID.canonical.z == Math.round(zoom);})
        let parents = tiles.filter(tile => {return children.includes(tile)})

Using children gives better resolution but a jagged pan & zoom, while parents are overzoomed but give a better nav experience

[veloman-yunkan]

Another approach is to render a tile only if it doesn't have a parent:

let tiles = this.sourceCache.getVisibleCoordinates().map(tileid => this.sourceCache.getTile(tileid));
let tiles2Render = tiles.filter(t => !this.sourceCache.hasRenderableParent(t.tileID));