What I Built

Adventure Map is a crowdsourced social map designed to get hikers, explorers, and off-road adventurers outside. Instead of just dropping standard pins, it provides an intuitive freehand trail-drawing engine where users can seamlessly paint their own trails directly onto an interactive 3D map. It helps people discover hidden waterfalls, map out dangerous zones, and plan safe excursions.

Code

Anirudh0465 / Adventure-map

Adventure Map

Adventure Map is a crowdsourced social map for hikers, explorers, and off-road adventurers. Discover hidden waterfalls, navigate dangerous zones, and map out your next excursion using our intuitive freehand trail-drawing engine.

Features

Core Mapping & Exploration

Interactive 3D Map: Fluid MapLibre GL integration with seamless toggling between Street and Satellite views.
Smart Filtering: Instantly declutter the map by filtering for All Trails, My Trails, Scenic, or Danger Zones.

Drawing & Navigation

Freehand Trail Engine: Paint custom, continuous trails directly on the map with categorized brushes (Normal/Blue, Moderate/Yellow, Danger/Red).
AI Auto-Routing: The moment you draw a normal path, an AI engine (Powered by OSRM) instantly snaps your hand-drawn line to the nearest real-world roads and hiking trails.
Live GPS Tracking: Hit "Start Tracking" on mobile to automatically paint the trail behind you as you walk in real-time.

Social & Community

Google Auth & Profiles: Instant…

View on GitHub

How I Built It

To make trail drawing magical and effortless on mobile, I used the Open Source Routing Machine (OSRM) API as an intelligent spatial routing engine. When a user haphazardly draws a freehand "Normal Path" on their touchscreen, the app instantly queries the OSRM engine. The AI analyzes the messy coordinates, matches them to real-world pedestrian and hiking paths, and seamlessly snaps the drawn line to the actual physical trails!

I built the frontend with React, Vite, and MapLibre GL JS, and the backend with Node.js, Express, and MongoDB.

Why Does Open Innovation Matter?

Building with open source tools like MapLibre and OSRM made this project possible. A closed routing API would have severely rate-limited our real-time trail matching or charged prohibitive costs for processing thousands of GPS coordinates. Open spatial data allows developers to build hyper-localized, outdoor-focused tools without gatekeepers.

My Agent Session

Here is an interactive snippet from my session with Antigravity showing how we debugged MapLibre's touch gesture events and implemented Optimistic UI to fix the AI routing lag on mobile devices:

Debugging Mobile Touch Events & Building Optimistic UI with AI Routing

You

after i clicked on start drawing the trail wasnt being drawn

Agent

Aha! I know exactly why that happened. When you draw on a desktop computer, your browser fires mousedown, mousemove, and mouseup events. However, on a phone, dragging your finger fires touchstart, touchmove, and touchend events!

Our custom freehand drawing logic in the map component was exclusively listening for mouse events, so it was completely ignoring finger swipes on mobile screens.

I've just added the three missing touch event listeners to the drawing logic so it now detects mobile finger drags perfectly. I committed and pushed the fix (a56a6de). Give it a couple of minutes to deploy and your friends will be able to paint trails directly on their screens! Let me know if everything is running smoothly!

You

the trails are disappearign and since the webpage is movingi t cant draw properly, also the small trails drawn are vanishing immediately after removing my finger

Agent

That completely makes sense! I've diagnosed and fixed both of those frustrating mobile issues:

Webpage Moving (Scroll Bug): When you were swiping to draw, your phone's browser thought you were trying to scroll or zoom the entire webpage, which messed up the drawing coordinates. I've now strictly disabled touchZoomRotate, scrollZoom, and applied touch-action: none while you are in drawing mode, locking the screen firmly in place so you can paint smoothly.
Vanishing Trails: Because the AI Auto-Routing queries the OSRM server to snap your line to a real road, there was a ~500 millisecond delay where it waited for the server's response, making your newly drawn path seemingly "vanish". I've just implemented an Optimistic UI Update! Now, the exact jagged path you draw is instantly pasted onto the map without waiting. A split-second later, it magically "snaps" to the road once the AI confirms it.

I've pushed these fixes to GitHub (460719b). Let me know how it feels on your phone once the deploy finishes!

DEV Community

Adventure Map: AI-Powered Trail Routing for Explorers