A web-based real-time disaster alert mapping tool built with HTML, CSS, and JavaScript using Leaflet.js.
Fetches live earthquake data from the USGS GeoJSON feed and displays it on an interactive OpenStreetMap-based map with full-screen view, dynamic popups, and automatic updates.
Inspired by Google Crisis Response and NASA hackathon challenges.
The aim was to create something socially impactful that could help communities visualise and respond to disaster data quickly while also looking visually impressive in screenshots and demos.
- Live Data Integration – Real-time USGS earthquake data feed
- Interactive Map – Built with Leaflet.js and OpenStreetMap tiles
- Detailed Popups – Magnitude, location, and event time for each earthquake
- Auto-Refresh – Map updates automatically to show the latest events
- Full-Screen Mode – Immersive disaster monitoring experience
- Easy to Run Locally – No server setup required
- Web browser (Chrome, Firefox, or Edge recommended)
- Visual Studio Code
- Live Server extension for local testing
# Clone the repository
git clone https://github.com/yourusername/Real-Time-Disaster-Alert-Map-Tool.git
# Navigate into the project folder
cd Real-Time-Disaster-Alert-Map-ToolThis project runs locally in a browser using the Live Server extension in VS Code.
Steps to Run:
- Open the folder in Visual Studio Code
- Right-click index.html → "Open with Live Server"
- The map will launch in your browser and start displaying live earthquake alerts
| Action | Result |
|---|---|
| Click marker | Opens popup with earthquake details (magnitude, location, timestamp) |
| Scroll / pinch | Zoom in or out on the map |
| Drag map | Move view to different regions |
This project was originally conceived and developed during a fast-paced hackathon inspired by large-scale disaster response initiatives such as Google Crisis Response and the NASA Space Apps Challenge. The aim was to create a tool that aggregates real-time disaster data including earthquakes, severe weather, and floods and presents it on an intuitive, map-based dashboard. The hackathon environment encouraged rapid ideation, quick prototyping, and a strong focus on real-world impact. Our goal was to design a lightweight, user-friendly application that communities, NGOs, and emergency services could use to monitor threats and make faster, data-driven decisions all within a tight 36-hour timeframe. The result is a visually engaging, responsive application that not only looks impressive in screenshots but also demonstrates the power of combining open data with clean user interface design under challenging time constraints.
- Interactive map interface built with Leaflet.js (or Google Maps API).
- Integration of live or mock disaster alert data, including earthquake and weather warning feeds.
- Dynamic map pins displaying disaster locations with severity-based icons.
- “Report Disaster” button allowing users to add local alerts (stored client-side, no backend).
- Preloaded dramatic mock alerts to enhance demo realism.
- Animated icons indicating urgency for enhanced visual impact.
Including a LICENSE file clarifies how others may use, modify, and distribute your code. By choosing an open-source license such as MIT, you grant permission for use under defined terms while protecting your intellectual property and limiting liability.
This project is licensed under the MIT License. See LICENSE for full details.
Crisis-Tracking-Tool/
│── index.html # Main HTML file
│── style.css # Styles for map and UI
│── script.js # Core JavaScript logic
│── assets/ # Images, icons, and related media
└── README.md # Project documentation
- Add filtering by magnitude or time range
- Implement offline caching for unstable connections
- Add heatmap and clustering features for better visualisation
- Deploy as a hosted public web app
- Daniel Cullinane – daniel.cullinane@outlook.com
- GitHub: @dancull