Karten im Web veröffentlichen mit freien Werkzeugen

Das Ziel dieses Arbeitsblattes ist es zu zeigen, wie man auf einfache Weise eine Webmap mit frei zugänglichen und datenschutzfreundlichen Werkzeugen erstellt, veröffentlicht (publizieren) und mit anderen Nutzern teilt.

Wir sprechen von "Webmaps" und nicht von "Karten", um zu betonen, dass es sich um eine Karte handelt, die jedoch interaktiv im Web mit der Maus gezoomt (zoom) und verschoben (pan) werden kann, um sich zu orientieren. Idealerweise kann man zudem in die Karte klicken, um mehr Informationen zu erhalten.

Ausgangspunkt sind nicht zu grosse Geodaten, die häufig in Tabellenform im CSV-Format vorliegen, wie die Liste der Teilnehmer in unserem Falle. Diese Daten müssen typischerweise aufbereitet werden. Darüber hinaus wird vorausgesetzt, dass keine Programmierkenntnisse zur Bedienung eines Werkzeugs erforderlich sind (sog. "Low-Code"-Tools).

Die Lernziele sind, ein geeignetes Web Mapping-Werkzeug auswählen zu können und weitere Lernmaterialien zu den empfohlenen Tools zu kennen.

Abbildung 1: Screenshot (statisches Bild) einer Webmap mit den Wohnorten von Teilnehmern eines Kurses. Erstellt und veröffentlicht mit Datawrapper (Quellen: eigene Daten, Basiskarte Datawrapper)

Eine Webmap besteht aus verschiedenen graphischen Elementen und Interaktionsfunktionen. Folgende sind aber für diesen Anwendungsfall besonders wichtig:

Das Besondere an einer Webmap ist ja ihre Interaktivität. So kann ein Benutzer die Karte vergrössern (zoom), sie verschieben (pan), mit der Maus über ein Element hovern oder eine Infobox anklicken. In der Tabelle 1 im Kapitel "Die Werkzeuge" unten gibt es eine Zusammenstellung der Werkzeuge mit ihren Funktionen und den unterstützten Elementen.

Das Vorgehen aus Sicht eines Kartenerstellers ist typischerweise wie folgt:

Bei der Auswahl der hier vorgestellten Softwarewerkzeuge wurde darauf geachtet, dass es sich um Open-Source-Software handelt und ein frei zugänglicher Online-Dienst genutzt werden kann, der datenschutzfreundlich ist. Aus diesem Grund wird u.a. auf die Produktfamilie ArcGIS nicht weiter eingegangen (wobei anzumerken ist, dass ArcGIS sehr gut dokumentiert ist und im Anhang nochmals erwähnt wird). Was datenschutzfreundlich bedeutet und warum Google Maps & Co. hier nicht berücksichtigt werden, wird in einem eigenen Kapitel [Warum nicht Google Maps & Co] weiter unten erläutert. Wichtig ist, dass Open Source, freie Webdienste und eigenes Hosting noch keine Garantie für Datenschutzkonformität sind und man selbst genau hinschauen muss.

Als Nutzer bezahlt man immer! Wie im Kapitel zu Google Maps & Co. erwähnt, "bezahlt" man dort mit seinen persönlichen Daten für die "freie" Nutzung deren Dienste. Sinnvoller erscheint es uns aber, seine eigene Zeit - z.B. in Form von Engagement für ein quelloffenes Projekt - einzusetzen oder eine Mitgliedschaft oder eine Spende zugunsten eines quelloffenen Projekts in Erwägung zu ziehen.

Welcher Kartentyp gewählt wird, hängt von den Daten ab und davon, was mit der Karte kommuniziert werden soll. Der Oberbegriff für Kartentypen in der Kartographie ist "thematische Karte". Es handelt sich also um Karten, mit denen ein bestimmtes Thema kommuniziert werden soll. Dies im Gegensatz z.B. zu einer topographischen (Hintergrund-)Karte.

Wir behandeln hier folgende thematischen Kartentypen:

