Mapbox GL Directions plugin

Try it yourself. Click the map or enter a place for new directions.

Today we’re releasing Directions, the first Mapbox GL JS plugin. Mapbox GL Directions connects our maps with the Directions and Geocoding APIs so you can find driving, walking, and biking routes with Mapbox.

Getting started

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v1.0.0/mapbox-gl-directions.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v1.0.0/mapbox-gl-directions.css' rel='stylesheet' />
<div id='map'></div>
<script>
   mapboxgl.accessToken = '<AccessToken>';
   var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/mapbox/streets-v8'
   });
   map.addControl(new mapboxgl.Directions());
</script>

For a live demo, check out the code example here.

The plugin features fast autocomplete of locations as you search for a place, map gestures to plot points & waypoints, as well as an architecture that lets you set or receive data from method calls or events in your own code.

var directions = new mapboxgl.Directions({
    unit: 'metric', // Use the metric system to display distances.
    profile: 'walking', // Set the initial profile to walking.
    container: 'directions', // Specify an element thats not the map container.
    proximity: [-79.45, 43.65] // Give search results closer to these coordinates higher priority.
});

map.on('load', function() {
    // On load, set the origin to "Toronto, Ontario".
    directions.setOrigin('Toronto, Ontario'); 
    // On load, set the destination to "Montreal, Quebec".
    directions.setDestination('Montreal, Quebec');
});
directions.on('route', function(e) {
    // Logs the current route shown in the interface.
    console.log(e.route);
});

See the full API documentation to find out what’s available.

Open source

Mapbox GL Directions is an open source project. Dig into how it’s built or contribute by visiting the project on GitHub.