maps

🗺️ 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** | |:---:|:---:|:---:| | [](https://pratikyadav.github.io/maps/mapbox-standard/) | [](https://pratikyadav.github.io/maps/mapbox-streets/) | [](https://pratikyadav.github.io/maps/mapbox-satellite/) | | *Dynamic lighting & 3D buildings* | *Classic street map view* | *High-resolution satellite imagery* |

🌍 Globe & Terrain Views

 | 🏔️ **3D Terrain** | 🔴 **Mars Surface** | 🌍 **Globe with Ozone** | 🪐 **Globe Mars** | |:---:|:---:|:---:|:---:| | [](https://pratikyadav.github.io/maps/3d/) | [](https://pratikyadav.github.io/maps/mapbox-mars/) | [](https://pratikyadav.github.io/maps/globe/ozone/) | [](https://pratikyadav.github.io/maps/globe/mars/) |

🏗️ 3D Architecture

 | 🏢 **3D Buildings** | |:---:| | [](https://pratikyadav.github.io/maps/mapbox-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** | |:---:|:---:|:---:| | [](https://pratikyadav.github.io/maps/3d-helicoptor-game/) | [](https://pratikyadav.github.io/maps/golden-gate/) | [](https://pratikyadav.github.io/maps/dragon-over-sf/) | | *3D helicopter flight controls* | *Iconic bridge visualization* | *Animated dragon over San Francisco* |

🚗 Vehicle Simulations

 | 🏎️ **3D Cars** | 🦌 **3D Bucks** | 🚀 **SpaceX Launch** | |:---:|:---:|:---:| | [](https://pratikyadav.github.io/maps/cars/) | [](https://pratikyadav.github.io/maps/bucks/) | [](https://pratikyadav.github.io/maps/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** | |:---:|:---:|:---:| | [](https://pratikyadav.github.io/maps/suez_canel/) | [](https://pratikyadav.github.io/maps/unstuck_rocket/) | [](https://pratikyadav.github.io/maps/uk-flood-imagery/) | | *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](https://pratikyadav.github.io/maps/)** | **[📖 Mapbox Docs](https://docs.mapbox.com/)** | **[⭐ Star this repo](https://github.com/pratikyadav/maps)** *Built with ❤️ and Mapbox GL JS*

This site is open source. Improve this page.