Veröffentlichung eines QGIS-Projekts als Webkarte mit dem Plugin qgis2web

Starte QGIS und öffne ein neues Projekt. Wähle unten rechts das Koordinatenreferenzsystem EPSG:3857. Füge dann eine Hintergrundkarte (z.B. XYZ-Tiles von OpenStreetMap) hinzu.

Füge jetzt dein GPX-File zum Projekt hinzu. Dafür in der Menüleiste Layer  Layer hinzufügen  Neuen GPX-Layer hinzufügen…​ anwählen, und im neuen Fenster mit …​ die richtige Datei auswählen. Beim Objekttyp Spuren anwählen, und den Layer mit Hinzufügen erstellen.

Alternativ kannst du die Datei auch per Drag-and-Drop ins QGIS ziehen, tracks anwählen und mit Layer hinzufügen bestätigen.

Falls du mehrere Tracks gleichzeitig importieren, oder deinen Track glätten und vereinfachen möchtest, findest du mehr Informationen im Tutorial Eine Karte deiner Reise mit QGIS erstellen.

Um Punktdaten im GeoJSON-Format zu erstellen, verwenden wir die freie Webapplikation geojson.io.

Wenn jetzt weitere Punkte hinzugefügt werden, ist es einfacher, die Eigenschaften direkt rechts in der Tabelle zu ergänzen.

Wenn alle Punkte erfasst worden sind, können die Punkte oben links mit Save → GeoJSON unter dem Namen Punkte.geojson abgespeichert werden.

Um die erstellten Punkte in QGIS zu importieren, kann die GeoJSON-Datei per Drag-and-Drop in das Projekt gezogen werden. Alternativ kann wieder über Layer  Layer hinzufügen  Vektor Layer hinzufügen…​ ein Importfenster geöffnet werden, und die Datei über …​ ausgewählt werden. Danach alle Standardeinstellungen belassen und mit Hinzufügen bestätigen.

Deinem QGIS-Projekt kann ein Titel vergeben werden, der anschliessend im Browser als Tab-Name angezeigt wird. Der Titel und eine Beschreibung können zusätzlich auch auf der exportierten Karte dargestellt werden. Um den Titel hinzuzufügen, klicke oben links auf Projekt  Eigenschaften und füge im Abschnitt Allgemein deinen Titel unter Projekttitel hinzu. Die Beschreibung kann im Abschnitt Metadaten unter Zusammenfassung hinzugefügt werden. Dabei kann auch HTML für die Formatierung verwendet werden.

Um den GPX-Track zu gestalten, kann der entsprechende Layer angewählt und das Gestaltungsfenster geöffnet werden (Pinselsymbol oberhalb der Layerliste). Dann kann die Farbe, Linienstärke, Deckkraft, Effekte, usw. eingestellt werden. Experimentiere mit verschiedenen Einstellungen, um eine Darstellung zu finden, die dir gefällt.

Um die Punkte zu gestalten, kann ebenfalls das Layergestaltungsfenster geöffnet werden. Sollen alle Punkte gleich dargestellt werden, kann gleich vorgegangen werden wie beim Track – es kann Farbe, Grösse, Umrandung, Effekt, Symbol und vieles mehr eingestellt werden.

Zusätzlich zum Design der Punkte können sie auch mit einem Label beschriftet werden. Dazu im Layergestaltungsfenster vom Tab Symbolisierung in den Tab Beschriftung wechseln. Dort von Keine Beschriftung auf Einzelne Beschriftungen umstellen. Beim Wert kann dann angegeben werden, was angezeigt werden soll, also zum Beispiel Name um den Namen des Punkts anzuzeigen, Name || Icon um neben dem Namen auch das Emoji anzuzeigen, oder Name || ' - ' || Höhe || 'm.ü.M.' um die Höhe mit Masseinheit neben dem Namen zu haben. Zusätzlich können die Schriftart, -grösse und -farbe, sowie viele weitere Einstellungen gewählt werden.

