Datenschutzfreundliche interaktive Karte für Webseiten: Plugin zum Download als Google Maps Ersatz

Kategorien: Datenschutz und Übersicht

Standort angeben, Standort bestätigen, Plugin herunterladen und auf Webseite einbinden.

Demo ansehen

Alle folgenden Informationen sind auch in den Installationsdateien enthalten, die zum Heruntergeladen bereitgestellt werden.

Systemvoraussetzungen

• PHP-fähiger Web Server
• Zugriff auf den Web Server, etwa per FTP, oder WordPress-Zugang beim WordPress-Plugin der Karte

Schnellstart

1. Verzeichnis interaktive_karte auf den Server Ihrer Webseite in das Hauptverzeichnis kopieren.
2. Script einbinden, am besten im HEAD-Bereich: <script type=”text/javascript”src=”/interaktive-karte/karte.js”></script>
3. Karte einbinden durch Hinzufügen eines Elements mit der ID drdsgvo_map, etwa so:
   <div id=”drdsgvo_map”></div>
4. Datenschutztext einbinden:
   Interaktive Karte
   Diese Webseite verwendet eine interaktive Karte von Dr. DSGVO. Die Karte wird lokal betrieben. Diese Lösung ist datenschutzfreundlich. Beim Abruf und Betrieb der Karte werden keine personenbezogenen Daten an Dritte weitergegeben. Weiterhin werden von uns für den Abruf und Betrieb der Karte keine personenbezogenen Daten außer den technisch notwendigen erhoben. Die Karte verwendet keine Cookies.
   
   –> den Text „interaktive Karte von Dr. DSGVO“ mit dem dofollow-Link https://dr-dsgvo.de versehen. Ein eventuell schon vorhandener Datenschutztext zu OpenStreetMap kann vorher restlos entfernt werden.

Eine Demo finden Sie in der Datei demo.html, die in den Installationsdateien enthalten ist. Die Demo läuft nur auf einem Web Server und nicht durch Aufruf der Datei über das lokale Dateisystem!

Wenn die Installationsdateien NICHT im Hauptverzeichnis eingesetzt werden sollen, sondern in einem Unterverzeichnis liegen soll, bitte folgendes beachten: Das Verzeichnis interaktive_karte selbst und samt Inhalt in den gewünschten Zielort reinkopieren. Die Karte dann einbinden über den Pfad relativ zur einbindenden Datei mit dem Script interaktive_karte/karte.js

Es reicht also nicht aus, die Datei karte.js direkt in den Zielordner reinzukopieren. Die Datei karte.js muss im Unterordner interaktive_karte liegen!

Eine englische Kurzanleitung als Textdatei gibt es ebenfalls:

Danke an einen Leser von Dr. DSGVO, der namentlich nicht genannt werden möchte. Er hat auch das Fadenkreuz als Marker unter der CC0-Lizenz (freie Nutzung) zur Verfügung gestellt.

Anpassung der Darstellung

Scrollen mit der Maus unterbinden

Soll die Maus nicht zu einem Zoom führen, wenn die Maus über der Karte steht und das Mausrad bedient wird, ist folgender Code in der Datei karte.js zu ändern. Suchen Sie nach

var drdsgvo_mouseWheelZoom = true;

Diese Anweisung sollte recht weit oben in der Datei karte.js stehen. Ändern Sie den Code wie folgt ab:

var drdsgvo_mouseWheelZoom = false; 

Diese Funktionalität ist erst für Karten verfügbar, die ab dem 21.10.2021 heruntergeladen wurden.

Größe der Karte

Die Größe der Kartendarstellung (Breite, Höhe) kann durch CSS-Styling des o.g. Elements drdsgvo_map verändert werden. Beispielsweise können Sie die Karte wie folgt einbinden:

<div id=”drdsgvo_map” style=”max-width:100%;width:600px;height:400px;”></div>

Durch den fett gedruckten Teil bestimmen Sie die Breite. Der Zusatz max-width:100% stellt sicher, dass bei kleineren Bildschirmen die Breite nicht auf 600 Pixel gesetzt wird, sondern maximal so breit ist wie der Bildschirm. Ich empfehle für ein optimales Nutzererlebnis eine responsive CSS-Definition von Breite und Höhe über die folgende CSS-Direktive:

