visgl / visgl/deck.gl

[Bug] MapLibre Globe Integration

Open
#9,592 14 comments 0 reactions 0 assignees View on GitHub

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

ℹ Caveat up front: I know Globe integration is technically experimental still, this is mostly to document some findings I am seeing in the wild.

When utilizing the @deck.gl/mapbox-overlay extension there appears to be an issue with the canvas interleaving (and technically when not interleaving per example 3 below). I have tried adjusting the parameters prop at the Deck level and layer level but cannot find a combination that draws things correctly. Notably depthCompare: 'always' kind of gives the result I am looking for but effectively removes culling so layers are drawn behind the globe still.

Video of issue:

https://github.com/user-attachments/assets/1472debe-a957-472a-b14d-4c6cda24a57e

Additional oddities:

Text is rendered upside down and has a similar culling/depth type issue:

Image

Image

Flavors
  • React
  • MapboxOverlay
Steps to Reproduce

https://github.com/brandonjpierce/deckgl-maplibre-bug

pnpm i
pnpm run example1
pnpm run example2
pnpm run example3
pnpm run example4
  • Example 1: @deckg-fiber-renderer/dom + maplibre-gl w/ interleaving
  • Example 2: react-map-gl/maplibre + @deck.gl/mapbox-overlay w/ interleaving
  • Example 3: react-map-gl/maplibre + @deck.gl/mapbox-overlay w/ no interleaving
  • Example 4: react-map-gl/maplibre only, no Deck

Examples 1, 2, and 3 each have a different setup just to sanity check things. Examples 2 and 3 in particular are effectively taken directly from the website example. Example 4 is just Maplibre in isolation to ensure there was nothing wrong with the underlying basemap renderer.

I also tried the beforeId and parameters: { cullMode: 'none' } tricks.

Environment
  • Framework version: 9.1.10
  • Browser: Chrome
  • OS: MacOS

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked deckgl-maplibre-bug reproduction and run examples 1–4 with the listed pnpm commands. Compare the MapboxOverlay interleaving and non-interleaving cases against the standalone MapLibre example, focusing on the reported globe culling, canvas interleaving, and upside-down text behavior. Done means the affected examples render layers and text with correct depth and orientation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.