Line layer line-gap-width paint property got overlap when increase its sizes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
When I drawed line layer and set the line-gap-width and increase its sizes. There will be line overlapped
**mapbox-gl version 2.10.0**
Here is when I set line layer gap width to small number and it worked fine

But when I increased it, it being overlapped by each others

are there any ways to remove black overlapped line parts? Please help me
Below is my line layer code:
```
layout: {
'line-cap': ['get', 'lineCap'],
'line-join': ['get', 'lineJoin']
},
paint: {
'line-color': 'black',
'line-gap-width': getLineLayerInterpolation(circleRadius ?? 0),
'line-width': 1
},
type: 'line'
}
```
```
const baseRate = 10000
const level = 'level'
const maxZoomLevel = 22
const zoomLevelRate = {
[`${level}-0`]: 1,
[`${level}-1`]: 1,
[`${level}-2`]: 1,
[`${level}-3`]: 1,
[`${level}-4`]: 1,
[`${level}-5`]: 2,
[`${level}-6`]: 4,
[`${level}-7`]: 8.1,
[`${level}-8`]: 16.3,
[`${level}-9`]: 32.7,
// eslint-disable-next-line sort-keys-fix/sort-keys-fix, sort-keys
[`${level}-10`]: 65.4,
[`${level}-11`]: 130.8,
[`${level}-12`]: 261.6,
[`${level}-13`]: 523.3,
[`${level}-14`]: 1046.6,
[`${level}-15`]: 2093.2,
[`${level}-16`]: 4186.4,
[`${level}-17`]: 8372.9,
[`${level}-18`]: 16745.8,
[`${level}-19`]: 33491.6,
[`${level}-20`]: 66983.2,
[`${level}-21`]: 133966.4,
[`${level}-22`]: 267932.9
}
export const getLineLayerInterpolation = (radius: number) => {
const interpolates: Expression = ['interpolate', ['linear'], ['zoom']]
for (let i = 0; i <= maxZoomLevel; i++) {
interpolates.push(
...[
i,
['/', ['*', zoomLevelRate[`${level}-${i}`], ['*', radius, 2]], i === maxZoomLevel ? baseRate / 2 : baseRate]
]
)
}
return interpolates
}
```
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 with mapbox-gl 2.10.0 using the reported line-layer configuration and getLineLayerInterpolation expression. Compare the small and increased line-gap-width cases to identify whether the behavior comes from line rendering or the expression; done means the overlap cause and a verified correction are established.
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
- Needs clarification
- Newbie friendliness
- 25/100