Map Gesture Controls

Appearance

Map Gesture ControlsControl maps with your hands

Browser-native hand gesture controls for OpenLayers and Google Maps. Powered by MediaPipe. No backend required.

Get Started
View on GitHub
Screen recording of the map gesture demo. An OpenLayers map with a small webcam preview; the user pans with the left fist or pinch, zooms with the right fist or pinch, and rotates with both hands, all in the browser via MediaPipe

Browser-native

Runs entirely in the browser using MediaPipe WASM. No server, no WebSocket, no data leaves the device.

OpenLayers integration

Drop-in gesture controller for OpenLayers maps. Pan with the left hand, zoom with the right hand, rotate with both.

Google Maps integration

Drop-in gesture controller for Google Maps. Same gestures, same config, different map library.

Configurable

Control webcam overlay position, size, and opacity. Tune gesture sensitivity, smoothing, and dead zones.

TypeScript

Fully typed API. GestureMapControllerConfig, WebcamConfig, TuningConfig, and all core types are exported.