🗺️ Interactive Mapbox Demos

A comprehensive collection of interactive maps and 3D visualizations powered by Mapbox GL JS v3.13.0

---

🌟 Featured Maps & Styles

Explore different map styles and discover the power of Mapbox's Standard Style with dynamic lighting and 3D features.

🗺️ Mapbox Standard	🛣️ Streets View	🛰️ Satellite View
Dynamic lighting & 3D buildings	Classic street map view	High-resolution satellite imagery

🌍 Globe & Terrain Views

🏔️ 3D Terrain	🔴 Mars Surface	🌍 Globe with Ozone	🪐 Globe Mars

🏗️ 3D Architecture

🏢 3D Buildings
Extruded buildings with shadows

---

🎮 Interactive Demos & Games

Experience dynamic visualizations, games, and real-world simulations with 3D models and animations.

🎯 Games & Interactive Experiences

🚁 Helicopter Game	🌉 Golden Gate Bridge	🐉 Dragon Flight
3D helicopter flight controls	Iconic bridge visualization	Animated dragon over San Francisco

🚗 Vehicle Simulations

🏎️ 3D Cars	🦌 3D Bucks	🚀 SpaceX Launch
Interactive car models with controls	Animated wildlife models	Rocket launch simulation

---

🎬 Media Integration & Real Events

Explore how maps can integrate with video content and visualize real-world events.

📹 Video Integration

🏔️ Lombard Street Video	🌊 Reflect Demo
Video overlay on famous street	Interactive reflection effects

🌊 Historical Events & Disasters

🚢 Suez Canal Ship	🚀 Ship Rescue	🌊 Uttarakhand Flood
Ever Given container ship	Rescue operation with rocket	Satellite flood damage imagery

---

🔧 Technical Details

🚀 Latest Features

• Mapbox GL JS v3.13.0 - Latest version with enhanced 3D capabilities
• WebGL 2 - Advanced rendering and performance
• Standard Style - Dynamic lighting and shadows
• 3D Models - GLTF support for complex animations
• Terrain & Elevation - Real-world height data

🛠️ Built With

• Mapbox GL JS - Interactive maps
• Three.js - 3D graphics and animations
• dat.GUI - Parameter controls
• GLTF - 3D model format

📊 Testing

All 19 demos are automatically tested for:

• ✅ Page loading and accessibility
• ✅ Mapbox GL JS v3.13.0 integration
• ✅ Console error monitoring
• ✅ Basic functionality verification

---

🚀 Quick Start

1. Clone the repository

   git clone https://github.com/pratikyadav/maps.git
   cd maps

2. Serve locally

   # Using Python
   python3 -m http.server 8080
   
   # Using Node.js
   npx serve .

3. Open your browser

   http://localhost:8080
   

4. Run tests (optional)

   ./test-pages-simple.sh

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🌟 Acknowledgments

• Mapbox for the incredible mapping platform
• Three.js community for 3D graphics support
• All the open-source contributors who made this possible

---

🌐 Visit Live Demos | 📖 Mapbox Docs | ⭐ Star this repo

Built with ❤️ and Mapbox GL JS