ReliefMap

Real-time shelter and aid visualization during flood alerts in Jakarta, with live status and map-integrated directions.
Earthquake response in Tokyo with bilingual alerts, nearest hospitals, and high-strain indicators in real time.
“Get Directions” launches Google Maps routing from city center to aid sites—here, 23 mins to a hospital near Shinjuku.

💡 Inspiration

When Jakarta floods, seconds matter. When Tokyo shakes, confusion spreads. In disasters, people often don’t know where to go. ReliefMap was inspired by a single, urgent question:

"Can we instantly show someone nearby emergency resources—before it's too late?"

We envisioned a tool that’s lightweight, multilingual, real-time, and accessible anywhere on Earth. Google Maps Platform made that vision possible.

🚨 What it does

ReliefMap is a disaster response web app that shows live, critical resources—shelters, food, medical—in real time. Users can:

Instantly find the nearest help with one click
See live status updates (Critical / Limited / Available)
Get Google Maps directions instantly
View bilingual alerts in English + local language
Switch between cities like Jakarta (floods) and Tokyo (earthquakes)

🛠️ How I built it

Built entirely on HTML, CSS, and vanilla JavaScript, ReliefMap uses:

Google Maps JavaScript API for map rendering, directions, and marker control
Custom SVG icons for distinct resource types
A live simulation engine that updates resource statuses every 20 seconds
DOM manipulation for real-time UI: stats panel, alerts, and bounce animations
Vercel for deployment, GitHub for versioning, and Codespaces for dev

⚠️ Challenges

Creating a truly intuitive UX for stressful, real-life disasters
Designing bilingual messaging that’s readable, inclusive, and non-alarming
Handling real-time marker status updates while preserving performance
Ensuring keyboard and mobile accessibility with no frameworks
Respecting API key security while demoing live on the web

🏆 Accomplishments that I'm proud of

Building a complete, responsive, real-time disaster platform with no external libraries
Designing a fully styled and animated map UX that works cross-city
Launching on time, with a clear pitch, live demo, and full accessibility
Integrating Google Maps Platform features meaningfully—not just for visuals

📚 What I learned

How to fully customize Google Maps beyond markers and styling
How to simulate real-time data changes using vanilla JavaScript
That building for clarity under pressure (e.g., emergencies) requires deep UX thought
The power of visuals: bouncing markers, bilingual alerts, and live stats made the map feel alive