search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.06k stars 2.21k forks source link

Layer of Symbols disappears or renders behind 3D Terrain when Map style is changed with Globe projection type. #12483

Open joshkautz opened 1 year ago

joshkautz commented 1 year ago

mapbox-gl-js version: 2.11.1 and 2.12.0-beta.1

browser: Google Chropme [Version 108.0.5359.125 (Official Build) (64-bit)]

Steps to Trigger Behavior

  1. I created CodeSandbox demo.
  2. Click on the Speed Dial in the bottom-right corner, and click the top icon "Change Map Style" with the layers icon.
  3. The layer of symbols appears to sometimes render below the 3D Terrain, and sometimes it will just disappear entirely.
  4. This appears to only happen when I have the projection type set to "globe".

Link to Demonstration

CodeSandbox Demo

Expected Behavior

I would expect the Layer of Symbols to render on top of the 3D Terrain.

Actual Behavior

The Layer of Symbols actually sometimes renders behind the 3D Terrain, or sometimes doesn't display at all.

avpeery commented 1 year ago

Thanks for the reproduction @joshkautz. Can confirm this isn't occurring if I switch the projection to "mercator" in your example.

avpeery commented 1 year ago

@joshkautz The issue you're describing may be resolved by setting: optimizeForTerrain: false, which can be set as a map parameter. Search the keyword "optimizeForTerrain" in the docs here.

Please let us know if this resolves the issue! If not, it appears the example you provided no longer demonstrates the issue at hand. If you can provide an additional minimal code reproduction of the issue that would be helpful.

joshkautz commented 1 year ago

My apologies for that. I've updated the demo and locked it so it'll remain working.

This demo is using react-map-gl, so I don't know if that is at all related to the behavior that we're experiencing.

As you recommended, I tried adding the optimizeForTerrain setting and changing it between true and false, but I can confirm that this makes no difference for both globe and mercator projection modes. From what I can tell, this demo works perfectly when I have mercator mode selected, but as soon as I change it to globe mode, the layer issues begin immediately.

joshkautz commented 1 year ago

I also recently noticed that the symbol layer displays briefly, then disappears, as do all the other style layers from the default map style (like roads, labels, etc). Just an observation.

avpeery commented 1 year ago

Thanks for all the information @joshkautz! We will look into this. If it is possible to provide an additional example without react-map-gl, just a simple mapbox-gl-js setup that would help aid our investigation to this issue.

teryaev commented 4 months ago

Hi @avpeery. Is there any update on this?

Dylansc22 commented 2 weeks ago

I believe I am experiencing this as well. See video...

https://github.com/user-attachments/assets/6f58cf58-f861-4cb2-a762-c4699e697b09

The projection is globe and the 3d terrain is enabled (See screenshot of terrain exaggeration)

image

When I run map.setTerrain() disabling the terrain it fixes the problem

All symbol placement properties are default in mapbox studio (2nd screenshot)

image