Map Gesture Controls

Control web maps with hand gestures using your webcam. No mouse, no touch, no backend. Using MediaPipe hand-tracking WASM running entirely in the browser, users can pan a map with the left hand, zoom with the right hand, and rotate with both hands. Each action can be triggered with either a fist or a pinch -- whichever feels more natural. This makes maps accessible in kiosk and exhibit environments, enables hands-free interaction for users with limited mobility, and opens up novel touchless UI experiences. Camera data never leaves the device. 1. Webcam capture: GestureController opens the user's camera and feeds each frame to MediaPipe Hand Landmarker, which returns 21 3-D landmarks per detected hand. 2. Gesture classification: GestureStateMachine classifies each frame using classifyGesture(): left fist or pinch = pan; right fist or pinch = zoom (vertical movement); both hands active = rotate; anything else = idle. A configurable dwell timer (actionDwellMs, default 80 ms) prevents flickering, and a grace period (releaseGraceMs, default 150 ms) smooths gesture releases. 3. OL integration: OpenLayersGestureInteraction translates frame-over-frame hand deltas into ol/Map pan pixel offsets and zoom-level adjustments, applying dead-zone filtering and exponential smoothing before every update. Map Gesture Controls is the open-source project sanderdesnaijer/map-gesture-controls (https://github.com/sanderdesnaijer/map-gesture-controls) by sanderdesnaijer, released under MIT. Ion packages it unmodified from commit d8dd25ed4611, adding only a manifest, an icon and a storage compatibility script.

Written by sanderdesnaijer, published to Oikou by Ben Grande.

• ★ 103 stars on GitHub
• Licence: MIT
• Upstream version leaflet-v1.0.0
• Built from commit d8dd25ed4611

View the repository on GitHub

Not rated. Nobody has said who this app is suitable for, so Personal Clouds and the Oikou app treat it as 18+.

Internet

It asks to reach these hosts, and no others:

• tile.openstreetmap.org
• cdn.jsdelivr.net
• storage.googleapis.com

Your camera, microphone and screen

• Can use your camera while you have it open

The app sees what your camera or the screen you share shows while its page is open. You choose which of these it gets, and your browser still asks you before each use.

Personal Cloud tools

None. It uses nothing from your Personal Cloud beyond its own storage.

Notifications

It does not send push notifications.

Storage

Up to 16 MB on your Personal Cloud.

Sign in to add this web app to a Personal Cloud of yours. It runs there, on your own computer, and you open it from there; nothing is installed on your phone.

Sign in to add