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

For inspiration, see Mapbox’s examples page.