Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

icon size jump using a nested data expression in a zoom expression #8895

Open
tristen opened this issue Oct 23, 2019 · 5 comments
Open

icon size jump using a nested data expression in a zoom expression #8895

tristen opened this issue Oct 23, 2019 · 5 comments
Labels

Comments

@tristen
Copy link
Member

tristen commented Oct 23, 2019

mapbox-gl-js version: v1.4.0
browser: Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)

Steps to Trigger Behavior

Create a zoom expression for the icon-size property with a data condition within it. i.e.

[
  'interpolate',
  ['exponential', 1.5],
  ['zoom'],
  8,
  ['match', ['get', 'iso_3166_1'], ['JP'], 0.75, 1],
  14,
  1
]

Link to Demonstration

The bug looks like this:

icon-jump

The test case I have for this is pretty subtle and doesn't totally match the gif above. It's possible the addition of collision detection where there are more features on the map is causing it? https://jsfiddle.net/tristen/zn7ks40L/

Expected Behavior

There would be no jump in size but that the size of the icon would interpolate across the zoom expression set.

Actual Behavior

Icon jumps down in size when zooming from one zoom stop to another.

@tristen tristen changed the title icon size jump using data expression in zoom interpolation icon size jump using a nested data expression in a zoom expression Oct 23, 2019
@arindam1993
Copy link
Contributor

I think this could have potentially fixed this.
https://github.com/mapbox/mapbox-gl-js/pull/8818/files

@ansis what do you think?

@chloekraw
Copy link
Contributor

The effect of this behavior on the jsfiddle is pretty subtle, but I forked it to use v1.5.0-beta.1 which contains #8818 and the behavior when moving across zoom levels appears to be the same: https://jsfiddle.net/k1ymzr79/.

I also wonder if the problem is not in the interpolation of icon-size but that text-size isn't zoom-interpolated with comparable logic, so that at lower zooms, the text is too big for the icon and makes the icon size appear incorrect in relation.

@tristen what do you think?

@tristen
Copy link
Member Author

tristen commented Oct 24, 2019

I also wonder if the problem is not in the interpolation of icon-size but that text-size isn't zoom-interpolated with comparable logic, so that at lower zooms, the text is too big for the icon and makes the icon size appear incorrect in relation.

@chloekraw even with the same comparable logic for text-size the icon itself jumps down considerably in size.

icon-jump

@ansis
Copy link
Contributor

ansis commented Nov 22, 2019

This is a tricky case because the icon is affected both by text-size (because of icon-text-fit) and icon-size.

Do you want both the text and icon to scale smoothly to a smaller size? Or just the icon?

@tristen
Copy link
Member Author

tristen commented Nov 23, 2019

Hmm @ansis that particular example doesn't use icon-text-fit. the icon is a fixed width.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants