symbol-placement: line-center produces incorrect results at some zoom levels
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: 1.9.1
browser: Chrome 81
Steps to Trigger Behavior
- Create a geojson source with a LineString feature
- Create a text layer for the source with
symbol-placement: line-center - Zoom in
Link to Demonstration
https://jsfiddle.net/37sgzkme/
Expected Behavior
My understanding is that the label should appear at the center of the geometry at all zoom levels.
Actual Behavior
The label appears at the center of the geometry at all zoom levels below 18. Above 18, multiple labels are rendered along the line, or in some cases the single label simply moves to a new location on the line.
Increasing the source buffer size definitely helps, and in fact solves the issue for some simple lines, but my dataset is dynamic.
The following two lines in symbol_layout.js are certainly eye-catching, but I haven't yet figured out exactly what's going wrong and why.
// 4. `text-size` at zoom level 18. Used for something line-symbol-placement-related.
...
sizes.textMaxSize = unevaluatedLayoutValues['text-size'].possiblyEvaluate(new EvaluationParameters(18));
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
Reproduce the behavior with the linked JSFiddle using a LineString and symbol-placement: line-center, then inspect symbol_layout.js around the textMaxSize calculation called out in the report. The fix is done when the label remains centered and does not duplicate or move unexpectedly above zoom 18, including for dynamic data with smaller buffers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100