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.
- Öffnen Sie Maputnik in Ihrem Browser: https://maplibre.org/maputnik
- Laden Sie eine der SmartMaps
style.json
-Dateien in den Editor, um mit der Bearbeitung zu beginnen. - Passen Sie die Stile nach Ihren Wünschen an, indem Sie Ebenen hinzufügen, entfernen oder modifizieren.
- 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
apiKey
ersetzen. Die Größe der Karte kann mittels CSS des Container-Elements (width
und height
) bestimmt werden. Fügen Sie den folgenden Code in den body
hinzu:Codebeispiel: Karte einzeichnen
<!DOCTYPE html>
<html lang="de">
<head>
<title>SmartMaps-Karte</title>
<meta property="og:description" content="Test" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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"
/>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style:
'https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey={IHR API-Key}',
center: [7.845251, 46.658504],
zoom: 15
});
</script>
</body>
</html>