mapbox / mapbox/mapbox-gl-js

Line layer line-gap-width paint property got overlap when increase its sizes

Open
#12,300 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
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

image

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

image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.