Verwendung von Karten mit OpenStreetMap

Die Einbettung von einfachen Karten, beispielsweise zur Ergänzung von Meldungen aus dem OV, ist leicht möglich. Auch komplexere Karten mit mehreren Markierungen und zusätzlichen Informationen lassen sich erzeugen.

Karten mit mehreren Markierungen

Karten mit mehreren Markierungen können mit der JavaScript-Bibliothek Leaflet erzeugt werden. Dies ermöglicht die Verwendung beliebig vieler Marker Popup-Beschreibungen und weiterer Markierungen!

Hier wird kurz erklärt, wie aus der Vorlage eine funktionierende Karte wird.

Warnung: Die ganze Beschreibung ist darauf ausgelegt, dass nur eine Karte auf einer Seite eingebunden wird. Dafür können ja mehrere Markierungen eingefügt werden. Bei Einbindung von mehr als einer Karte werden Fehler auftreten, die ohne Grundkenntnisse in JavaScript nicht behebbar sind!

Vorlage kopieren

Einfach diesen kompletten Quelltext einschließlich der HTML-Tags kopieren:

<html>
<!-- Das erforderliche CSS für Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<div id="Karte_fortgeschritten" style="height:400px"></div>

<script>
let mymap = L.map('Karte_fortgeschritten').setView({lat: 51.83847, lon: 9.46079}, 8);

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

let ov = L.marker([51.83847, 9.46079]).addTo(mymap);

ov.bindPopup("<b>unser OV</b>");

</script>   
</html>

Das Ergebnis ist bereits eine funktionierende Karte mit einer Markierung an der Unterkunft unseres OVs:

Den Kartenausschnitt ändern

Der Kartenausschnitt wird in der Zeile

let mymap = L.map('Karte_fortgeschritten').setView({lat: 51.83847, lon: 9.46079}, 8);

festgelegt.

Position

Die Zahlen hinter lat und lon sind der Breitengrad und der Längengrad, auf welchem der Mittelpunkt der Karte liegt. Um einen anderen Mittelpunkt zu wählen, können die Zahlen angepasst werden. Eine kurze Anleitung, wie

Vergrößerung

Die letzte Zahl in der Zeile ist die Vergrößerung. Je größer der Wert, desto stärker ist die Karte vergrößert.

Werte ermitteln

Eine kurze Anleitung, wie man geeignete Werte für Längengrad, Breitengrad und Vergrößerung ermittelt, gibt es weiter unten

Größe ändern

In der Zeile

<div id="Karte_fortgeschritten" style="height:400px"></div>

kann der Wert für height verändert werden, um die Höhe der Karte auf der Seite zu verändern. Mit

<div id="Karte_fortgeschritten" style="height:200px"></div>

wird also die Höhe auf 200 Pixel reduziert. Die Breite wird automatisch angepasst an die Breite der Seite, kann aber bei Bedarf auch festgelegt werden. Dafür wird die Zeile ergänzt zu:

<div id="Karte_fortgeschritten" style="height:400px; width:500px"></div>

In diesem Beispiel wird die Breite also auf 500 Pixel festgelegt.

Eine Markierung hinzufügen

Eine Markierung wird hinzugefügt durch eine Zeile der Form

let MARKIERUNG = L.marker([BREITE, LÄNGE]).addTo(mymap);

Für MARKIERUNG wird ein eindeutiger Name verwendet. Der Name darf keine Leerzeichen enthalten! Für BREITE und LÄNGE werden der Breitengrad und Längengrad des Ortes eingesetzt. Eine kurze Anleitung, wie man geeignete Werte für Längengrad, Breitengrad und Vergrößerung ermittelt, gibt es weiter unten

Beispiel

Um eine Markierung für die Regionalstelle in Göttingen einzufügen, können wir schreiben:

let RSt_Göttingen = L.marker([51.53116, 9.90111]).addTo(mymap_2);

Eine Beschreibung hinzufügen

Einer Markierung kann noch eine Beschreibung hinzugefügt werden. Dazu muss eine Zeile der Form

MARKIERUNG.bindPopup("BESCHREIBUNG");

eingefügt werden. Für MARKIERUNG wird der selbe Name wie vorher verwendet. BESCHREIBUNG kann eine fast beliebige Beschreibung (einschließlich HTML-Formatierung) sein. Allerdings darf die Beschreibung nicht dieselben Anführungszeichen enthalten, die direkt davor und dahinter stehen. Andere Anführungszeichen sind hingegen möglich.

Beispiel

Um der Markierung der Regionalstelle eine Beschreibung (wird bei Mausklick angezeigt) hinzuzufügen:

RSt_Göttingen.bindPopup("'Unsere' Regionalstelle<br>RSt Göttingen")

Längengrad, Breitengrad, Vergrößerung

Für verschiedene Aufgaben werden Längen- und Breitengrade benötigt. Diese können mit OpenStreetMap einfach und ohne Rechnerei ermittelt werden:

Ort finden

Zunächst wird der gewünschte Ort auf der Karte von OpenStreetMap gesucht. Damit Längen- und Breitengrad möglichst genau abgelesen werden, kann der Ort mit Rechtsklick und „Karte hier zentrieren“ gewählt werden:

Ablesen

Längen- und Breitengrad kann man dann aus der Adresszeile des Browsers ablesen:

In diesem Fall ist die Adresse

www.openstreetmap.org/#map=12/51.5370/9.8410

Von den drei Zahlen am Ende der Zeile ist die erste die Vergrößerung (12), die zweite ist der Breitengrad (51.5370), die dritte ist der Längengrad (9.8410).

Auf einen Klick

Mehr von uns

Adresse & Kontakt

Aktionskarte

OV in Zahlen

Mithelfen!

Verwendung von Karten mit OpenStreetMap

Karten mit mehreren Markierungen

Vorlage kopieren

Den Kartenausschnitt ändern

Position

Vergrößerung

Werte ermitteln

Größe ändern

Eine Markierung hinzufügen

Beispiel

Eine Beschreibung hinzufügen

Beispiel

Längengrad, Breitengrad, Vergrößerung

Ort finden

Ablesen