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><linkhref='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><linkhref='https://api.tiles.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v1.0.0/mapbox-gl-directions.css'rel='stylesheet'/><divid='map'></div>
<script>mapboxgl.accessToken='<AccessToken>';
varmap=newmapboxgl.Map({container:'map',style:'mapbox://styles/mapbox/streets-v8'});
map.addControl(newmapboxgl.Directions());</script>
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.
vardirections=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(){directions.setOrigin('Toronto, Ontario');// On load, set the origin to "Toronto, Ontario".directions.setDestination('Montreal, Quebec');// On load, set the destination to "Montreal, Quebec".});
directions.on('route',function(e){console.log(e.route);// Logs the current route shown in the interface.});
Open source
Mapbox GL Directions is an open source project. Dig into how it’s built or contribute by visiting the project on GitHub.