Zu Beginn benötigen wir ein Zugriffstoken und eine Stil-URL. Wir wählen anfangs einen der professionell gestalteten Stile. Möglich ist es, später einen eigenen Stil zu erstellen.

Als Erstes fügen wir die JavaScript- und CSS-Dateien in den <head> unserer HTML-Datei ein.

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

Dann schreiben wir den folgenden Code in den <body> unserer HTML-Datei.

<div id="map" style="width: 100vw; height: 100vw;"></div>
<script>
  mapboxgl.accessToken = '<Zugriffstoken>'
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11', //Stil
    center: [7.5, 50.1], // Startposition [lng, lat]
    zoom: 9, // Zoom
  })
</script>

Fertig! Die Karte wird mit dem Stil streets-v11 über den gesamten Anzeigebereich style='width: 100vw; height: 100vw;' zentriert auf die Position [7.5, 50.1] mit der Zoomstufe 9 angezeigt:

Full Screen Map Gatsby Mapbox GL Starter

Die Grundlage haben wir gelegt. Mithilfe der Karte ist es möglich geografische Geschichten zu erzählen oder standortbezogene Informationen weiterzugeben.

Demo
Quellcode
Gatsby Starter mit dieser Funktion - Gatsby Starter Demo