MapboxLayer from @deck.gl/mapbox z-fighting with mapbox layers
See original GitHub issueDescription
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
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:10
Top Results From Across the Web
Using with Mapbox - deck.gl
This allows you to mix deck.gl layers with base map layers, e.g. below text labels or occlude each other correctly in 3D. Be...
Read more >Show and hide layers | Mapbox GL JS
Create a custom layer switcher to display different datasets. ... a clickable interface that allows a user to enable and disable two different...
Read more >deck.gl and Mapbox GL JS: Better Together - Medium
Pass layers into a <DeckGL/> component as usual. When the Mapbox map is loaded, we create and add MapboxLayers to Mapbox by referencing...
Read more >Add a new layer below labels for deck.gl - Stack Overflow
For mapbox gl it is explained here. I searched their docs also for z-index or picking the label layer from the vector tiles...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This may be related to how mapbox manipulate their layers’ depthRange:
https://github.com/mapbox/mapbox-gl-js/blob/aa6b4b2e51ac19156ba1537baf32a63551313612/src/render/painter.js#L423
The
depthTest: false
parameter fixed the problem with water and flickering points. This is not a solution to the problem, because 3D extrusion is now displayed incorrectly, but it may be closer to understanding the problem of someone who understands it better than me