<style>
  #drdsgvo_map {
    max-width:100%;
    width:600px;
    height:400px;
  }
  @media (max-width: 480px) {
    #drdsgvo_map {
      width:460px;
      height:320px;
    }
}
</style>

Diese Angabe sorgt dafür, dass

• die Karte mit 600 Pixeln Breite und 400 Pixeln Höhe angezeigt wird, wenn die Bildschirmbreite >=600 Pixel beträgt,
• die Karte mit 400 Pixeln Höhe und voller Bildschirmbreite angezeigt wird, wenn die Bildschirmbreite zwischen 481 und 599 Pixeln liegt,
• die Karte mit maximal 460 Pixeln Breite und immer 320 Pixeln Höhe angezeigt wird, wenn die Bildschirmbreite höchstens 480 Pixel beträgt

Der gezeigte Code muss in Ihrer HTML, wo die Karte erscheinen soll, integriert werden.

Lizenz

Die Karte darf frei und auf eigenes Risiko verwendet werden. Eine Nutzung ist nur erlaubt, wenn sowohl auf der Karte als auch in der Datenschutzerklärung der einbindenden Webseite ein dofollow-Link auf https://dr-dsgvo.de vorhanden ist.

Anzeigegröße der Lizenzinfos auf der Karte

Die Darstellung der rechts unten auf der Karte anzeigten Lizenzangabe kann bei Bedarf angepasst werden. Dies ist nicht notwendig, sondern Ihnen überlassen. Hier der CSS-Code dafür:

<style>
.ol-attribution ul a {
  /* Schriftgröße */
  font-size:11px;
  /* Schriftart */
  font-family:"Roboto",sans-serif";
  /* Weitere Formatierungen mit CSS-Anwendungen */
  ...
}
</style>

Dieser Code muss auf der HTML-Seite integriert werden, wo die Karte erscheinen soll. Bitte setzen Sie eigene Werte ein und ersetzen Sie die drei Punkte durch eigene weitere Formatierungen. Enfernen Sie am besten die im eben gezeigten Code von mir angegebenen Kommentare.

Funktionsweise

Die Karte läuft lokal auf Ihrem Server.
Es werden keine personenbezogenen Daten der Besucher Ihrer Webseite an Dritte gegeben.
Zum Abruf von Kartenmaterial wird der OpenStreetMap Server gerufen. Der Aufruf ist entkoppelt vom Besuch eines Nutzers auf Ihrer Webseite (daher ist der Vorgang nicht DSGVO-relevant).
Weitere Datentransfers zu Dritten finden nicht statt.
Das Kartenmaterial wird lokal abgespeichert und benötigt wenig Speicherplatz. Die Datenabrufe werden somit minimiert (“Caching”).
Ab einem gewissen Zeitpunkt läuft die Karte somit autark und ohne externe Datentransfers. Falls die Karte in seltenen Fällen nicht mehr aktuell sein, einfach den Inhalt des Ordners tiles löschen.

Auf der Karte befindet sich ein Button namens „Vollbild“. Klickt der Nutzer hierauf, wird in einem neuen Fenster die Webseite openstreetmap.org mit den Koordinaten des Standorts aufgerufen. Dieser Aufruf ist ein ganz gewöhnlicher externer Link und datenschutzrechtlich nicht kritisch (weil technisch notwendig). Wenn Sie es den Button für das Vollbild ausblenden möchten, geht das mit diesem CSS-Code:

<style>
.drdsgvo_btn {
display:none !important;
}
</style>

Die Lösung ist pragmatisch ausgelegt und wird gemäß Bedarf weiterentwickelt.

WordPress-Plugin

Das WordPress-Plugin wurde von Gerwin Müller ins Leben gerufen. Nach Installation des Plugins kann in einem WordPress-Beitrag oder einer WordPress-Seite der Shortcode [iak] verwendet werden, um die Karte anzuzeigen.

Auch interessant

• Demo der interaktiven Karte
• Datenschutzprobleme mit Google Maps