sanderdesnaijer/map-gesture-controls — explained in plain English
Analysis updated 2026-05-18
Add touchless gesture controls to an existing web map for a kiosk
Build accessible, hands-free map interfaces for museum exhibits
Let users pan and zoom a map with fist or pinch gestures
Integrate gesture controls into an OpenLayers, Google Maps, or Leaflet app
| sanderdesnaijer/map-gesture-controls | ardupilot/node-mavlink | nickustinov/itsyconnect-macos | |
|---|---|---|---|
| Stars | 96 | 96 | 96 |
| Language | TypeScript | TypeScript | TypeScript |
| Last pushed | — | 2025-08-26 | — |
| Maintenance | — | Quiet | — |
| Setup difficulty | easy | moderate | moderate |
| Complexity | 2/5 | 3/5 | 3/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
The start() call must be triggered by a user action to satisfy browser camera permission rules.
Map Gesture Controls is a JavaScript library that lets users navigate web maps using hand gestures detected through their webcam, with no mouse or touch screen required. The hand tracking runs entirely inside the browser using WebAssembly (a technology that lets high-performance code run in the browser without a server), so no video data ever leaves the user's device. The gesture mapping is straightforward: making a fist or pinch with your left hand pans the map (moves it around), doing the same with your right hand zooms in and out based on vertical movement, and using both hands simultaneously rotates the map. Users can choose between fist or pinch gestures for each action, whichever feels more comfortable. The library supports three popular web mapping tools: OpenLayers, Google Maps, and Leaflet. Each has its own package that integrates directly with that map's API, so adding gesture controls to an existing map takes only a few lines of code, create a GestureMapController, pass in your existing map object, and call start() (which must be triggered by a user action to satisfy browser security requirements for camera access). The technology uses MediaPipe, a hand-tracking toolkit by Google, which detects 21 points on each hand in three dimensions from each video frame. This information is then classified into gesture states and translated into smooth map movement commands, with smoothing and debounce filters to prevent jittery behavior. This is particularly useful for kiosk installations, museum exhibits, and accessibility use cases where touchless interaction is valuable. The full README is longer than what was provided.
A JavaScript library that lets people pan, zoom, and rotate web maps using webcam-tracked hand gestures instead of a mouse or touchscreen.
Mainly TypeScript. The stack also includes TypeScript, WebAssembly, MediaPipe.
Setup difficulty is rated easy, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.