Zum Inhalt springen
Astrid

Maplibre GL Quickstart

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. In den Beispielen verwende ich Vektorkacheln von MapTiler. Besorge dir einen eigenen API-Schlüssel, wenn du MapTiler-Daten in deinem Projekt verwenden möchtest.

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

...
<script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
<link
  href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css"
  rel="stylesheet"
/>
...

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

...
<div id="map" style="width: 100vw; height: 100vh"></div>

<script>
  var map = new maplibregl.Map({
    container: 'map',
    style:
      'https://api.maptiler.com/maps/streets/style.json?key=' +
      config.MAPTILER_TOKEN,
    center: [7.2, 50.3], // Startposition [lng, lat]
    zoom: 12, // Zoom
  })
</script>
...

Nachfolgend die vollständige Datei.

<!-- https://raw.githubusercontent.com/astridx/maplibreexamples/main/quickstart.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Quickstart/Schnellstart MapLibre GL Beispiel</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="map" style="width: 100vw; height: 100vh"></div>

    <script>
      var map = new maplibregl.Map({
        container: 'map',
        style:
          'https://api.maptiler.com/maps/streets/style.json?key=' +
          config.MAPTILER_TOKEN,
        center: [7.2, 50.3], // Startposition [lng, lat]
        zoom: 12, // Zoom
      })
    </script>
  </body>
</html>

Fertig! Die Karte wird mit dem Stil streets ü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 Maplibre 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