Svelte Earthquake Visualizer

Arnesh-pal

An earthquake visualiser made with svelte

🌍 Svelte Earthquake Visualizer

A sleek, responsive, and real-time global earthquake visualizer built with SvelteKit and Leaflet.
This application fetches seismic activity from the USGS Earthquake API (last 24 hours) and displays it on an interactive map.

🔗 Live Demo

📖 About The Project

The Svelte Earthquake Visualizer was created to provide a modern, fast, and visually engaging way to explore recent earthquake data.
It serves as a full-stack example of a SvelteKit application, combining a backend API route to proxy data with a dynamic, interactive frontend map.

The user interface is fully responsive, ensuring a seamless experience on both desktop and mobile devices.

✨ Features

⚡ Real-time Data – Fetches the latest earthquake data from the USGS API on page load.
🗺️ Interactive Map – Pan and zoom on a dark-themed CartoDB world map.
📊 Dynamic Visualization – Markers are color-coded and sized based on magnitude.
ℹ️ Detailed Information – Click a marker to view earthquake details in a modern info panel.
🎯 Engaging UI – Significant quakes show a pulsing animation, and markers scale on hover.
📱 Fully Responsive – Works beautifully on all screen sizes.
🔌 Backend API Route – A custom SvelteKit API endpoint proxies USGS requests, preventing CORS issues and optimizing data flow.

🛠️ Tech Stack

SvelteKit – Full-stack framework for Svelte apps
Svelte – Next-gen UI framework
Leaflet.js – Mobile-friendly interactive maps
Vite – Fast, modern frontend tooling
HTML5 & CSS3 (Flexbox, media queries, animations)
Vercel – Seamless deployment & hosting

🚀 Getting Started

✅ Prerequisites

Node.js v16+
npm (comes with Node.js)

📦 Installation & Setup

Clone the repository

git clone https://github.com/Arnesh-pal/svelte-earthquake-visualizer.git

Navigate to the project directory
```
cd svelte-earthquake-visualizer
```
Install dependencies
```
npm install
```
Run the development server
```
npm run dev
```
Your app should now be running at: 👉 http://localhost:5173

🌐 API Used

This project relies on the U.S. Geological Survey (USGS) Earthquake API:

Endpoint: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson
Description: Provides real-time earthquake data for the past 24 hours in GeoJSON format.

📸 Screenshots

Desktop View	Mobile View

📜 License

Distributed under the MIT License. See LICENSE for more information.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a PR.

⭐ Acknowledgements

🌟 If you like this project, please give it a star on GitHub!

Top categories