Examples
Layers (30)
Extrude polygons for 3D indoor mappingDisplay buildings in 3DAdjust a layer's opacityAdd a 3D modelAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesChange a layer's color with buttonsCreate and style clustersStyle circles with a data-driven propertyAdd a custom style layerStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataChange worldview of administrative boundariesShow and hide layersUpdate a choropleth layer by zoom levelVisualize population density

Display driving directions

Use the mapbox-gl-directions plugin to show results from the Mapbox Directions API. Click the map to add an origin and destination.

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display driving directions</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.css' type='text/css' />
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(new MapboxDirections({
accessToken: mapboxgl.accessToken
}), 'top-left');
</script>
</body>
</html>