A collection of interactive mapping applications built with Leaflet.js, demonstrating various use cases and design patterns for web-based mapping solutions.
🚀 View the Main Project Landing Page
Start exploring with the Bella Vista Restaurant contact map - the main demonstration of our interactive mapping capabilities.
This repository contains three distinct mapping experiments, each showcasing different aspects of Leaflet.js integration with modern web technologies:
- Restaurant Contact Map - Business location finder
- Nashville Pizza Locations - Local business directory with interactive maps
- Nashville Traffic Dashboard - Real-time incident tracking system
Click the links below to view each mapping experiment:
- Restaurant Contact Map - Bella Vista Restaurant location finder
- Nashville Pizza Locations - Smoky Mountain Pizza Co. locator
- Nashville Traffic Dashboard - Metro PD incident tracking
- Interactive location finder for Bella Vista Restaurant
- Responsive design with TailwindCSS
- Alpine.js for reactive UI components
- Custom styling with gradient backgrounds and hover effects
- Multiple restaurant locations with detailed contact information
- Pizza restaurant locator for Smoky Mountain Pizza Co.
- Custom fonts (Fredoka One & Open Sans) for branding
- Location cards with hover animations
- Interactive map markers with location selection
- Responsive grid layout for location details
- Real-time traffic incident visualization
- Professional dashboard UI with Inter and JetBrains Mono fonts
- Incident filtering and selection
- Detailed incident cards with status indicators
- Large-format map optimized for data visualization
- Leaflet.js - Open-source JavaScript library for interactive maps
- Alpine.js - Lightweight reactive framework
- TailwindCSS - Utility-first CSS framework
- HTML5 - Modern semantic markup
- JavaScript ES6+ - Modern JavaScript features
- A modern web browser with JavaScript enabled
- Local web server (optional, but recommended for development)
-
Clone the repository:
git clone https://github.com/antcoop-vu/leaflet-experiments.git cd leaflet-experiments/contact-map -
Open any HTML file in your browser:
index.html- Restaurant contact mapnashville-pizza.html- Pizza location findernashville-traffic.html- Traffic incident dashboard
-
For development with live reload (optional):
# Using Python 3 python -m http.server 8000 # Using Node.js (if you have live-server installed) npx live-server # Using PHP php -S localhost:8000
- Alpine.js data stores for state management
- Modular CSS with component-based styling
- Responsive design principles throughout
- Custom markers and popups
- Interactive location selection
- Responsive map containers
- Smooth animations and transitions
- Hover effects on interactive elements
- Gradient backgrounds for visual appeal
- Card-based layouts for information display
- Mobile-first responsive design
contact-map/
├── index.html # Restaurant contact map
├── nashville-pizza.html # Pizza location finder
├── nashville-traffic.html # Traffic incident dashboard
└── README.md # Project documentation
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Project Link: https://github.com/antcoop-vu/leaflet-experiments
This project is open source and available under the MIT License.
- OpenStreetMap contributors for map data
- Leaflet.js community for the amazing mapping library
- TailwindCSS team for the utility-first CSS framework
- Alpine.js team for the lightweight reactive framework
Explore the power of interactive web mapping with these practical examples! 🗺️✨