A real-time interactive web application that visualizes earthquake activity from the past 24 hours around the world. Built with React and Leaflet to help users understand global seismic patterns and earthquake distribution.
- Real-time Data: Fetches live earthquake data from USGS Earthquake API
- Interactive Map: Fully interactive world map with zoom and pan capabilities
- Smart Visualization:
- Color-coded markers based on earthquake magnitude
- Dynamic marker sizing proportional to earthquake strength
- Magnitude values displayed directly on markers
- Detailed Information: Click any earthquake marker to view:
- Magnitude
- Location
- Timestamp
- Depth information
- User-friendly Interface:
- Visual legend explaining magnitude categories
- Refresh button for latest data
- Loading states and error handling
- Responsive design
- 🔵 Blue: Minor earthquakes (< 2.0 magnitude)
- 🩷 Pink: Light to moderate earthquakes (2.0 - 3.9 magnitude)
- 🔴 Red: Moderate to major earthquakes (4.0+ magnitude)
- Node.js (version 14 or higher)
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/yourusername/earthquake-visualizer.git
cd earthquake-visualizer- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 to view the application in your browser.
- React - Frontend framework
- React Leaflet - React components for Leaflet maps
- Leaflet - Interactive maps library
- USGS Earthquake API - Real-time earthquake data source
This application uses the USGS Earthquake API to fetch real-time seismic data:
- Endpoint:
https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson - Data Format: GeoJSON
- Update Frequency: Real-time (updates as earthquakes occur)
- MapComponent: Main component handling map rendering and earthquake visualization
- Custom Markers: Dynamic markers with magnitude-based styling
- Interactive Popups: Detailed earthquake information display
- Legend: Visual guide for magnitude interpretation
- Responsive and interactive mapping interface
- Real-time API integration with error handling
- Custom marker creation using Leaflet's divIcon
- Magnitude-based visual encoding (color + size)
- Clean, modern UI with professional styling
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE.md file for details.
- USGS for providing free earthquake data API
- OpenStreetMap for map tiles
- Leaflet for the excellent mapping library
- React Leaflet for React integration
- Historical earthquake data visualization
- Magnitude-based filtering options
- Earthquake clustering for dense regions
- Export functionality for earthquake data
- Notification system for major earthquakes
Live Demo: https://earthquake-visualizer-flame.vercel.app/
Developer: Kamlesh Kumar Singh