GeoSeismic

A real-time earthquake monitoring web application that I built to learn WebGIS development and work with live geospatial data.

Screenshots

Demo

https://github.com/DaneshShokri94/geoseismic/raw/main/Demo/Demo.mp4

About This Project

I wanted to create something practical that combines my interest in GIS with web development. This app pulls live earthquake data from the USGS API and displays it on an interactive map. You can filter earthquakes by time and magnitude, click on them to see details, and the data refreshes automatically every 5 minutes.

What It Does

• Shows earthquakes happening around the world in real-time monitoring
• Color-coded markers based on magnitude (green for minor, red for major)
• Filter by time range (past hour, day, week, or month)
• Filter by magnitude threshold
• Click any earthquake to see location, depth, time, and a link to USGS
• Displays tectonic plate boundaries as an overlay
• Stats panel showing total count, max magnitude, and average depth

Tech Stack

• Leaflet.js for the map
• Vanilla JavaScript (no frameworks)
• USGS Earthquake API for data
• CARTO dark basemap tiles
• CSS3 with custom properties for theming

How to Run

Just open index.html in your browser. That's it. No npm install, no build step.

If you want to run it on a local server:

python -m http.server 8000

Then go to http://localhost:8000

Project Structure

geoseismic/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
├── assets/
│   └── icons/
│       └── favicon.svg
├── data/
│   └── sample.geojson
└── docs/
    └── ARCHITECTURE.md

Deploying to GitHub Pages

1. Push this repo to GitHub
2. Go to Settings > Pages
3. Set source to main branch
4. Wait a minute and it should be live

Data Source

All earthquake data comes from the USGS Earthquake Hazards Program. Their API is free to use and doesn't require an API key. Data updates every few minutes on their end.

https://earthquake.usgs.gov/earthquakes/feed/

Things I Learned

• Working with GeoJSON format
• Leaflet.js basics (markers, popups, layers)
• Fetching and parsing live API data
• CSS custom properties for theming
• Making a responsive sidebar layout

Future Ideas

• Add earthquake clustering for zoomed out views
• Push notifications for large earthquakes
• Historical data playback
• User location to show nearby earthquakes

License

MIT - feel free to use this however you want.