Start mit Vectortiles und MaplibreGL

Willkommen in der Anleitung zur Integration von Vectortiles mit MaplibreGL und den SmartMaps-Stilen. In dieser Anleitung erfahren Sie, wie Sie Ihre eigene Karte mit den bereitgestellten Stilen und Daten erstellen können.

Für den Start benötigen Sie einen Zugangstoken. Diesen richten wir Ihnen gerne ein. Wählen Sie hierzu, abhängig von Ihrem Einsatzzweck, den für Sie passenden Tarif .

Für die Integration von Vectortiles stellen wir Ihnen Folgendes bereit:

  • Style-Definitionen: Wir bieten vorgefertigte style.json-Dateien für die Stile "light", "dark", "grey" und "accessible" an. [Link zu weiteren Informationen]
  • Datenquellen: Als Datenquellen stehen Ihnen unsere SmartMaps-Tiles sowie Landcover-Tiles zur Verfügung. [Link zu weiteren Informationen/Schema]

Initialisierung

Codebeispiel: Initialisierung MaplibreGL

<html>
    <script src="https://www.yellowmap.de/api_js/cdn/maplibre/maplibre-gl-4.0.1.js"></script>
<link href="https://www.yellowmap.de/api_js/cdn/maplibre/maplibre-gl-4.0.1.css"rel="stylesheet"/>
</html>

Binden Sie zunächst die MaplibreGL-Bibliothek in Ihre HTML-Datei ein. Sie können die Bibliothek entweder über unseren CDN-Link oder durch lokales Hosten der Dateien einbinden. Beachten Sie, dass der Zugriff auf bestimmte Domains beschränkt bleibt. 

Erstellen eines Kartencontainers

Erstellen Sie ein HTML-Element, das als Container für die Karte dient. Dieses Element kann beispielsweise ein <div> sein.

<div id="map" style="width: 100%; height: 500px;"></div>

Initialisieren der Karte mit SmartMaps-Styles

Initialisieren Sie die Karte mit einem der bereitgestellten SmartMaps-Styles. Verwenden Sie dafür die entsprechende style.json-Datei.

const map = new maplibregl.Map({
      container: 'map',
    style: 'https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey={IHR API-Key}',
    center: [7.6, 51.96], // Koordinaten für Bonn
    zoom: 12
  });

Anpassen der Stile (optional)

Wenn Sie die bereitgestellten Stile anpassen möchten, können Sie die style.json-Dateien bearbeiten oder neue Stile erstellen. Dafür empfiehlt sich die Verwendung von Maputnik, einem visuellen Editor für MapLibre-Stile.

  1. Öffnen Sie Maputnik in Ihrem Browser: https://maplibre.org/maputnik
  2. Laden Sie eine der SmartMaps style.json-Dateien in den Editor, um mit der Bearbeitung zu beginnen.
  3. Passen Sie die Stile nach Ihren Wünschen an, indem Sie Ebenen hinzufügen, entfernen oder modifizieren.
  4. Exportieren Sie die angepasste style.json-Datei und verwenden Sie sie in Ihrer Anwendung.

Beachten Sie, dass SmartMaps eine eigene Schemadefinition für die Vektordaten verwendet. Sie finden die Dokumentation dazu auf unserer Website unter [Link zum Schema]

Beispiel: Einfache Kartendarstellung

In diesem Beispiel wird eine Karte in einen DIV-Container geladen. Hierbei legt die Mittelpunktkoordinate zusammen mit der Zoomstufe den Kartenausschnitt fest.

Sie können mithilfe der Maus die Karte verschieben und in sie hinein- oder aus ihr herauszoomen. Mit der rechten Maustaste oder mit Halten der Taste "Strg" können Sie die Karte kippen oder drehen.

SmartMaps-Karte