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

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>
   Für WordPress: Shortcode dort einbinden, wo die Karte erscheinen soll. Der Shortcode lautet [iak] (also mit den eckigen Klammern. iak steht für „Interaktive Karte“. Wer Elementor nutzt, finden unten einen Hinweis dazu.
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.

Hinweis für Elementor: Im Elementor-Editor einen neuen Abschnitt vom Typ “Shortcode” einfügen. Zu diesem Abschnitt im Textfeld “Shorthode eingeben:” den Text “[iak]” (ohne Anführungszeichen) hinterlegen und dann “Speichern” klicken. Danach auf “Anwenden” klicken. Die Karte wird ggf. nur in der Live-Ansicht der Webseite angezeigt, nicht im Entwurfsmodus des Elementor-Editors. Um zu sehen, ob die Karte nach dem Hinzufügen des Shortcodes da ist, also die Seite in echt aufrufen.

Falls das WordPress-Plugin nicht wie gewünscht funktioniert: Ein Nutzer meldete ein Problem mit dem WPBakery Pagebuilder. Ggf. diesen deaktivieren oder den Standard Editor verwenden, wenn die Karte eingebettet wird.

Mehrere Karten auf einer Seite

Für mehrere Karten auf einer Seite gibt es einen eigenen Konfigurator.

Auch interessant

• Demo der interaktiven Karte
• Datenschutzprobleme mit Google Maps