mapbox-gl-js
mapbox-gl-js copied to clipboard
Pattern scale reset
Current Issue In order for fill patterns to scale with tile sizes between zoom level integers, patterns are scaled up to 200%. If a map designer wants to use a fill pattern, they must be okay with a large range of pattern scaling for their map (a). If the map comes to rest in-between integer zoom levels, the patterns can be way off the intended map design (b).
Proposed Solution Reset the pattern scale to 100% when the map is at rest. “Rest” could be defined by 200ms of no zooming, but this should be tested. If a user is zooming in and out with a high frequency of stops, a constant resetting of pattern scale could be visually distracting. Currently, place-labels and other symbol layers are being re-rendered when the map is ‘at rest,’ so perhaps resetting the pattern scale would go unnoticed. I could see this enhancement being beneficial for line patterns as well.
a: scaling range of fill-patterns for one zoom level
b: visual difference between scale polars
cc @ansis @kkaefer @eschow @nickidlugash
Other suboptimal effects of the current implementation:
- Any scaling over 100% results in reduced resolution, which can be quite apparent at 199% scale on high-resolution screens. Switching over to vector icons should eventually fix this issue.
- While scaling up/down across an integer zoom level is continuous, the reset between zoom levels is abrupt between 199% and 100%, though there is a hard-coded cross-fade value (300ms?) to ease the transition.
Hopefully the proposed solution will ease these two issues a bit too, since more resets should mean fewer instances of scaling close to 199%.
Reset the pattern scale to 100% when the map is at rest.
To clarify, would we want to do this in addition or instead of reseting at integer zoom levels? My instinct is that it should be in addition, since there may be situations (like during animations) where a map will be zooming across multiple zoom levels with no rest.
I could see this enhancement being beneficial for line patterns as well.
And line dasharrays!
@ansis Any thoughts on how big of a lift it would be to test out this implementation?
+1 on all points. The scaling of a pattern that's been designed to specific dimensions is pretty undesirable. To bounce off the proposed solution, could this be introduced as a new property with two enums?
{
fill-pattern-scale: `{auto|fixed}` // Defaults to 'auto'?
}
Edit: Removed Current behavior
from the code comment. It wasn't my intention to say that 🙈
fill-pattern-scale:
{auto|fixed}
// Defaults to 'auto'? (current behavior)
To me auto
would imply that it automatically rescales - which is not the current behavior, and fixed
suggests that it stays at a fixed scale.
@tristen Would this work better as a binary value? When true
, scale the pattern between integer zoom levels, and when false
scale the pattern during zoom operations and reset at rest.
@tristen Would this work better as a binary value? When
true
, scale the pattern between integer zoom levels, and whenfalse
scale the pattern during zoom operations and reset at rest.
It could, I guess I was thinking if it was an enum, that it would give way to other scaling options in the future.
@tristen what kinds of use cases do you have in mind where you might want the current behavior? I wasn't thinking of exposing this as an option 🤔
cc @mapbox/map-design-team
@tristen what kinds of use cases do you have in mind where you might want the current behavior? I wasn't thinking of exposing this as an option 🤔
Oh! to be clear, we would do away with the current behavior. The options would be this:
-
auto
(default behavior) would scale the pattern but reset to 100% resolution when the map is no longer scrolling. -
fixed
would not scale but persist a 100% resolution.
Any updates on this? Would be glad if the proposed options above get implemented.