Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.

Driving directions

Use the mapbox-directions.js plugin to show results from the Mapbox Directions API

<!DOCTYPE html>
<meta charset=utf-8 />
<title>Driving directions</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
#directions {
    position: absolute;
    width: 33.3333%;
    max-width: 300px;
    min-width: 200px;

#inputs {
    z-index: 10;
    top: 10px;
    left: 10px;

#directions {
    z-index: 99;
    background: rgba(0,0,0,.8);
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;

#errors {
    z-index: 8;
    opacity: 0;
    padding: 10px;
    border-radius: 0 0 3px 3px;
    background: rgba(0,0,0,.25);
    top: 90px;
    left: 10px;


<script src='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.css' type='text/css' />

<div id='map'></div>
<div id='inputs'></div>
<div id='errors'></div>
<div id='directions'>
  <div id='routes'></div>
  <div id='instructions'></div>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', null, {
    zoomControl: false
  .setView([40, -74.50], 9)

// move the attribution control out of the way

// create the initial directions object, from which the layer
// and inputs will pull data.
var directions = L.mapbox.directions();

var directionsLayer = L.mapbox.directions.layer(directions)

var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions)

var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions)

var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)

var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions)
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example