Worldsnap

A dynamic world map that displays random cat photos as animated popups across major cities around the world.

Features

• Interactive Map: Built with MapLibre GL JS for smooth vector tile rendering
• Random Cat Photos: Uses the cataas.com API for diverse cat images
• Animated Popups: Cat photos appear with a falling animation and fade effects
• Geographic Variety: Covers 40+ major cities across Europe and the US
• Realistic Positioning: Small coordinate variations make photos appear from different locations within each city
• Camera-like Aspect Ratios: Images use realistic portrait, landscape, and square formats

Getting Started

1. Clone or download this repository
2. Open index.html in a web browser
3. Watch as cat photos randomly appear and disappear across the map

Files

• index.html - Main HTML file with MapLibre GL JS setup
• script.js - JavaScript logic for map initialization and cat popup system
• style.css - Styling for the map and popup animations

How It Works

The application:

1. Initializes a MapLibre GL JS map with a dark theme
2. Randomly selects cities from a predefined list
3. Adds small coordinate variations for realistic positioning
4. Preloads cat images before showing popups
5. Animates popups with fade-in and falling effects
6. Automatically removes popups after a random duration

Customization

• Cities: Add or modify city coordinates in the cities array in script.js
• Animation: Adjust timing and effects in style.css
• Images: Replace the cat image service with any other image API
• Frequency: Modify the interval timing in the setInterval call

Technologies Used

• MapLibre GL JS - Open-source mapping library
• cataas.com - Cat-as-a-Service API for placeholder images
• Vanilla JavaScript and CSS

License

This project is open source and available under the MIT License.