mapbox / mapbox/mapbox-gl-js

Icon-image incorrect scaling in combination with text-size stops property

Open
#11,678 1 comment 0 reactions 0 assignees View on GitHub
bug :lady_beetle: needs discussion :speech_balloon:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 2.7.1

**browser**: Google Chrome Version 99.0.4844.84 (Official Build) (x86_64)

### Steps to Trigger Behavior

Use `symbol` with `icon-image` and `text-size:{ stops: [...] }` and watch behaviour of scaling image behind text when zoom level is going from one integer to another, so for example 3.98 -> 4.01.

### Link to Demonstration
https://codepen.io/sienki-jenki/pen/MWrVwav

### Expected Behavior
Smooth/correct width calculation for image behind text.

### Actual Behavior
Width of image is changing "drastically".

**Zoom 3.98:**
![Mapbox_icon-image_scale_issue](https://user-images.githubusercontent.com/34219675/162028620-0f898709-a96b-487d-b8e9-d7b3463863bd.png)

**Zoom 4.01:**
![Mapbox_icon-image_scale_issue](https://user-images.githubusercontent.com/34219675/162028702-ad68393b-33ef-4f22-a97d-c297da6f4679.png)

Take a look at distance between left black border of image and first letter F and last letter R and black border on right side. There is too much space on zoom 4.01. (This zoom level is just an example, it appears on every jump from one integer to another.)

From what I checked in code, I can see that `fontScale` calculated as `fontScale = layoutTextSize / glyphSize` in `src/symbol/symbol_layout.js` on line `392` is different on every zoom level, which makes sense, but it's only re-calculated on every zoom integer change. I'm guessing that the problem is not re-calculating image often enough and there is no synchronization between calculated `fontScale` in `symbol_layout.js` and real font size (real, meaning what we see on map) that is being calculated using `text-size:{ stops: [...] }`

I understand that this might be pretty expensive to calculate width/height of image on every zoom level change, but maybe it would be possible to set some `zoom delta` of how often such re-calculation should be made, therefore it could be adjusted for user needs.

Contributor guide

Open the contributing guide

Research direction

Start with the CodePen reproduction and inspect src/symbol/symbol_layout.js around line 392, where fontScale is calculated. Compare the image sizing with text-size stops as zoom crosses an integer boundary. Done means the image width changes smoothly and remains correctly aligned with the text between zoom levels.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, 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.