Map Gesture Controls

Appearance

Map Gesture ControlsControl maps with your hands

Browser-native hand gesture controls for OpenLayers, Google Maps, and Leaflet. 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. Privacy-first by design.

⚙️

Configurable

Control webcam overlay position, size, and opacity. Tune gesture sensitivity, smoothing, and dead zones to match your use case.

🔷

TypeScript

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

Choose Your Map Library ​

Map Gesture Controls works with three popular mapping libraries. Pick the one you already use and get started in minutes. Same gesture API, same configuration, different map renderer.

🗺️

OpenLayers

Full-featured gesture controller for OpenLayers maps. Supports pan, zoom, and rotation with hand tracking. Ideal for GIS applications and advanced mapping workflows.

npm install @map-gesture-controls/ol
Getting StartedExamplesAPI Reference
📍

Google Maps

Drop-in gesture controller for the Google Maps JavaScript API. Same gestures, same config. Perfect for apps already using Google Maps Platform services.

npm install @map-gesture-controls/google-maps
Getting StartedExamplesAPI Reference
🍃

Leaflet

Lightweight gesture controller for Leaflet maps. Works with OpenStreetMap tiles out of the box, no API key needed. Great for open-source and community projects.

npm install @map-gesture-controls/leaflet
Getting StartedExamplesAPI Reference