Style Specification

Examples

Add an icon to the map Add a generated icon to the map Display a map with a custom style Display a satellite map Change a map's style Display a map

Extrude polygons for 3D indoor mapping Display buildings in 3D Adjust a layer's opacity Add a 3D model Animate a line Animate a series of images Animate a point Change building color based on zoom level Change the case of labels Display HTML clusters with custom properties Change a layer's color with buttons Create and style clusters Style circles with a data-driven property Add a custom style layer Style lines with a data-driven property Display and style rich text labels Add a pattern to a polygon Add a new layer below labels Add a GeoJSON line Draw GeoJSON points Add a GeoJSON polygon Create a heatmap layer Add hillshading Create a gradient line using an expression Add multiple geometries from one GeoJSON source Style ocean depth data Change worldview of administrative boundaries Show and hide layers Update a choropleth layer by zoom level Visualize population density

Join local JSON data with vector tile geometries Update a feature in realtime Add live realtime data Add a raster tile source Add a third party vector tile source Add a vector tile source Add a video Add a WMS source Add an image

User interaction (20)

Animate 3D buildings based on ambient sounds Disable map rotation Create a draggable Marker Create a draggable point Filter features within map view Filter symbols by text input Filter symbols by toggling a list Display a non-interactive map Change a map's language Measure distances Get coordinates of the mouse pointer Highlight features containing similar data Select features around a clicked point Get features under the mouse pointer Restrict map panning to an area Create a time slider Toggle interactions Fit to the bounds of a LineString Create a hover effect Highlight features within a bounding box

Animate map camera around a point Center the map on a clicked symbol Animate a point along a route Fit a map to a bounding box Fly to a location Slowly fly to a location Navigate the map with game-like controls Jump to a series of locations Play map locations as a slideshow Fly to a location based on scroll position Set pitch and bearing

Controls and overlays (17)

Animate a marker Change the default position for attribution Add custom icons with Markers Disable scroll zoom View a fullscreen map Locate the user Swipe between maps Show drawn polygon area Display driving directions Add a geocoder Add a marker using a place name Display map navigation controls Show polygon information on click Display a popup on click Display a popup on hover Display a popup Attach a popup to a marker instance

Supplement forward geocoding search results from another data source Use a custom render function with a geocoder Accept coordinates as input to a geocoder Limit geocoder results to a named region Place the geocoder input outside the map Localize the geocoder to a given language Use a custom camera animation with a geocoder Set a point after Geocoder result

Browser support (1)

Check for browser support

Internationalization support (2)

Use locally generated ideographs Add support for right-to-left scripts

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>