Support two-finger panning with laptop touchpad
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Motivation
In certain contexts, map panning feels more intuitive for users on touch-pad enabled laptops when achieved through a two-finger gesture. This behaviour mirrors what is seen in other canvas-centric web applications like Figma, Canva, and Apple Maps for OSX. While these apps may not all be map-focused, the two-finger pan gesture has become a widely recognised mechanism for canvas panning.
From my observations, users who predominantly operate on laptops stand to benefit from having this gesture-based panning option. A related issue, #2618, was brought up by @JarnoLeConte back in 2016. It was only partially addressed with the introduction of the gestureHandling property. The attention it got, reflected by 50 thumbs-up reactions, suggests that there's at least some demand for such a feature.
Proposed Implementation
I was drawn to this feature for another project and successfully implemented this behaviour using a function that leverages the map.panBy method. This function, consisting of only 11 lines of code, also incorporates a helper function to identify touchpad scrolling.
Codepen example
Try panning with a touchpad, and notice pinch-to-zoom and double-click behaviour is preserved.
function panHandler(e) {
const trackPadSensitivity = 0.6;
const mouseSensitivity = 0.1;
if (!e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
const sensitivity = isTouchpad(e) ? trackPadSensitivity : mouseSensitivity;
map.panBy([e.deltaX * sensitivity, e.deltaY * sensitivity], {
duration: 0
});
}
}
I'd really appreciate any feedback and thoughts on this addition, particularly around the technical implementation. I'd be happy to put together a PR (my first contribution) if there is support for this feature.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing gestureHandling behavior and the map.panBy entry point, then compare the proposed CodePen behavior with related issue #2618. Done should mean two-finger touchpad panning works while pinch-to-zoom and double-click behavior remain preserved; the issue does not name repository files or tests to run.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100