MapboxLayer from @deck.gl/mapbox z-fighting with mapbox layers
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 14.6k
- Forks
- 2.3k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 42
Description
Description
DeckGl integrated in mapbox gl context as MapboxLayer render overlay that falls under a layer of mapbox water when bearing closer to 0. Video

Repro Steps
Create deck-gl layer and wrap it in MapboxLayer
import { ScatterplotLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';
const deckLayer = new ScatterplotLayer({
id: 'scatter-plot',
data: ('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'),
radiusScale: 40,
radiusMinPixels: 0.5,
getPosition: (d) => [d[0], d[1]],
getFillColor: (d) => (d[2] === 1 ? [0, 128, 255] : [255, 0, 128]),
});
const deck = new Deck({
gl: map.painter.context.gl,
layers: [deckLayer],
initialViewState: { ... },
controller: true,
});
const mapboxLayer = new MapboxLayer({ id: 'deck-gl-layer', deck });
map.addLayer(mapboxLayer);
I was also found that the problem DID NOT OCCUR in next scenario:
import { ScatterplotLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';
const mapboxLayer = new MapboxLayer({
type: ScatterplotLayer,
id: 'scatter-plot',
data: ('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'),
radiusScale: 40,
radiusMinPixels: 0.5,
getPosition: (d) => [d[0], d[1]],
getFillColor: (d) => (d[2] === 1 ? [0, 128, 255] : [255, 0, 128]),
});
map.addLayer(mapboxLayer);
Environment (please complete the following information):
- Framework Version:
mapbox-gl@1.10.0@deck.gl/core@8.1.9@deck.gl/mapbox@8.1.9@deck.gl/layers@8.1.9
- Browser Version:
Mozilla Firefox 77.0 (64-bit)Chromium Version 81.0.4044.138
- OS:
Fedora release 32 x86_64 5.6.15-300.fc32.x86_64
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the MapboxLayer integration and compare the two repro paths: passing a Deck instance versus configuring ScatterplotLayer directly. Reproduce with the listed Mapbox GL and deck.gl versions while changing the map bearing; done means the MapboxLayer overlay remains above the water layer without z-fighting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100