Label glyphs overlap when y-axis text-offset applied
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: Whatever got included in https://www.mapbox.com/studio/bundle.js?v2016-11-29-19-28-56
When text-offset is applied, it seems that every glyph is offset individually. This leads to character overlap in situations where tight curves are encountered. When there is no offset, the glyph placement seems to work well.
placement: line; text-offset: 0 Everything looks good.
placement: line; text-offset: 1 Characters overlap near tight corners
Expected Behavior
The expected behavior would be that characters don't overlap when a y offset is applied.
A possible approach to this might be to calculate the line-offset, then place the glyphs along the new offset (invisible) line, rather than offsetting characters individually.
Vaguely related: https://github.com/mapbox/mapbox-gl-js/issues/1196
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 reported map-label case with placement: line and text-offset values of 0 and 1, using the linked screenshots as the expected comparison. Trace the glyph placement path and verify that applying a y offset no longer causes characters to overlap near tight curves.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100