Getting Started with Map Gesture Controls

Map Gesture Controls works with multiple mapping libraries. Pick yours to get started:

• OpenLayers -- the original adapter, using OpenStreetMap tiles
• Google Maps -- the Google Maps JavaScript API adapter
• Leaflet -- the Leaflet adapter, using OpenStreetMap tiles, no API key needed

All configuration (webcam overlay, gesture tuning) is shared across adapters. See Configuration after setup.

How it works

1. Webcam capture: 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: classifies each frame -- left fist or pinch = pan, right fist or pinch = zoom, both hands = rotate, otherwise idle.
3. Map integration: translates hand deltas into map API calls (pan, zoom, rotate/heading).

Camera data never leaves the device. Everything runs in the browser via MediaPipe WASM.

Requirements

• A modern browser with WebGL and getUserMedia (webcam permission)
• One of the supported mapping libraries (OpenLayers 10.x, Google Maps JavaScript API, or Leaflet 1.9.x)