sanderdesnaijer/map-gesture-controls

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.