Never change a running system. Das wissen alle, die sich aktiv mit Technik beschäftigen. Jetzt habe ich mich schon etliche Jahre mit der Gestaltung und Zusammenstellung von digitalen Landkarten mit Hilfe von OpenStreetMap, OpenLayers und Javascript auseinandergesetzt – habe auch mal ein wenig in benachbarte Programmierbereiche geschaut -, plötzlich bekomme ich einen Rappel und wechsele auf ein anderes Programmierframework: Leaflet. Meine ersten Gehversuche hatte ich schon vor einiger Zeit durchgeführt, sah aber noch keine Veranlassung, meine Arbeit mit OpenLayers aufzugeben.Schlank und schön?

Um Geodaten für den Endanwender leicht verständlich und problemlos handhabbar aufzubereiten – z. B. in Landkarten mit unterschiedlichen Schwerpunkten und/oder Themen (Straßen-, Wander-, Freizeit-, Wetterkarten uvm.) – muss jemand entsprechende Programmierarbeit leisten. Hier reichen nicht mehr nur einfache HTML-Dokumente aus, weil die Karten interaktiv sein sollen und auf Benutzereingaben mit Tastatur und Maus reagieren müssen. Dazu muss Programmcode ausgeführt werden – meist wird Javasscript verwandt.

Um es kurz zu machen: Die Anbieter von raumbezogenen Informationen (Geoinformationssysteme wie ESRI/ArcGIs, Mapbox, Mapquest, OpenStreetMap, Google Maps, Bing Maps usw.) bieten meist auch Programmierbibliotheken für den Zugriff auf ihre Daten an. Solche Bibliotheken werden auch API (Application Programming Interface, Anwendungsprogrammierschnittstelle 😉 ) genannt. Die von mir bisher zur Kartendarstellung bisher benutzte API OpenLayers ist zwar mächtig und gut programmiert, aber sehr umfangreich; in die Dokumentation muss man sich gründlichst einlesen – sie ist nur für Menschen mit guten Programmierkenntnissen sinnvoll benutzbar, die dargebotenen Beispiele in der Dokumentation fallen sehr knapp aus.

Die zurzeit von mir in Erprobung befindliche API Leaflet ist auch sehr mächtig und erlaubt – wie OpenLayers – den Zugriff auf sehr viele Geoinformationssysteme, sie ist aber in ihrer Systemarchitektur recht schlank und kann durch sogenannte Plugins um zusätzliche Funktionalität erweitert werden. Besonders hat mich von Leaflet überzeugt, dass es ganz einfach ist, mit Hilfe von Javascript einen Marker auf einer Karte zu platzieren, der bei einem Mausklick ein Popup mit einem erklärenden Text anzeigt. Um dies mit OpenLayers zu erreichen, habe ich bestimmt ein halbes Jahr Dokumentationen durchlesen müssen, um mir ein eigenes Plugin für diese einfache Sache schreiben zu können.

Schneller Einstieg

Dass selbst Anfänger raumbezogener Programmierung schnell auf einen grünen Zweig kommen, ist Verdienst des Leaflet-Erfinders Vladimir Agafonkin. Seine ausführliche, verständliche Dokumentation führt beim Programmieren schnell zu einem motivierenden Ergebnis. Hier ein Beispiel, wie man eine Landkarte mit relativ wenig Code (HTML und Javascript gemischt) im Browser darstellen kann:

Das Ergebnis kann man hier bewundern.

Das Wichtigste hier nun erläutert (wir setzen voraus, dass die Leser/-innen einfaches HTML beherrschen).

In Zeile 6 wird ein CSS-Stylesheet in das Kartendokument eingebunden, dass die Darstellung von Kartenkacheln (dargestellt als PNG-Grafiken) und Schrift beschreibt. In Zeile 12 wird ein DOM-Objekt landkarte zur Darstellung der eigentlichen Karte festgelegt. In Zeile 14 wird die API-Bibliothek (in JavaScript) von Leaflet eingebunden. Zeile 19 erzeugt ein Kartenobjekt (die digitale Landkarte), das sämtliche Eigenschaften und Funktionen besitzt, die man braucht, um eine Karte interaktiv im Browser machen zu können; dabei wird mit der Geo-Koordinatenangabe der Ort festgelegt, der Mittelpunkt der anzuzeigenden Karte sein soll. In Zeile 20 wird schließlich eine grafische Schicht für den Browser erstellt, auf der die Kartenkacheln angezeigt werden, die in diesem Fall von OpenStreetMap geruntergeladen werden. Diese Schicht mit den Kacheln wird schließlich dem DOM-Objekt landkarte hinzugefügt, damit es angezeigt werden kann.

Immer weiter…

Leaflet – aber auch OpenLayers – haben den Vorteil, dass sie “objektorientiert” programmiert sind – und damit relativ einfach erweiterbar. Da es immer wieder neue Anwendungsgebiete für raumbezogene Projekte gibt, sehen sich immer wieder Projekte oder einzelne Programmierer/-innen dazu berufen, ergänzende Bibliotheken für die APIs zu entwickeln. Es handelt sich dabei meist nicht um abgehobene Dinge, sondern um praktische Anwendungen wie die Zuordnung von Geokoordinaten zu Orten/Adressen und umgekehrt. Der Ideen und deren Umsetzung sind keine Grenzen gesetzt, da alles unter unterschiedlichen OpenSource-Lizenzen benutzt und verändert werden darf. Solche Ergänzungen, die sich nahtlos in das Rahmenwerk der Leaflet-API integrieren lassen, nennt man Plugin.

Eine Idee geisterte schon seit langer Zeit in meinem Kopf: Ich wollte gerne für die von mir entwickelten Websites eine Anwendung zum Routing – dem Suchen von Wegen von einem Ausgangspunkt zu einem Zielpunkt –  haben, die nicht auf die bekannten Webdienste von Google, Bing und Co. zurückgreift. Dies konnte ich mit dem Plugin leaflet-routing-machine von Per Liedman erreichen. Dank dieses Plugins sparte ich mir über 5000 Zeilen Programmcode, den ich hätte schreiben müssen, um das Routing adäquat umzusetzen.

Bei der Lektüre nicht nur der Originaldokumentation, sondern auch unendlichen Dokumenten aus Online-Verweisen (Blogs, Foren usw.) und anderen Veröffentlichungen konnte ich viele sinnvolle Hilfen aus der Netz-Community erhalten. Verglichen mit den Hilfen, die ich auf dieselbe Art bei OpenStreetMap erhalten konnte, war die von Leaflet-Nutzern bedeutend größer.

Ein komplexes Beispiel – das Fahrradrouting – kann man hier auf unserer eigenen Site sehen