mapbox / mapbox/mapbox-gl-js

symbol-placement: line-center produces incorrect results at some zoom levels

Open
#9,628 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
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
  1. Create a geojson source with a LineString feature
  2. Create a text layer for the source with symbol-placement: line-center
  3. 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.