Abbildung 2: Die drei Kartentypen Standort-Karte, Symbol-Karte und Choroplethen-Karte (Quelle: links eigene Darstellung, Rest Datawrapper)

Dieses Arbeitsblatt konzentriert sich auf die ersten beiden Kartentypen, die Standort-Karte und die Symbol-Karte, und nicht alle Tools unterstützen diese: Siehe Tabelle 1 unten.

Das Arbeitsblatt Apache Superset für Fortgeschrittene auf OpenSchoolMaps erklärt ausführlicher, was es für Kartentypen gibt.

Es gibt einige weitere Kartentypen, die hier nur kurz erwähnt werden sollen: Die Zeitreihen-Karte (engl. "time series map", z.B. animierte GIFs). Die "Hotspot-Karte" (ein Bild ohne Zoom und Pan aber mit Popup-Fenster: vgl. nachfolgender Tipp), die Heatmap (ein "Wärmebild", z.B. von hoher menschlicher Aktivität) und die "Mapstory" (vgl. Anhang "Mapstories und ArcGIS StoryMaps").

Wenn es sich um weniger als eine Handvoll Punkte handelt, können die Marker in einigen Werkzeugen manuell erfasst und direkt online veröffentlicht werden (siehe Tabelle 1 unten). In der Regel müssen die Geodaten jedoch vorher aufbereitet werden, da je nach Werkzeug die Daten im GeoJSON-Format oder ggf. als GPX oder KML vorliegen müssen.

Die Geodaten können u.a. mit folgenden Konvertierungs-Werkzeugen aufbereitet und konvertiert werden (Auswahl):

Tabellenkalkulationen (Excel) und tabellarische Daten im .XSLX- bzw. CSV-Format müssen meist ebenfalls im GeoJSON-Format aufbereitet werden. Dabei müssen die Felder, welche die Geometrie (Koordinaten) enthalten, sowie idealerweise die Datentypen manuell angegeben werden.

Nebst den oben erwähnten Konvertierungs-Werkzeugen gibt es speziell noch togeojson.com und Mapshaper, die beide frei zugänglich und online CSV nach GeoJSON konvertieren.

Es kann sein, dass keine Koordinaten vorhanden sind. Dann können die Daten vorher geokodiert werden - man spricht auch von "Data Enrichment". Der Datawrapper und QGIS haben diesen Geocodierungsprozess beispielsweise integriert. Bei der Geokodierung werden (Post-)Adressen und geografische Namen in Koordinaten umgewandelt. Zum Beispiel wird "Oberseestrasse 10, Rapperswil" mit den Koordinaten 47.223303, 8.816775 ergänzt. Damit können Daten mit Adressen auf der Karte dargestellt werden. Dieser Prozess ist recht aufwendig, was auch der Grund dafür ist, dass es kaum freie Dienste dafür gibt. Mehr dazu im Arbeitsblatt Geokodierung von Adressen mit QGIS auf OpenSchoolMaps.

Das Hosting der Daten - d.h. das "Hochladen" ins Web - und das Hosting der Webmap selber sind zwei verschiedene Dinge, die aber meist am gleichen "Ort" sind.

Nachfolgend haben wir die verschiedenen Lösungen für das Hosting der Daten und der Webmap zusammengestellt:

Alle Werkzeuge erfordern eine Registrierung (Benutzerkonto), wobei Datawrapper und geo.admin.ch mit gewissen Einschränkungen und im Rahmen der Nutzungsbedingungen auch direkt und ohne Registrierung genutzt werden können.

Datawrapper hat wahrscheinlich die beste "User Experience" für gewöhnliche Benutzer. Dies liegt vor allem an der Benutzerführung, den massgeschneiderten Funktionen, sowie den bereitgestellten administrativen Grenzen und am integrierten Hosting der eigenen Daten.

uMap folgt gleich nach Datawrapper. Damit kann man kartographische Elemente konfigurieren, wie geografische Suche, Kartenlegende, Massstab, Nordpfeil etc.

