mapbox / mapbox/mapbox-gl-js

Fix incorrect rendering when zoom-dependent text-size is used with icon-text-fit

Open
#5,656 0 comments 0 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

Our current approach to icon-text-fit does not account for zoom-dependent text-size. We read the value of text-size during symbol layout: https://github.com/mapbox/mapbox-gl-js/blob/5bebe1cd725e9af0c6be25928bdbde468bebdf61/src/symbol/quads.js#L72-L92

But, at render time, we don't scale the icon to match the text size at the current zoom level. For icon-text-size: both, we could solve this by disallowing the icon-size property to be set and just using the text-size data in the icon rendering pass.

I'm not sure what we should do to handle cases where icon-text-size is used in only one dimension, and icon-size is used for the other. Some permutations of this could be handled with an extra uniform, but, for example, {icon-text-size: 'width', icon-size: [... composite expression ...], text-size: [... another composite expression ...]} would entail providing additional vertex attribute data.

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 in src/symbol/quads.js at the linked symbol-layout section, then trace the icon-text-fit rendering pass described in the issue. Determine how zoom-dependent text-size and icon-size combinations are represented, including one-dimensional and composite-expression cases. Done means icon rendering matches the text size at the current zoom without breaking supported icon-text-size permutations.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.