Wie man einen "Endlos-Zoom-Effekt" für ein Video aus einer Sequenz von KI-generierten Bildern erstellt.
DSGVO konforme OpenStreetMap Karten
Dynamische Landkarten in Webseiten verwenden
Datenschutz-Grundverordnung und OpenStreetmap Karten
Aus Platzgründen wurden die Zoomstufen dieses Beispiels beschränkt.
Mit der Datenschutz-Grundverordnung, kurz DSGVO, hat die Europäische Union ein bürokratisches Instrument geschaffen, dem wir unter anderem seitenlange Cookie-Dialoge auf Webseiten und Datenschutzerklärungen in Buchlänge zu verdanken haben. Vereinfacht ausgedrückt verbietet die DSGVO die Übermittlung personenbezogener Daten an Server ohne ausdrückliche Einwilligung des Nutzers. Der Begriff "personenbezogene Daten" wird dabei so eng ausgelegt, dass bereits eine IP-Adresse darunter fällt.
Dies ist ein Problem, wenn man eine Karte von OpenStreetMap in eine Webseite einbinden möchte. Das OpenStreetMap-Projekt ist ein Projekt, das Kartenmaterial unter einer freien Lizenz zur Verfügung stellt. Diese Karten, die von Freiwilligen erstellt werden, sind sehr gut und gehören zu den besten verfügbaren Landkarten, was Detailgrad und Genauigkeit betrifft.
Das Kartenmaterial wird in Form von Kacheln von einem sogenannten Tileserver bereitgestellt. Dieser liefert auf Anfrage die Kacheln für die darzustellende Region in der gewünschten Zoomstufe. Dabei handelt es sich um Bilddateien, die in der Regel 256x256 Pixel groß sind. Das Problem ist nun, dass nach der DSGVO die Verbindung zum Server nicht automatisch aufgebaut werden darf, weil dabei die IP-Adresse übertragen werden muss.
DSGVO Konforme Verwendung von Tileservern online
Um der DSGVO gerecht zu werden müsste man ein Kartenapplet so programmieren, dass es zunächst gar nichts oder eine zuvor lokal erstellte Karte als Bild anzeigt mit einer Bitte der Datenübertragung zuzustimmen. Zusätzlich sollte man als Webseitenbetreiber einen "Auftragsverarbeitungsvertrag" (AVV) mit dem Betreiber des Tileservers abschließen, um die notwendige Datenübertragung juristisch zu legitimieren. Doch niemand, der einen Tileserver kostenfrei betreibt möchte sich dieser Bürokratie aussetzen und damit auch noch juristisch angreifbar machen.
Alternativ könnte man auf eigene Kosten einen Tileserver betreiben, dessen einzige Aufgabe es dann sein könnte 24 Stunden täglich zu laufen, um den Anfahrtsweg zu einer Bäckerei auf derern Webseite anzuzeigen. In diesem Fall keine Datenübertragung zu Dritten statt, weshalb die Pflichten der DSGVO nicht greifen würden.
Lokale Tiles vom eigenen Webserver
Die einzige realistische und benutzerfreundliche Lösung ohne laufende Kosten ist das lokale Vorhalten aller in der Karte verwendeten Tiles auf dem eigenen Webserver. Die hier beschriebene Lösung ist so implementiert, dass keine Cookies gesetzt, keine Einwilligungen eingeholt und keine Hinweise in der Datenschutzerklärung erfolgen müssen. Es handelt sich um eine Lösung ohne Kommunikation mit anderen Servern, die komplett lokal auf dem eigenen Webserver läuft. Ich stelle dafür GitHub ein Paket bereit, in dem sich die für die DSGVO konforme Verwendung von OpenStreetMap-Karten notwendigen Javascript Module, sowie Kommandozeilenprogramme zum herunterladen von Tiles von einem lokalen Server befinden.
Erzeugen von Kartenkacheln für die lokale Nutzung
Vor der Verwendung des Kartenmoduls müssen die notwendigen Kacheln der Karte für alle gewünschten Zoomstufen erstellt und in einer Form abgelegt werden, dass sie von diesem verwendet werden können. Zu diesem Zweck verwenden wir einen lokal installierten Tileserver. Dieser Server wird nur für die Erstellung der Tiles benötigt. Für die Verwendung der Karte auf der Webseite ist er später nicht notwendig.
Installation eines lokalen Tileservers
Das einfachste wäre es, die Kacheln direkt vom Tileserver des OpenStreetmap-Projektes herunterzuladen. Das verstößt allerdings gegen die Tile Usage Policy des Projektes, weil dabei dessen Server unnötig belastet würden. Ein direkter Download großer Mengen an Kacheln wird aus diesem Grund blockiert und führt zur Sperrung der verwendeten Software. Auf den Seiten des Projektes heißt es zu solchen unerwünschten Massendownloads:
Als Massendownload („Scraping“) bezeichnet man das Herunterladen von Kacheln im Voraus, anstatt sie erst dann herunterzuladen, wenn der Nutzer die Kacheln ansieht. Übliche Beispiele sind das Erstellen eines Kachelarchivs oder das Herunterladen für die Offline-Nutzung. Massendownloads sind verboten. Diese Kacheln werden im Allgemeinen nicht im Voraus auf dem Server zwischengespeichert und müssen speziell für diese Anfragen gerendert werden, was eine ungerechtfertigte Belastung der verfügbaren Ressourcen darstellt.
Aus diesem Grund gibt es auch keine funktionierende Software für den automatisierten Tile-Download von Servern des OpenStreetMap Projektes. Die Kacheln müssen anstelle dessen mit einem eigenen, lokalen Tileserver erzeugt werden.
Die Einrichtung eines solchen Servers ist nicht ganz einfach, aber machbar. Die im Folgenden verlinkten Anleitungen beschreiben, wie dies auf einem Ubuntu 24.04 bzw. 22.04 LTS-System funktioniert. Es ist zu beachten, das es auf einem normalen PC infolge des begrenzten Speicherplatzes nicht möglich sein wird eine komplette Weltkarte zu speichern. Aus diesem Grund muß man sich bei der Installation auf einen kleineren Bereich beschränken. Entsprechende Daten im osm.pbd Format sollte man sich vorher von der Seite https://download.geofabrik.de/ besorgen und die folgenden Anleitungen entsprechend abwandeln:
Wenn man der Anleitung folgt, dann sollte beim Aufruf der URL http://127.0.0.1/sample_leaflet.html eine interaktive Karte im Browser zu sehen sein. Im hier gezeigten Beispiel wurden die Kartendaten für Sachsen installiert.
Nach erfolgreicher Installation läuft der Tileserver lokal und kann im Browser benutzt werden. Im Beispiel wurden nur die Daten von des Freistaates Sachsen installiert.Erzeugen der notwendigen Kacheln
Der lokale Tileserver kann nun verwendet werden um ohne Einschränkungen Kacheln zu erzeugen. Zu diesen Zweck stelle ich im Archiv
osm-map-bundle auf GitHub
das Python-Skript tile_downloader.py
zur Verfügung. Es ermöglicht das Herunterladen von Kartentiles von einem lokalen Server
für einen definierten geographischen Bereich und mehrere Zoomstufen. Es speichert die Tiles lokal in der
OpenStreetMap typischen Verzeichnisstruktur.
Kommandozeilenparameter
Parameter | Beschreibung |
---|---|
--min-lat | Minimaler Breitengrad des Bereichs. Gibt die südliche Grenze des geografischen Bereichs an, für den die Tiles heruntergeladen werden (Standard: 50.8592). |
--max-lat | Maximaler Breitengrad des Bereichs. Gibt die nördliche Grenze des geografischen Bereichs an, für den die Tiles heruntergeladen werden (Standard: 51.0824). |
--min-lon | Minimaler Längengrad des Bereichs. Gibt die westliche Grenze des geografischen Bereichs an, für den die Tiles heruntergeladen werden (Standard: 13.2701). |
--max-lon | Maximaler Längengrad des Bereichs. Gibt die östliche Grenze des geografischen Bereichs an, für den die Tiles heruntergeladen werden (Standard: 13.4488). |
--zoom | Liste der Zoomstufen, die heruntergeladen werden sollen. Akzeptiert mehrere Werte, z. B. "11 12 13". Standard: 11–17. |
--output | Verzeichnis, in dem die heruntergeladenen Tiles gespeichert werden. Die Verzeichnisstruktur basiert auf Zoomstufe, X- und Y-Koordinaten (Standard: ./dist/osm_tiles ). |
--url-template | URL-Template für den Tile-Server. Platzhalter {z} , {x} und {y} werden durch Zoomstufe und Kachelkoordinaten ersetzt (Standard: http://127.0.0.1/hot/{z}/{x}/{y}.png ). |
Beispiel
python tile_downloader.py \
--min-lat 50.0 \
--max-lat 51.0 \
--min-lon 13.0 \
--max-lon 14.0 \
--zoom 11 12 13 \
--output ./osm_tiles
Im Ergebnis werden die Kacheln im Verzeichnis ./osm_tiles
abgelegt. Dieses Verzeichnis kann dann, vom dem auf der Webseite
eingebundenen Kartenmopdul verwendet werden um die Landkarte zu erzeugen.
Einbinden der Karte in HTML
Die Einbindung der Karte erfolgt durch laden der Datei osm-map-bundle.js
und Initialisierung des Kartenmoduls. Dieses Modul kann
neben der Karte noch mehrere GPX-Tracks und eine Liste mit "Points of Interest" anzeigen.
Erstellen eines Containers für die Karte
Zum einblenden der Karte in einer HTML Seite muss zunächst ein Container angelegt werden, die Open layers Stylesheets eingebunden und das paket osm-map-bundle.js geladen werden.
<div id="map" style="height:750px; width:750px;"></div>
<link rel="stylesheet" href="ol.css" />
<script src="osm-map-bundle.js"></script>
Initialisierung der Karte
Nach dem laden des osm-map-bundle kann die Karte Initialisiert werden:
<script>
const config = new GpxOsmMap.GpxOsmMapConfig(
'map', // Map container ID
13.3604225, // Longitude (center)
50.9951988, // Latitude (center)
"./osm_tiles" // Path to local tiles
);
// Set zoom level configurations
config.setZoom(14, 19, 14); // Min, max, and initial zoom levels
// Optional: Add GPX layers for tracks
config.setGpxLayers([
{ url: 'grabentour.gpx', color: '#f00', width: 4 }
]);
// Optional: Add annotation points with names and coordinates
config.setAnnotationLayer({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "name": "Wünschmannmühle" },
"geometry": {
"type": "Point",
"coordinates": [13.370541, 50.985271]
}
},
{
"type": "Feature",
"properties": { "name": "4. Lichtloch" },
"geometry": {
"type": "Point",
"coordinates": [13.366876, 51.007467]
}
}]
});
const map = new GpxOsmMap.GpxOsmMap(config);
</script>
Das Kartenmodul würde einem normalen Tileserver verwenden, wenn man in der Konfiguration kein lokales Kachelverzeichnis angibt. In diesem Fall wäre es allerdings nicht mehr DSGVO konform und der Benutzer würde sich in Deutschland dem Risiko von Abmahnungen aussetzen.