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:

Fehlersuche

Sie haben die Karte auf Ihrer Webseite eingebunden und sehen nur ein leeres Kartenbild mit ein paar Buttons ("Vollbild"…). So finden Sie den Fehler meistens:

• Im Download-Verzeichnis interaktive_karte\proxy die Datei referrer.php öffnen. Dort die Zeile
  $schutz_aktiv = true;
  auf
  $schutz_aktiv = false;
  setzen. Wenn das Problem damit gelöst ist, wurde die Adresse der Webseite, auf der die Karte eingebunden werden soll, beim Download falsch angegeben.
• Alle Ordner des Downloads sollten auf Ihrem Web Server volle Schreibrechte haben (777), insbesondere der Ordner tiles (dort werden heruntergeladene Karten-Kacheln abgespeichert).
• Die Karte muss unterhalb des Hauptverzeichnisses auf Ihrem Web Server liegen (außer WordPress-Plugin, da ist es anders).
• Testmodus: Firefox öffnen; Taste F12; die Entwicklerkonsole öffnet sich; Karteireiter Netzwerkanalyse wählen; Suchen nach Adressen <Domäne Ihrer Webseite>/index.php/z=….
  Diese Adresse werden gerufen, um die Karten-Kacheln abzurufen (Inhaltsdaten).
  Kopieren Sie eine dieser Adressen und öffnen Sie diese in einem neuen Browser-Tab. Wie lautet die Fehlermeldung? Wenn erscheint „Forbidden“ oder „Zugriff verweigert“, dann liegt die Karte nicht im Hauptverzeichnis, oder die Verzeichnisse haben nicht ausreichend Schreibrechte.
  

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. Wenn Sie 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.

Mehrere Standorte pro Karte

Im Download für die Karte gibt es die Datei karte.js im Ordner interaktive_karte. Dort suchen Sie die Stelle

function drdsgvo_addMarker(center1) {

In dieser Funktion können Sie weitere Standorte hinzufügen, indem Sie den fett gedruckten Code hinzufügen:

drdsgvo_layer = new ol.layer.Vector({
   source: new ol.source.Vector({
      features: [
         new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([drdsgvo_my_x+0.0, drdsgvo_my_y]))
         }),
         new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([drdsgvo_my_x+0.01, drdsgvo_my_y]))
         }),
         new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([drdsgvo_my_x+0.02, drdsgvo_my_y]))
         })
         ]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
           anchor: [0.5, 1],
           src: drdsgvo_relpath+'/marker.png'
        })
    })
});

Über den fett gedruckten Teil wurden beispielhaft zwei neue Standorte (also insgesamt drei Standorte) definiert:

• drdsgvo_my_x, drdsgvo_my_y ist der Erste Standort, der ja immer angezeigt wird.
• drdsgvo_my_x+0.01, drdsgvo_my_y und drdsgvo_my_x+0.02, drdsgvo_my_y sind die zweiten und dritten Standorte als Beispiel. Statt drdsgvo_my_x+0.01, drdsgvo_my_y die tatsächlichen Geo-Koordinaten einsetzen, beispielsweise 7,50

Auch interessant

• Demo der interaktiven Karte
• Datenschutzprobleme mit Google Maps