Initialize the Map
- Start by initializing the Mapbox map on your web page using the Mapbox GL JS library. You will need to use your access token to authenticate API requests.
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
Include the Directions Plugin
- To get directions, you’ll need to include the Mapbox Directions plugin. This plugin provides a UI to input the start and end points and displays the route on your map.
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.css' rel='stylesheet' />
Instantiate the Directions Control
- Create an instance of the Directions plugin and add it to your map. This control will allow users to fetch directions by entering starting and ending locations.
const directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric', // specify 'imperial' for miles
profile: 'mapbox/driving' // sets the routing profile, default is 'driving'
});
map.addControl(directions, 'top-left');
Handling Directions Response
- Attach an event listener to handle the response from the Directions plugin. This can be useful for logging data, modifying the response, or triggering other actions in your application.
directions.on('route', (event) => {
const routes = event.route;
console.log('Available routes:', routes);
if (routes.length) {
const route = routes[0];
console.log('Distance:', route.distance);
console.log('Duration:', route.duration);
}
});
Customizing Directions Options
- You can further customize the Directions plugin by modifying its options. This includes changing the language, geocoder parameters, and more to fit your app’s needs.
const directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
language: 'en',
geocoder: {
proximity: [-74.5, 40.7]
},
alternatives: true, // enables alternative routes
congestion: true // takes traffic congestion into account if available
});
map.addControl(directions, 'top-left');
Custom Styling and Integration
- If needed, style the map and the directions UI with CSS or by leveraging Mapbox Studio. This can help the directions blend seamlessly with your site's design.
- Integration with other services or frameworks (like React or Angular) may require additional setup or adjustments in handling state changes.
.mapboxgl-ctrl-directions {
max-width: 400px;
}
/* You can add more custom styles as needed */
Testing and Debugging
- Thoroughly test the feature for various routes, distances, and conditions. Check for browser compatibility and performance across different devices.
- Consider logging relevant information for debugging purposes and to gain insights into user behavior.