Der Online-Kartenviewer geo.admin.ch der swisstopo bietet die Einbindung von KML und GPX an und ist auf das Gebiet der Schweiz beschränkt. Hier und auf sCHoolmaps.ch gibt es zahlreiche Anleitungen dazu. Bei geo.admin.ch wie auch bei GitLab oder GitHub ist die Hintergrundkarte fest vorgegeben und kann nicht angepasst werden.

Dazwischen gibt es eine Reihe von Werkzeugen, die sehr zweckgebunden sind und nur rudimentäre kartographische Elemente enthalten. Je nach Zielsetzung, Vorkenntnissen und der Beantwortung der drei oben genannten wichtigen Fragen sind sie mehr oder weniger geeignet.

Das "Power-Tool" QGIS bietet schliesslich die meisten Funktionen. Dafür aber erfordert es einiges an technischem Know-How und im Falle von qgis2web ein separates Hosting. Das Erlernen von GIS-Kenntnissen mit QGIS ist jedoch machbar. Dazu gibt es unter anderem diese Einführung in QGIS 3 und Geoinformationssysteme (GIS) auf OpenSchoolMaps.

Als Geovisualisierungs-Beispiel für die Webmap verwenden wir die Adressliste vom bereits erwähnten Arbeitsblatt Geokodierung von Adressen mit QGIS. Die Personen dort sind rein fiktiv und daher vom Datenschutz her unbedenklich.

Hier die Daten in aufbereiteter Form:

Eine statische Karte ist technisch gesehen ein reines Bild, das für viele Zwecke ausreicht und keine weiteren Internetressourcen benötigt. Damit lässt sich auch besser kontrollieren, wie die Karte im PDF oder gedruckt aussieht.

Bei allen oben genannten Werkzeugen kann ein Screenshot des Kartenausschnitts gemacht werden, der dann als Bild auf ein Datenhosting hochgeladen und als statische Karte in eigene Webseiten eingebettet werden kann.

Für Datawrapper und QGIS gilt, dass sie zusätzlich einen eigenen Export als Bilddatei anbieten, der eine höhere Auflösung erlaubt, als ein Screenshot normalerweise bietet.

Es ist der grosse Verdienst von Google, mit "Google Maps" Webkarten und Navigation zum Allgemeingut gemacht zu haben. Aber Technologiekonzerne wie Google & Co. tendieren mit ihren kommerziellen Produkten zu "Vendor-Lock-in", zu Monopolen und "Gatekeepern", die nicht datenschutzfreundlich sind. Sie machen sich damit zu potentiellen Datenkraken oder zumindest ethisch fragwürdig.

Ein Dienst, der ethisch fragwürdig und datenschutzunfreundlich ist, wirft Bedenken auf, wie z.B:

Der erste Punkt ist ein No-Go für Studierende und Schülerinnen und Schüler. Von ihnen kann nicht erwartet werden, dass sie eine Kreditkarte angeben. Zur Lösung dieses "Bedürfnisses" bieten einige Produkte Gruppenbenutzerkonten an, was der "Datensparsamkeit" etwas näher kommt.

Die Punkte 2 und 3 sind ein No-Go für Behörden. Damit tragen sie potenziell dazu bei, dass die Daten ihrer Bürger ins Ausland gelangen und dort möglicherweise weiterverkauft werden. Google Maps enthält immer mehr kommerzielle Werbung. So etwas sollte auf Behörden-Websites tabu sein. In allen drei Fällen "bezahlen" die Nutzer mit ihren eigenen Daten für die Nutzung deren Dienste, ohne dass sie sich dessen möglicherweise bewusst sind und ohne wirklich eingewilligt zu haben.

Das grundsätzliche Vorgehen wurde oben erklärt. Ein konkretes Vorgehen zur Erstellung einer Webmap mit den Wohnorten der Teilnehmer eines Kurses mit Datawrapper ist nun wie folgt:

Dieser Ablauf funktioniert zum Testen auch ohne Konto, nur dass man dann die Karte nicht einbetten kann.

