question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MapboxLayer from @deck.gl/mapbox z-fighting with mapbox layers

See original GitHub issue

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 image

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:open
  • Created 3 years ago
  • Reactions:1
  • Comments:10

github_iconTop GitHub Comments

1reaction
Pessimistresscommented, Jun 20, 2020

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

0reactions
Akiyamkacommented, Jun 19, 2020
parameters: {
  depthTest: false
}

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found