sanderdesnaijer

sanderdesnaijer / map-gesture-controls

Public

Lightweight JavaScript library for adding touch gestures (pinch-to-zoom, pan) to interactive web maps

sanderdesnaijer.github.iomap-gesture-controls gesture-control gesture-recognition gestures javascript map
17
3
100% credibility
Found Apr 05, 2026 at 16 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Browser-based JavaScript library for controlling OpenLayers maps using hand gestures detected via webcam with MediaPipe hand tracking.

How It Works

1
👀 Discover gesture maps

You find a fun demo where a map moves just by waving your hands in front of a webcam, perfect for touchless kiosks or easy access.

2
📝 Add to your webpage

You copy a few lines of ready-made instructions into your map page to bring the hand controls to life.

3
🗺️ Set up your map

Your existing map or a simple world map appears on the screen, ready for hands-free adventure.

4
🎥 Click to start camera

Tap a button to wake up the webcam preview in the corner, grant permission, and watch it track your hands instantly.

5
✋ Make a fist or pinch

Hold a fist with your left hand to pan, right hand to zoom up or down, or both to rotate – it feels natural after a quick try.

6
⚙️ Tweak the preview

Move the small camera window to a corner, adjust size or fade it, so it doesn't block your map view.

🎉 Hands-free map mastery

Your map dances to your gestures smoothly, ideal for exhibits, presentations, or anyone wanting touchless fun!

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 16 to 17 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is map-gesture-controls?

This lightweight JavaScript library adds hand gesture controls to OpenLayers web maps using webcam tracking. Point a camera: left fist or pinch pans, right hand zooms vertically, both hands rotate—all processed in-browser with MediaPipe WASM, no backend or data leaving the device. Built in TypeScript, it targets touchless map navigation for kiosks and exhibits.

Why is it gaining traction?

Unlike bulky gesture frameworks, it's a dead-simple npm install for existing maps, with tunable sensitivity and a corner webcam overlay that doesn't clutter the UI. Privacy-focused local processing beats cloud-dependent alternatives, and the live demo hooks devs fast—like a lightweight JavaScript animation library but for map controls. Dual fist/pinch triggers make it forgiving for real hands.

Who should use this?

OpenLayers devs building public kiosks, museum interactives, or accessibility tools where touch fails. Suited for frontend teams adding controls to exhibit maps or hands-free dashboards, especially in medical/retail spaces avoiding shared screens.

Verdict

Grab it for prototype touchless maps—the docs, demo, and tests cover basics well—but 16 stars and 1.0% credibility signal early maturity. Solid for experiments, skip for production until more adoption.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.