Eine Alternative zu Datawrapper ist TimeMapper (Open-Source).

Sie können die uMap-Karte auch lokal speichern und duplizieren. Klicken Sie dazu auf den Share-Button oben in der Karte. Klicken Sie dann auf "Komplettes Backup" unter "Alle Daten und Einstellungen". Damit laden Sie eine uMap-Datei mit der Endung .umap herunter. Mit dieser Datei können Sie dann eine neue uMap-Karte mit den gleichen Einstellungen und Geodaten erstellen.

Hier Beispiel eines Gist mit Share-Link für die Einbettung mittels HTML-iframe: https://gist.github.com/lukasschnellmann/314841f865845805bd08cd5b3b540a31.pibb

Beispieldaten können im Abschnitt Beispieldaten "Adressliste" heruntergeladen werden.

Wie im Kapitel "Werkzeuge" erwähnt, ist es jederzeit und bei allen Tools möglich, Screenshots von einem Kartenausschnitt zu machen und dieses Bild als statische Karte zu veröffentlichen. In QGIS kann man zusätzlich einen eigenen Export als Bilddatei durchführen, der eine höhere Auflösung erlaubt, als ein Screenshot normalerweise bietet.

Ausserdem bietet QGIS die Möglichkeit, Geodaten mit Zeitreihen als Bildreihe zu exportieren, aus der ein animiertes GIF erstellt werden kann. Das Arbeitsblatt "Zeitreise mit QGIS" auf OpenSchoolMaps erklärt, wie das geht.

QGIS Cloud ist eine einfache Möglichkeit, ein Web-GIS zu betreiben, ohne dass man einen eigenen Server warten und sichern muss. Mit dem QGIS Cloud-Plugin kann man lokale Daten in die QGIS Cloud-Datenbank hochladen und Webmaps und OGC-konforme Dienste veröffentlichen. Mit QGIS Server sehen die veröffentlichten Karten sehr ähnlich aus wie auf dem Desktop.

Abbildung 7 (👆 interaktiv im Web!): "Unsere" mit QGIS erstellte und auf QGIS Cloud veröffentlichte, interaktive Karte. Mit HTML-iframe eingebunden. (Quellen: Eigene Daten, Basiskarte OpenStreetMap).

QGIS Cloud Free ist ein Dienst, der für Testzwecke und die nicht-kommerzielle Nutzung kostenlos genutzt werden kann. Er erfordert einen Account und die einmalige Installation des freien QGIS Cloud Plugins.

Website QGIS Cloud Free.

Für QGIS gibt es das Plugin qgis2web, mit dem man ein QGIS-Projekt in eine Webmap umwandeln und dann beliebig verwenden kann. Dabei kann zwischen den Kartenbibliotheken Leaflet und OpenLayers gewählt werden. Der Export erzeugt eine HTML-Datei und weitere Dateien (in den Formaten JavaScript, GeoJSON, PNG) in einem Dateiverzeichnis. Diese Dateien müssen dann auf einen separaten Webserver kopiert werden, der die HTML-Datei interpretieren kann, um die Karte zu veröffentlichen. Diese Lösung bietet die grösste Kontrolle über das Kartendesign und das Hosting bzw. die Veröffentlichung, ist aber auch aus Nutzersicht am anspruchsvollsten.

Abbildung 8 (👆 interaktiv im Web!): "Unsere" mit QGIS und mit dem Plugin qgis2web erstellte, interaktive Webmap (Leaflet), die auf GitLab Pages veröffentlicht wurde. Mit HTML-iframe eingebunden. (Quellen: Eigene Daten, Basiskarte OpenStreetMap)

Das Arbeitsblatt "5. Präsentation von Geodaten" auf OpenSchoolMaps zeigt beispielsweis, wie man schöne Karten mit QGIS erstellt, die dann mit qgis2web exportiert werden können.

Das QGIS-Plugin qgis2web ist im Tutorial "Web Mapping with QGIS2Web (QGIS3)" von qgistutorials.com auf Englisch erklärt. Dazu gibt es viele weitere Videos.