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

⚙️ 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:
   <div id="drdsgvo_map"></div>
   
   Für WordPress: Shortcode [iak] dort einbinden, wo die Karte erscheinen soll.
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.

📜 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.

Sofern Sie als Organisation oder Unternehmen den Text oder Link nicht einbinden möchten, ist dies für einen einmaligen Betrag von 49 Euro zzgl. USt. möglich. Schreiben Sie hierzu an: karte@dr-dsgvo.de

🎬 Demo und weitere Infos

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!

🔧 Fehlersuche

Sie haben die Karte auf Ihrer Webseite eingebunden und sehen nur ein leeres Kartenbild? So finden Sie den Fehler:

• Referrer-Check: 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 gelöst ist, wurde die Webseiten-Adresse beim Download falsch angegeben.
• Schreibrechte: Alle Ordner sollten volle Schreibrechte haben (777), insbesondere der Ordner tiles.
• Verzeichnis-Struktur: Die Karte muss unterhalb des Hauptverzeichnisses auf Ihrem Web Server liegen (außer WordPress-Plugin).
• Testmodus: Firefox öffnen → F12 → Netzwerkanalyse → Nach Adressen <Domäne>/index.php/z=... suchen. Fehlermeldung "Forbidden"? Dann Schreibrechte oder Verzeichnis-Struktur prüfen.
• Caching-Plugins: Plugins wie Autoptimize testweise deaktivieren.
• PHP deaktiviert: Bei WordPress-Sicherheits-Plugins prüfen (z.B. "iThemes Security" → "PHP unter Plugins" muss aktiviert sein).

🎨 Anpassung der Darstellung

Zoom-Stufe

In der Datei karte.js können Sie den Zoom anpassen:

var drdsgvo_minzoom = 9+2;
var drdsgvo_maxzoom = 18+2;

Eine höhere Zahl zoomt hinein, eine negative Zahl zoomt heraus.

Maus-Zoom unterbinden

In der Datei karte.js suchen Sie nach:

var drdsgvo_mouseWheelZoom = true;

Ändern Sie dies auf false, um das Zoomen per Mausrad zu deaktivieren.

Größe der Karte

Die Kartengröße können Sie per CSS anpassen:

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

⚡ Funktionsweise

Vollbild-Button ausblenden

Falls gewünscht, können Sie den "Vollbild"-Button mit CSS ausblenden:

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

💼 WordPress-Plugin

Das WordPress-Plugin wurde von Gerwin Müller entwickelt.

Verwendung: Shortcode [iak] in einem Beitrag oder auf einer Seite einfügen.

Problem mit WPBakery Pagebuilder? Diesen deaktivieren oder den Standard-Editor verwenden.

📍 Mehrere Standorte pro Karte

In der Datei karte.js können Sie in der Funktion drdsgvo_addMarker(center1) weitere Standorte 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, drdsgvo_my_y]))
      }),
      // Weitere Standorte hinzufügen:
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([7.5, 50.6]))
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([7.52, 50.62]))
      })
    ]
  })
});

Ersetzen Sie die Beispiel-Koordinaten durch Ihre tatsächlichen Standorte.