https://github.com/dsaikiran01/seismomap
An interactive React + Leaflet web app that visualizes real-time global earthquakes from the USGS API with live map markers, magnitude filtering, dark mode, and responsive UI.
https://github.com/dsaikiran01/seismomap
data-visualization earthquakes geoscience material-ui react react-leaflet tailwindcss usgs-api vite
Last synced: 2 months ago
JSON representation
An interactive React + Leaflet web app that visualizes real-time global earthquakes from the USGS API with live map markers, magnitude filtering, dark mode, and responsive UI.
- Host: GitHub
- URL: https://github.com/dsaikiran01/seismomap
- Owner: dsaikiran01
- Created: 2025-09-04T05:23:07.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-04T06:06:31.000Z (10 months ago)
- Last Synced: 2025-09-04T07:28:05.585Z (10 months ago)
- Topics: data-visualization, earthquakes, geoscience, material-ui, react, react-leaflet, tailwindcss, usgs-api, vite
- Language: JavaScript
- Homepage: https://seismo-map.vercel.app
- Size: 95.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌍 SeismoMap
SeismoMap is an interactive web application that visualizes **real-time global earthquake activity** using the [USGS Earthquake API](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php).
It is designed for geography students like **Casey** to explore seismic patterns, filter by magnitude, and better understand recent tectonic events.
---
## 🚀 Features
- **Interactive Map (Leaflet + React-Leaflet)**
Earthquakes displayed as markers on a world map.
Marker **color & size** based on magnitude:
- 🟢 Green: < 3.0
- 🟠 Orange: 3.0 – 5.0
- 🔴 Red: > 5.0
- **Live Earthquake Data**
- Data from [USGS API (past 24h)](https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson)
- Refreshes automatically every **5 minutes**
- **Magnitude Filter**
- Material UI **slider** to filter earthquakes by min/max magnitude
- Updates both map markers and the sidebar list
- **Sidebar List View**
- Drawer with scrollable earthquake list
- Each item shows magnitude, location, and time
- (Future) Clicking an item zooms map to its location
- **Dark Mode Support**
- Toggle between light/dark themes
- Switches map tiles & UI colors
- **Loading & Error States**
- Material UI `CircularProgress` for loading
- Snackbar/alerts for errors (planned)
---
## 🧰 Tech Stack
- **React + Vite** (frontend framework & bundler)
- **React-Leaflet** (map integration)
- **Leaflet** (map rendering)
- **Material UI** (UI components, theming)
- **Tailwind CSS** (responsive styling utilities)
- **USGS Earthquake API** (real-time earthquake data)
---
## 📐 UI Layout
```
---
\| AppBar (MUI) |
\| - SeismoMap | Magnitude Slider | Dark Toggle |
---------------------------------------------------
\| Sidebar (Drawer) | Interactive Map |
\| - Earthquake List | - Markers |
\| | - Legend |
---------------------------------------------------
````
---
## 📊 Data Example
```json
{
"type": "Feature",
"properties": {
"mag": 4.5,
"place": "114 km NE of Lospalos, Timor Leste",
"time": 1756893103168,
"url": "https://earthquake.usgs.gov/earthquakes/eventpage/us7000qtgb",
"title": "M 4.5 - 114 km NE of Lospalos, Timor Leste"
},
"geometry": {
"type": "Point",
"coordinates": [127.6824, -7.7403, 133.38]
}
}
````
---
## 🕒 Refresh Strategy
* Auto-refreshes every **5 minutes**
* Manual refresh option (planned)
---
## ✅ Accessibility
* Keyboard navigable UI
* Material UI components support screen readers
* WCAG AA compliant color scheme
---
## 📦 Deployment
SeismoMap is a static React app and can be hosted on:
* [Vercel](https://seismo-map.vercel.app/)