RÉSO Map - Montreal Underground City 🗺️

Interactive map of Montreal's Underground City (RÉSO) - the world's largest underground pedestrian network.

🚀 Quick Start

npm install
npm run dev

Open http://localhost:5173

🗺️ Map Navigation

Action	Mouse	Trackpad	Touch
Pan/Move	Click + Drag	Two-finger drag	One-finger drag
Zoom In	Scroll wheel up	Pinch out	Pinch out
Zoom Out	Scroll wheel down	Pinch in	Pinch in
Zoom to Area	Shift + Drag box	-	-
Fly to Location	Click sidebar button	Click sidebar button	Tap sidebar button

Note: Map rotation is not supported in Leaflet.

📁 Project Structure

src/
├── components/
│   └── MapView.tsx    # Main map with sidebar
├── data/
│   ├── entries.ts     # Entry point locations
│   └── reso.json      # RÉSO tunnel GeoJSON (placeholder)
├── App.tsx
└── index.css          # Tailwind + Leaflet styles

🎨 Current Features

• ✅ Dark theme with CARTO basemap (30% opacity for orientation)
• ✅ RÉSO tunnels rendered in cyan (#00FFCC)
• ✅ Entry point markers (McGill, Place-Ville-Marie, etc.)
• ✅ Fly-to navigation sidebar
• ✅ Responsive zoom controls

📝 TODO

• Replace placeholder GeoJSON with real Overpass API data
• Add checkpoint system with ability to add/remove markers
• Search functionality
• Mobile responsive sidebar (collapsible)
• Route highlighting between locations

🛠️ Tech Stack

• React 18 + TypeScript
• Vite
• React-Leaflet / Leaflet.js
• Tailwind CSS
• Lucide React (icons)