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.18k stars 2.22k forks source link

Custom Layer has incorrect hierarchy in terrain or globe projection #13246

Closed sakitam-fdd closed 2 months ago

sakitam-fdd commented 2 months ago

mapbox-gl-js version: 2.x and 3.x

browser: Chrome 127.0.6533.88

Link to Demonstration

https://codepen.io/sakitam-fdd/pen/NWZjKZa

Expected Behavior

In terrain or globe projection, Custom Layer maintains the same exact hierarchical relationship as Mercator projection.

image

Actual Behavior

Custom layers override related line layers

image

Case

The cause of this issue currently is here: https://github.com/mapbox/mapbox-gl-js/blob/main/src/style/style.ts#L3033

For the current implementation, we use proxy tiles for spherical mapping. For performance reasons, we only use one layer and group the layers that need to be rendered to the proxy tiles. Is it possible to use multiple groups when there are related layers interrupted?

image

underoot commented 2 months ago

Hello, @sakitam-fdd! Thank you for your feedback!

For v2 of GL JS, you can pass optimizeForTerrain: false, which could fix the layers ordering issue but at the expense of performance. So, it should be separately tested on your exact scenario.

Regarding 3rd version, it's a known limitation, and you can read about it in Slots and performance-optimized layers reordering section on the migration guide page

sakitam-fdd commented 2 months ago

Thank you, optimizeForTerrain: false can work on 2. x. I will look for a solution on renderToTile for 3. x and temporarily close this issue