search

maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser
https://maplibre.org/maplibre-gl-js/docs/
Other
6.77k stars 730 forks source link

`icon-size` incompatible with `icon-text-fit` #989

Open drwestco opened 2 years ago

drwestco commented 2 years ago

maplibre-gl-js version: All

browser: All

Steps to Trigger Behavior

  1. Load an image with content, stretchX and stretchY options
  2. Add a symbol layer that uses this image, with 'icon-text-fit': 'both' and 'icon-size': 2
  3. See how the padding around the text varies with text length.

Compare the constant padding around the content area at native image size (left) vs the variable padding with 'icon-size': 2 (right)

image

Link to Demonstration

https://jsbin.com/ficawow/edit?html,js,output

Expected Behavior

Padding around text within the content area should not change based on text length, just because the image is scaled. It should remain constant, as it is with 1:1 scaling.

drwestco commented 2 years ago

It's also strange that icon-size didn't affect the height of the blue non-stretchy area.

drwestco commented 2 years ago

Maybe this is by design. It looks like it does the text-based scaling first, then applies icon-size to the result. That feels backwards. When icon-text-fit is being used, the intent is to fit the text into the icon. I'd expect icon-size to go first, applied to the source image (adjusting content, scaleX and scaleY properties by the same scaling factor). Then the text fitting operation applies to the result. This way, you can use icon-size to affect the non-stretchy portions of the image; icon-text-fit to do the rest.

wipfli commented 2 years ago

@zelonewolf, text-in-image-expert, what is your approach with the highway shields?

ZeLonewolf commented 2 years ago

@ZeLonewolf, text-in-image-expert, what is your approach with the highway shields?

😬 the thanks I get for copy/pasting @1ec5's brilliant hack.

In the case of openstreetmap-americana, we are inserting images into formatted expressions, so the images in that case are treated for the most part as text characters, with some exceptions. Thus, in order to make space between adjacent images, we are using the text-letter-spacing property to set the space between them. We are not using any of the icon-* properties because those properties don't apply to text.

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.