Rendering order of fill layers and symbols is inconsistent with draping enabled/disabled.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: Presumably all versions since the introduction of terrain through 2.8
**browser**: All
### Steps to Trigger Behavior
1. Open a map where a fill layer is added on top of all other layers, for instance [feature state](https://github.com/mapbox/mapbox-gl-js/blob/main/debug/featurestate.html) or [hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) example.
2. Enable terrain or change projection to globe
3. Note that symbols are now rendered above the fill layer.
With draping enabled, symbols appear above the polygon layer, but otherwise the polygon appears on top.


#11812 is the same issue in globe view. A workaround is to switch to `optimizeForTerrain:false` option.
Contributor guide
Research direction
Reproduce the ordering difference with the linked feature state or hover effect example, first without terrain or globe and then with draping enabled. Trace the rendering path responsible for fill layers and symbols, using the optimizeForTerrain:false workaround as a comparison. Done means fill and symbol ordering remains consistent across both configurations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100