A web application to search and visualize recent earthquakes on an interactive map.
Users can search by coordinates or place name, view earthquake details, and see contextual location information.
This application was primarily generated using v0 and intended to be used as a demo application, not production ready.
- Search for earthquakes by coordinates or place name
- Interactive map using Leaflet
- Earthquake data from USGS Earthquake API
- Reverse geocoding with Nominatim
- Earthquake markers sized and colored by magnitude
- Popup details for each earthquake, including location, magnitude, time, depth, and tsunami alerts
- Node.js (18+ recommended)
- npm or pnpm
-
Clone the repository:
-
Install dependencies:
npm install # or pnpm install
-
(Optional) Install Leaflet types for TypeScript - this will resolve errors on Leaflet, but the application will run and work without it:
npm install --save-dev @types/leaflet
npm run dev # or pnpm dev
Open http://localhost:3000 in your browser.
/components/earthquake-map.tsx
— React component for the interactive Leaflet map/app/actions.ts
— Server actions for fetching and enriching earthquake data/components/earthquake-search.ts
— (Type definitions and search logic)
- USGS Earthquake API: Fetches earthquake data based on coordinates and radius.
- Nominatim: Used for reverse geocoding (getting place names from coordinates).
- The app uses a custom User-Agent for Nominatim requests as required by their usage policy.
- To avoid rate limiting, a small delay is added before each reverse geocoding request.
MIT
Made with ❤️ using React, TypeScript, and Leaflet.