Problems displaying overlapping portions of two fill-extrusion layers of the same height and different colors
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js
**browser**: Google
### Steps to Trigger Behavior
1. Add two fill-extrusion layers.
2. Set these two layers to the same fill-extrusio-height, different fill-extrusio-color.
3. There is a display problem with the overlapping portion of these two layers.
### Link to Demonstration
https://codepen.io/SuperHuZhiPeng/pen/PorzJpe.
### Expected Behavior
The overlapping portion should only show the color of the uppermost layer.
### Actual Behavior
The overlapping portion of the two layers will show the colors of the two layers.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the overlap in the linked CodePen using Mapbox GL JS v3.5.1, then trace the fill-extrusion rendering path responsible for layer ordering and depth. Done means the overlapping area displays only the color of the uppermost layer, with the behavior verified against the demonstration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100