Leaflet

OpenStreetMap

Hier wird es nach und nach einiges zu meinem Lieblingsthema OpenStreetMap geben. Der Quellcode der einzelnen Beispiele ist im Download-Bereich zu finden.

Die hier verwendeten Daten stammen von OpenStreetMap - Veröffentlicht unter ODbL

Leaflet

Leaflet ist eine JavaScript Bibliothek für interaktive Karten. Damit lassen sich recht einfach Karten für die eigenen Website herstellen. Im Gegensatz zu OpenLayer empfinde ich Leaflet als einfacher und intuitiver. Durch viele bereits vorhandene Plugins läßt sich Leaflet einfach um weitere Funktionen erweitern. Hier folgen nun ein paar Beispiele mit und ohne Plugins. Erklärungen zu den einzelnen Beispielen sind im Quelltext enthalten. Die Beispiele sind alle für Leaflet Version 1.0.3. Im Download-Bereich sind auch noch die selben Beispiele für Leaflet Version 0.7.7. zu finden.

Link zum Beispiel Beschreibung
Einfache Karte

Zeig eine einfache Karte mit drei verschiedenen Layern und einer Zoomfunktion an.

Klick Beispiel

Durch einen Klick auf die Karte öffent sich ein Popup in dem die aktuellen Koordinaten angezeigt werden.

GPX Track Anzeigen

Mit dem GPX Plugin wird ein GPX Track auf der Karte angezeigt. Zusätzlich werden einige Informationen über den Track ausgegeben. Der GPX Layer kann ein- bzw. ausgeblendet werden.

GPX Wegpunkte(POIs) Anzeigen

Mit dem GPX Plugin werden die Wegpunkte(POIs) auf einer Karte dargestellt. Durch einen Klick auf den Marker werden in einem Popup Fenster der Name- und der Beschreibungs-Tag angezeigt. Die Farbe der Marker wird durch den sym Tag festgelegt. Der GPX Layer kann ein- bzw. ausgeblendet werden.

Karte mit Maßstabanzeige

Eine einfache Karte mit Maßstabanzeige unten rechts. Es werden keine weiteren Plugins benötigt.

Karte mit Legende

Eine einfache Karte mit einer Legende unten links. Es werden keine weiteren Plugins benötigt.

Karte mit Marker und Popup

Erzeugt einen Marker mit einem Popup, in dem ein Link angezeigt wird, den man als Kartenausschnitt mit Marker versenden kann (wie unter Teilen auf der OSM Seite). Zusätlich werden noch die Koordinaten in einer extra Zeile angezeigt. Es werden keine weiteren Plugins benötigt.

Karte mit BBox Anzeige

Eine Karte, in der der aktuelle Kartenausschnitt nach anklicken als Bounding Box (bbox) angezeigt wird. Es werden keine weiteren Plugins benötigt.

Karte mit BBox Anzeige und Auswahl

Eine Karte, in der ein Kartenausschnitt ausgwählt werden kann und durch anklicken die Koordinaten der Bounding Box (bbox) angezeigt werden. Es wird das Leaflet Draw Plugins benötigt.

Karte mit verschiedenen Karten-Layern

Eine Karte, mit verschiedenen Karten-Layern. Es werden keine zusätzlichen Plugins benöigt. Das Laden der Karten kann ein wenig dauern.