OpenStreetMap & Leaflet.JS einbinden

Einführung

OpenStreetMap (OSM) ist eine freie und editierbare Karte der Welt, die von einer Vielzahl von Freiwilligen auf der ganzen Welt erstellt wird. Leaflet.js ist eine führende Open-Source-JavaScript-Bibliothek zum Erstellen interaktiver Karten, die auf mobilen Geräten und Desktops gleichermaßen gut funktioniert.

In dieser Anleitung zeigen wir dir, wie du OpenStreetMap und Leaflet.js in dein Projekt integrieren kannst.

Schritt-für-Schritt-Anleitung

Schritt 1: Erstellen der HTML & CSS

Füge an der gewünschten Sektion folgenden HTML Code ein:

<div id="mapid"></div>

Und füge folgenden CSS Code in die zz_custom ein:

#mapid {
  height: 600px; //Beispielhöhe
  width: 800px; //Beispielbreite
}

Schritt 2: Hinzufügen der Leaflet-CSS- und JavaScript-Dateien

Um die Leaflet-CSS- und JavaScript-Dateien lokal zu deinem Projekt hinzuzufügen, musst du diese zunächst von der offiziellen Leaflet-Website herunterladen. Gehe zu Leaflet Download und lade die neueste Version herunter. Entpacke das heruntergeladene Archiv.

Nach dem Entpacken des Archivs hast du nun Zugriff auf die leaflet.css und leaflet.js Dateien. Du findest sie im dist-Verzeichnis.

Füge nun die Leaflet-CSS- und JavaScript-Dateien in die richtigen CSS und JS Unterverzeichnisse ein. 

CSS: /template/css/_system/leaflet.css

JS: /template/js/_system/leaflet.js

Schritt 3: Initialisieren der Karte

Jetzt initialisieren wir die Karte in der <div> mit der id mapid, die wir zuvor erstellt haben. Füge den folgenden JavaScript-Code in der zz_custom.js ein:

$(document).ready(function() {
  var map = L.map('mapid', {
    scrollWheelZoom: false,
    closePopupOnClick: false
  }).setView([53.140650, 8.181690], 11);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
  }).addTo(map);

  var marker = new L.Marker([53.140650, 8.181690]);
  marker.addTo(map);
});

Dieser Code erstellt eine neue Karte in der <div> mit der id mapid und setzt den geografischen Mittelpunkt und das Zoom-Level der Karte. Die L.tileLayer-Methode fügt die OpenStreetMap Kacheln zur Karte hinzu.

Speichere die Änderungen und öffne die Sektion mit der Karte im Webbrowser. Du solltest eine Karte von Oldenburg sehen, die von OpenStreetMap bereitgestellt wird.

Schritt 4: Finden der Koordinaten einer spezifischen Adresse

Um die genauen Koordinaten einer Adresse zu finden, verwenden wir den Geocoding-Dienst von OpenStreetMap namens Nominatim. Du kannst die Webseite des Dienstes besuchen unter Nominatim OpenStreetMap.

Gib zum Beispiel die Adresse “Bloherfelder Straße 71, 26129 Oldenburg” in das Suchfeld ein und klicke auf "Suche". In den Suchergebnissen wird die genaue Adresse angezeigt, klicke auf die "Details" dieses Eintrags.

In den Details findest du die Breiten- und Längengrade dieser Adresse unter "Centre Point (lat,lon)". Die Koordinaten sind in der Form (Breitengrad, Längengrad). Notiere dir diese Werte.

Schritt 5: Ändern des geographischen Mittelpunkts der Karte

Nachdem du die Koordinaten deiner gewünschten Adresse hast, kannst du diese Werte in den Code deiner JavaScript Datei einfügen. Ändere die Zeile mit der setView-Methode und ersetze die aktuellen Koordinaten durch die Koordinaten deiner gewünschten Adresse.

Angenommen, die Koordinaten für “Bloherfelder Straße 71, 26129 Oldenburg” sind 53.140650 (Breitengrad) und 8.181690 (Längengrad), dann wäre der Code wie folgt:

var map = L.map('mapid').setView([53.140650, 8.181690], 17);

Ich habe das Zoom-Level auf 17 gesetzt, um die Karte näher an der spezifischen Adresse zu zentrieren. Du kannst dieses Zoom-Level nach Bedarf anpassen.

Jetzt, wenn du die Karte in deinem Webbrowser öffnest, sollte der geographische Mittelpunkt der Karte auf die Adresse "Bloherfelder Straße 71, 26129 Oldenburg" gesetzt sein.

Schlussbemerkungen

Jetzt hast du eine einfache Webkarte mit OpenStreetMap und Leaflet.js erstellt. Du kannst diese Karte nach Belieben anpassen und weitere Funktionen hinzufügen, wie z.B. Markierungen, Geolocation, Routenplanung und vieles mehr. Besuche die Leaflet.js-Dokumentation, um mehr über die umfangreichen Funktionen dieser Bibliothek zu erfahren.