maplibre-gl-js
maplibre-gl-js copied to clipboard
Subpixel positioning for popup
Hey, everyone!
This PR implements the idea in this Discussion, allowing subpixel positioning of a Popup. This addition allows a Popup to be animated more smoothly. The behavior is optional and can be set at instantiation or via class methods. Please see the discussion for screen recordings of the behavior before and after.
Details
A subpixelPositioning option (a boolean) is added to the Popup. If the boolean is true, the offset rounding that happens when setting the CSS translate property of the Popup is bypassed. The option can also be configured using a getter method, Popup#setSubpixelPositioning.
Before
https://github.com/maplibre/maplibre-gl-js/assets/479605/369b3def-ceb4-4983-b493-2b2c94f847a4
After
https://github.com/maplibre/maplibre-gl-js/assets/479605/cee14f85-3062-4b37-938b-c558360dc81f
Launch Checklist
- [x] Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
- [x] Briefly describe the changes in this PR.
- [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual changes.
- [x] Write tests for all new functionality.
- [x] Document any changes to public APIs.
- [ ] Post benchmark scores.
- [x] Add an entry to
CHANGELOG.mdunder the## mainsection.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Comparison is base (
d7c4118) 86.98% compared to head (f1f7de8) 91.00%. Report is 13 commits behind head on main.
Additional details and impacted files
@@ Coverage Diff @@
## main #3710 +/- ##
==========================================
+ Coverage 86.98% 91.00% +4.01%
==========================================
Files 240 243 +3
Lines 32238 48548 +16310
Branches 2118 5695 +3577
==========================================
+ Hits 28043 44180 +16137
- Misses 3315 4182 +867
+ Partials 880 186 -694
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
Looks good in general, thanks! Can you add a before and after video by any chance?
Looks good in general, thanks! Can you add a before and after video by any chance?
@HarelM There are before and after videos in the attached discussion — I'll pull the examples into the PR so that they are more readily available.
Didn't have luck running benchmarks — I'm experiencing issues similar to this bug report. I pushed some updates, though, so this should be ready for review otherwise.
So much nicer to look at, thanks!