Eine digitale Karte sagt mehr als 1000 Worte

Geodaten werden im Web am verständlichsten auf Karten sichtbar. Leistungsfähige Bibliotheken wie Leaflet ermöglichen solche Anwendungen bereits heute, setzen aber meist JavaScript-Kenntnisse voraus. Wie lassen sich kartenbasierte Anwendungen auch mit grundlegenden HTML-Kenntnissen erstellen und gleichzeitig für erfahrene Entwickler*innen vereinfachen? Unser Ansatz kapselt zentrale Leaflet-Funktionen in Webkomponenten, die als eigene HTML-Elemente genutzt werden. Karten, Overlays, Marker sowie Geo- JSON- und Zeitreihendaten lassen sich dadurch deklarativ einbinden. So entstehen kartenorientierte, informationsreiche Live-Webanwendungen schneller, verständlicher und mit weniger wiederkehrendem Programmieraufwand.

Geodaten sind besonders anschaulich, wenn sie nicht nur als Tabellen, Koordinaten oder Messwerte vorliegen, sondern auch direkt auf einer Karte sichtbar sind. Die OpenStreetMap-Initiative hat in den letzten Jahrzehnten einen weltweiten, frei zugänglichen Datensatz geschaffen, der sich zur Darstellung elektronischer Karten in unterschiedlichen Maßstäben eignet.¹ Darauf aufbauend sind verschiedene Bibliotheken entstanden, mit denen sich OpenStreetMap-Karten sowie andere Kartenquellen wie ESRI-Satellitenkarten im Web visualisieren lassen.

Eine besonders populäre und weit verbreitete Java-Script-Bibliothek ist Leaflet.² Sie bietet viele Funktionen, die für interaktive Kartenanwendungen benötigt werden: Kartenebenen, Marker, Linien, Polygone, Popups, Tooltips sowie die Einbindung von GeoJSON-Daten. Damit lassen sich leistungsfähige Anwendungen entwickeln, die direkt im Webbrowser laufen. In der Praxis richtet sich Leaflet jedoch vor allem an Programmiererinnen und Programmierer. Wer lediglich grundlegende HTML-Kenntnisse besitzt, kann die Möglichkeiten der Bibliothek nur eingeschränkt nutzen.

Genau an dieser Stelle setzt unser Ansatz an. Ziel unserer Arbeit ist es, zentrale Funktionen von Leaflet mithilfe von Webkomponenten als eigene HTML-Elemente verfügbar zu machen. Karten, Overlays, Marker und externe Datenquellen können dadurch deklarativ beschrieben werden, ohne dass für jede Anwendung umfangreicher JavaScript-Code geschrieben werden muss. Der Ansatz richtet sich damit sowohl an Personen mit einfachen HTML-Kenntnissen als auch an erfahrene Entwicklerinnen und Entwickler, die wiederkehrende Implementierungsaufgaben reduzieren möchten. Gleichzeitig bleibt der Zugriff auf die zugrunde liegenden Leaflet-Objekte möglich, sodass die Komponenten bei Bedarf erweitert und in komplexere Anwendungen integriert werden können.

Leaflet: Eine flexible Bibliothek für Programmierer*innen

Anwendungen, die die Leaflet-Bibliothek verwenden, können auf eine reichhaltige Basisfunktionalität aufsetzen. So stellt die zentrale Klasse Map eine Landkarte zur Verfügung, mit der man an beliebige Orte der Erde navigieren und in die Karte hinein- und herauszoomen kann. Leaflet stellt eine Reihe sogenannter Controls zur Verfügung, die in die Karte eingeblendet werden können. Abbildung 1 zeigt eine beispielhafte Karte mit 4 verschiedenen Controls. Am interessantesten ist hierbei das „Layer Control“, welches nicht nur die dynamische Auswahl der zugrunde liegenden Landkarte (hier OpenStreetMap) erlaubt, sondern auch das Ein- und Ausblenden weiterer Layer, wie etwa nautische Navigationszeichen des OpenSeaMap Overlays oder benutzerspezifische Basiselemente, wie hier eine Reihe von Regattabojen, die zu einer Gruppe zu- sammengefasst wurden.³

