Installation

Before you get started with Mapbox GL JS, you need to have a Mapbox access token and add Mapbox GL JS to your project using either the CDN or the mapbox-gl npm package.

Account requirements

To use Mapbox GL JS, you need to have a Mapbox access token. This access token associates your map with a Mapbox account. For more information on creating and using access tokens, see our token management documentation.

Browser support

Mapbox GL JS is supported in most modern browsers. Starting with v2.0.0, Mapbox GL JS is no longer compatible with any version of Internet Explorer. If you need to support Internet Explorer, consider using the Static Images API for non-interactive maps or the Static Tiles API with another library like Mapbox.js for interactive maps.

To test client support for your applications, see our Check Mapbox GL JS browser support example.

Quickstart

To use Mapbox GL JS in your project, you need to import it using the Mapbox GL JS CDN or install the mapbox-gl npm package.

Include the JavaScript and CSS files in the <head> of your HTML file. The CSS file is required to display the map and make elements like Popups and Markers work.

<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' />

Include the following code in the <body> of your HTML file.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
undefinedmapboxgl.accessToken = 'undefined';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>

To see these pieces of code working together in a web app, take a look at our Display a map on a webpage example.