Library: Mapbox GL JS

Observable Framework documentation: Library: Mapbox GL JS Source: https://observablehq.com/framework/lib-mapbox-gl

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());

const ACCESS_TOKEN = "YOUR_MAPBOX_ACCESS_TOKEN";

For inspiration, see Mapbox’s examples page.