A high-performance, interactive map application built with Mapbox GL JS. This project mimics core functionalities of modern navigation apps, including real-time location tracking, interactive 3D maps, and automated route finding.
- Interactive 3D Mapping: Smooth zooming, rotating, and tilting using WebGL rendering.
- Real-time Directions: Integrated Mapbox Directions API to calculate the fastest route between two points.
- Geolocator Support: One-click functionality to find and center the map on the user's current position.
- Custom Map Styles: Leverages Mapbox Studio for high-contrast, readable navigation layers.
- Responsive Design: Optimized for both desktop and mobile browser viewing.
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Mapping Engine: Mapbox GL JS
- APIs: Mapbox Directions API, Mapbox Geocoding API
Before you begin, ensure you have a Mapbox Access Token.
- Sign up for a free account at Mapbox.
- Retrieve your Default Public Token from your account dashboard.
- Clone the repository:
git clone https**://github.com/jainaayush01/Maps-Clone.git- Navigate to the project directory:
cd Maps-Clone- Configure your API Key:
Open
script.jsand replace the placeholder token with your actual Mapbox token:
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN_HERE';- Launch the app:
Simply open
index.htmlin your preferred web browser, or use a "Live Server" extension in VS Code.
- Set Destination: Use the navigation control plugin (top-left) to input your start and end points.
- Toggle View: Right-click and drag to rotate the camera in 3D space.
- Location: Click the "Locate Me" icon to grant browser permission for GPS tracking.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Distributed under the MIT License. See LICENSE for more information.
Developed with ❤️ by Yeshwanth Krishna