Observable Framework 1.5.1 GitHub️ 1.8k

Mapbox GL JS

Mapbox GL JS is a library for building web maps and web applications with Mapbox’s modern mapping technology. Mapbox GL JS is available by default as mapboxgl in Markdown, but you can import it explicitly like so:

import mapboxgl from "npm:mapbox-gl";

If you import Mapbox GL JS, its stylesheet will automatically be added to the page.

To create a map, create a container element with the desired dimensions, then call the Map constructor:

const div = display(document.createElement("div"));
div.style = "height: 400px;";

const map = new mapboxgl.Map({
  container: div,
  accessToken: ACCESS_TOKEN, // replace with your token, "pk.…"
  center: [2.2932, 48.86069], // starting position [longitude, latitude]
  zoom: 15.1,
  pitch: 62,
  bearing: -20
});

invalidation.then(() => map.remove());
You will need to create a Mapbox account and obtain an API access token for your project. Replace ACCESS_TOKEN with your token above.

For inspiration, see Mapbox’s examples page.