OpenLayers und Leaflet sind JavaScript-Bibliotheken, die es erlauben, interaktive Karten im Browser anzuzeigen. Beim Exportieren aus QGIS kann gewählt werden, welche dieser Bibliotheken verwendet werden soll. Grundsätzlich ist keine der beiden Bibliotheken besser als die andere, aber sie unterstützen zum Teil leicht andere Funktionen. Wenn also eine Konfiguration nicht korrekt dargestellt wird (zum Beispiel ein Puffer um den Labeltext in Leaflet), prüfe, ob das bei der anderen Bibliothek funktioniert. Wenn beide Bibliotheken funktionieren, kann selbst entschieden werden. In diesem Tutorial wird Leaflet verwendet, da es etwas populärer ist als OpenLayers.

Die Einstellungen im Fenster sind in drei Abschnitte unterteilt. Zusätzlich gibt es einen Abschnitt Settings, der die Einstellungen für das Vorschaufenster definiert, und einen Abschnitt WIKI, der ausführliche Beschreibungen des qgis2web Plugins auf Englisch enthält.

Klicke auf Export. Deine generierte Webmap sollte sich im Browser (Chrome, Edge, Firefox, Safari, etc.) öffnen. Untersuche deine Karte, ob alles so aussieht und funktioniert, wie du dir gedacht hast. Wenn nicht, ändere die Einstellungen des QGIS-Projekts oder des qgis2web Plugins und exportiere deine Karte erneut.

Um die Webseite in deinem lokalen Netzwerk (z.B. im WLAN bei dir zu Hause) zu hosten, kannst du deinen eigenen Computer verwenden. Dafür gibt es viele verschiedene Möglichkeiten. Für die hier beschriebene Variante muss Python installiert sein.

Bevor du deine Webseite im Internet freigibst, stelle sicher, dass du keine persönlichen oder privaten Daten von dir selbst oder anderen Personen ungewollt freigibst. Mit einem GPX-Track könntest du beispielsweise aus Versehen deine Adresse preisgeben.

Zusätzlich musst du sicherstellen, dass keine Urheberrechte verletzt werden. Dazu ein Beispiel: In diesem Tutorial wird OpenStreetMap als Hintergrundkarte verwendet. OpenStreetMap bietet offene Kartendaten an, verlangt aber, dass bei der Verwendung klar auf ihre Copyright-Seite verlinkt wird. Um diesen Link auf deiner Webseite einzufügen, kannst du die Layereigenschaften des OpenStreetMap-Layers mit Rechtsklick auf den Layer → Eigenschaften  QGIS Server öffnen. Füge dann im Abschnitt Quellenangabe den Titel "© OpenStreetMap Mitwirkende" sowie den URL https://www.openstreetmap.org/copyright hinzu. Das Plugin qgis2web verwendet diese Quellenangabe automatisch, um den Link in der unteren rechten Ecke anzuzeigen (siehe bspw. Abb. 8).

Für andere offene Daten muss separat geprüft werden, ob und wie diese verwendet werden dürfen. Eigene Daten (selbst geschossene Bilder, selbst aufgezeichnete GPX-Tracks) dürfen immer verwendet werden.

Um deine Webseite im Internet zu hosten, wollen wir nicht den eigenen PC verwenden. Das ist zwar möglich, aber aus Sicherheits- und Komplexitätsgründen nicht empfohlen. Stattdessen verwenden wir einen Online-Service. Es gibt viele verschiedene Möglichkeiten, je nach Anforderungen, z.B. Netlify, Cloudflare Pages oder Infomaniak (Schweizer Dienst, kostenpflichtig).

Für dieses Tutorial wird GitHub Pages verwendet. Dafür brauchst du einen GitHub Account.

Wenn du in Zukunft eine Änderung an deiner Seite machen möchtest, kannst du die aktualisierten Dateien wieder in GitHub hochladen, und in kürzester Zeit ist auch deine Webseite wieder aktuell.