---
layout: example
category: example
title: Display driving directions
description: 'Use the <a target="_blank" href="https://github.com/mapbox/mapbox-gl-directions">mapbox-gl-directions</a> plugin to show results from the Mapbox Directions API. Click the map to add an origin and destination.'
tags:
  - controls-and-overlays
---
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v{{site.data.plugins.mapbox-gl-directions.latest}}/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v{{site.data.plugins.mapbox-gl-directions.latest}}/mapbox-gl-directions.css' type='text/css' />
<div id='map'></div>

<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

map.addControl(new MapboxDirections({
    accessToken: mapboxgl.accessToken
}), 'top-left');
</script>
