Repository navigation
Map: pinch to zoom the map instead of the page - #99
Merged
Merged
Conversation
A trackpad pinch (ctrl+wheel in Chromium and Firefox, gesture events in Safari) over the map zoomed the whole page, because the map only listens to touch pinches. Catch those on the map, zoom the map around the pointer and keep the page still. A plain wheel still scrolls the page past the map. Adds an end-to-end scenario for both pinch kinds.
davd-gzl
marked this pull request as ready for review
October 12, 2026 09:23
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Before: pinching on a trackpad over the map, or ctrl+scrolling with a mouse, zoomed the whole page and the map stayed where it was.
After: a pinch over the map zooms the map around the pointer, and the page stays still. This works in Chrome, Edge, Firefox and desktop Safari. A plain scroll over the map still scrolls the page, and pinching on a phone works as before.
Screenshots
These show the map after the same trackpad pinch on Paris → Marseille. Tiles don't load in the test browser, so only the route is drawn.
How
zoomOnPinchinsrc/ui/map.tscancels pinches over the map, bothwheelevents withctrlKeyand Safari'sgesture*events, and applies them as map zoom steps instead. Plain wheels are left alone, and so are touch pinches, which Leaflet'stouchZoomalready handles.Checks
tsc,npm test(216 passed),npm run buildandnpm run test:e2e(24/24) pass. The test run includes a new end-to-end scenario for both kinds of pinch and for a plain scroll.