Weitere Basiselemente der Leaflet-Bibliothek sind Marker (Punkte), Linien, Polygone (geschlossene Linienzüge), Kreise, Rechtecke, Tooltips und Popups. Auch unterstützt Leaflet das GeoJSON-Format, das den Import und die Darstellung beliebiger GeoJSON-Daten ermöglicht. Weiterhin besteht die Möglichkeit, diese Basiselemente zu gruppieren (Layer-/FeatureGroup) und einheitlich zu behandeln, etwa über das „Layer Control“ ein- und auszublenden.⁴ Versierte Entwickler*innen mit JavaScript-Kenntnissen finden sich recht schnell mit dem Funktionsumfang und der Klassenbibliothek zurecht. Leaflet verfügt auch über ein gutes Tutorial zur Einarbeitung, allerdings richtet es sich an Programmierende und nicht an Personen mit „Schulkenntnissen“ in HTML. Und das ist der Punkt, an dem unser Ansatz und die Webkomponenten ins Spiel kommen.

W3C Webkomponenten

Mittels Webkomponenten ist es möglich, den Sprachumfang von HTML um neue Elemente zu erweitern. So kann man sich beispielsweise ein neues Element „db-table“ vorstellen, das dem HTML-Element „table“ ähnelt, aber seine Daten aus einer externen Datenbank bezieht, anstatt diese als Unterelemente (tr, th, td) direkt zu spezifizieren. Dazu muss lediglich die Datenquelle, bestehend aus Server, Datenbank und Tabelle, als HTML-Parameter angegeben werden. Die Implementierung einer Webkomponente erfolgt in Form einer JavaScript-Klasse, innerhalb der, neben der eigentlichen Applikationslogik, eine Reihe von Callback-Methoden implementiert werden müssen, die beim Laden der Webseite vom Browser aufgerufen werden, um das neue Element in die Webseite zu integrieren. Nachdem die neue Komponente einmal implementiert wurde, kann sie einfach in jede beliebige Webseite eingebunden und verwendet werden. Webkomponenten werden als W3C-Standard von allen aktuellen Browsern unterstützt und benötigen keine weiteren Voraussetzungen.

Das Hauptziel unserer Arbeit war es, die Leaflet-Bibliothek mit einer neuen deklarativen Schnittstelle auf Ba- sis des W3C-Standards Webkomponenten auszustatten, damit auch Nicht-Programmierer*innen kartenbasierte Anwendungen erstellen können. Aber unsere Komponenten erleichtern auch erfahrenen Entwickler*innen die Arbeit, da ein großer Teil des Codes, der normalerweise implementiert werden müsste, durch unsere Komponenten abgedeckt werden kann und nur bestimmte Teile manuell implementiert werden müssen. Dies ist möglich, weil auf die von den Webkomponenten gekapselten Leaflet-Objekte jederzeit zugegriffen werden kann.

Wie Browser und Server zusammenspielen

Die Architektur unserer Anwendung ist in Abbildung 2 dargestellt. Auf der Client-Seite laufen unsere Komponenten im Browser. Dort sind sie für die Darstellung von Karten, Overlays und geografischen Elementen wie Markern, Linien usw. zuständig. Eine Reihe von Komponenten kann ihre Informationen optional aus Datenquellen auf der Serverseite beziehen. So kann beispielsweise die Marker-Komponente ihre Position zyklisch aus einer Zeitreihendatenbank auslesen oder unsere GeoJSON-Komponente kann auf ein oder mehrere FeatureSets (Sammlung von GeoJSON-Objekten) zugreifen und so viele Objekte unterschiedlicher Typen mit einem einzigen Befehl visualisieren. Des Weiteren bezieht auch Leaflet selbst die Kartenkacheln, aus denen es die Landkarte im Browser zusammensetzt, von einem externen Web Map Tile Service (WMTS).

Beispielanwendung: Echtzeit darstellung geo referenzierter Objekte

Abbildung 3 zeigt die implementierte Anwendung. Darauf sind zwei Paddler zu sehen, die aufeinander zupaddeln, um gemeinsam am Picknickplatz (dargestellt durch ein Bier-Symbol) eine kleine Pause zu machen. Der zugehörige Anwendungscode ist in Abbildung 4 dargestellt. 

Die Basiskarte und ein zusätzliches alternatives ESRI-Satellitenbild werden zwischen Zeile 2 und Zeile 12 im Rahmen der Komponenten „ll-map“, „ll-tile“ und „ll-over- lay“ definiert. Das in Zeile 9 beginnende „ll-overlay“-Element legt fest, dass eine zusätzliche Darstellungsschicht mit der Bezeichnung „Sea layer“ und nautischen Symbolen über der Basiskarte angezeigt werden soll.

Das „ll-geojson“-Element in Zeile 13 lädt die Daten zu den Portagen (Orte, an denen das Boot über Land trans- portiert werden muss) aus einer serverseitigen GeoJ- SON-Datenquelle, die über den Parameter „url“ angegeben wird. Zudem wird mithilfe der Parameter „icon-url“ und „icon-size“ ein Symbol (ein Paddler, der sein Boot über dem Kopf trägt) festgelegt.

In Zeile 19 wird der Picknickplatz an einem festen Punkt definiert, der durch Längen- und Breitengrad angegeben wird. Er verfügt zudem über ein eigenes Symbol und einen Tooltip-Text, der beim Klick darauf angezeigt wird. Die beiden anzuzeigenden Paddler werden in den Zeilen 25 und 31 definiert. Anstatt die Position der beiden Paddler fix festzulegen, können sie ihre aktuelle Position zyklisch aus einer Zeitreihendatenbank abrufen, die über den Parameter „url“ angegeben wird. Die beiden weiteren Parameter „lat-path“ und „lng-path“ spezifizieren, wo sich die Informationen zu Längen- und Breitengrad in der JSON-Antwort der Zeitreihendatenbank befinden.

Abschließend ist das Element „ll-group“ zu erläutern. Wie der Name schon sagt, dient es als Gruppierungselement und fasst die untergeordneten Elemente zusammen, die dann über das „Layer Control“ oben rechts ein- und ausgeblendet werden können. Weitergehende, nicht dargestellte Möglichkeiten, umfassen das Importieren, Filtern und Analysieren von beliebigen GeoJSON-Daten- sätzen aus beliebigen Quellen im Netz.

Nächste Schritte und offene Fragen

Wir haben einen ersten Prototyp auf Basis des Lit Frameworks implementiert.⁵ Zusätzlich zu den im Beispiel vor- gestellten Komponenten gibt es eine „ll-polyline“-Komponente zur Darstellung von Linien und eine „ll-icon“-Komponente zur Definition von Symbolobjekten, auf die dann andere Komponenten verweisen können. Weitere Arbeiten sind im Bereich der vereinfachten Integration von JavaScript-Funktionen in den Leaflet-Ereignismechanismus sowie der Verarbeitung von Feature-Informationen bei der Darstellung von GeoJSON-Objekten geplant.

Quellen

¹ OpenStreetMap, “OpenStreetMap”, https://www.openstreetmap.org, letzter Zugriff: 11.6.2026

² V. Agafonkin, “Leaflet API Reference”, https://leafletjs.com/reference.html, letzter Zugriff: 11.6.2026

³ OpenSeaMap, “The free nautical chart”, https://openseamap.org/index.php?id=openseamap&L=1, letzter Zugriff: 12.6.2026

⁴ H. Butler, S. Gillies, and T. Schaub, “RFC 7946 - The GeoJSON Format”, 2016, https://datatracker.ietf.org/doc/html/rfc7946, letzter Zugriff: 12.6.2026

⁵ LIT, “Simple. Fast. Web Components”, 2024, https://lit.dev/, letzter Zugriff: 12.6.2026

Autoren

Prof. Dr. Andreas Schmidt
Professor für Datenbanken und Informationssysteme der Fakultät für Informatik und Wirtschaftsinformatik der Hochschule Karlsruhe und wissenschaftlicher Mitarbeiter am Institut für Automation und angewandte Informatik (IAI) des Karlsruher Institut für Technologie (KIT)

Tizian Berger, B.Sc.
Masterstudent und Lehrbeauftragter an der Fakultät für Informatik und Wirtschaftsinformatik der Hochschule Karlsruhe

Tobias Münch, M.Sc.
CTO der Münch Gesellschaft für IT-Solutions mbH und Lehrbeauftragter an der Fakultät für Ingenieurwissenschaften und Informatik der Hochschule Osnabrück