Karten in Contao DSGVO-konform einbinden

Dieser Artikel behandelt das Vorgehen bzw. die Einrichtung der Cookiebar unter dem Content Mangement System CONTAO bei Verwendung einer interaktiven Kartenfunktion. Folgende Systemkomponenten spielen dabei eine Rolle:

Das Prinzip funktioniert aber auch mit anderen Kartenanbietern. Am Ende findest du eine Checkliste, damit du beim nächsten Projekt nichts vergisst.

Hintergrund:
Leaflet und Kartendaten

Nicht Leaflet ist das Datenschutzproblem, sondern der Server, von dem die Kartenkacheln kommen.

Leaflet ist eine Open-Source-JavaScript-Bibliothek. Sie macht eine Karte im Browser bedienbar: zoomen, verschieben, Marker, eigene Bedienelemente. Kartendaten liefert Leaflet nicht selbst. Es setzt nur kleine PNG-Bilder (Kacheln) zu einer Karte zusammen, die ein Kartenserver ausliefert.

Cowegis ist ein Contao-Bundle (Plugin), welches Leaflet in Contao einbindet. Die Bibliothek liegt auf dem eigenen Server unter /bundles/cowegisclient/js/cowegis.js und baut selbst keine Verbindung nach außen auf.

Die Kacheln kommen in meinem Beispiel vom BKG (Karte TopPlusOpen, Server sgx.geodatenzentrum.de). Bei jedem Kartenaufruf gehen IP-Adresse, Browserdaten und die angeforderten Kartenausschnitte an diesen externen Kartenanbieter.

Für die Datenschutzerklärung heißt das: Leaflet musst du nicht erwähnen, den Kachel-Anbieter schon. Das BKG ist eine Bundesbehörde und kein Tracking-Dienst. Wer auf Nummer sicher gehen will, holt trotzdem eine Einwilligung ein, und genau darum geht es in diesem Artikel.

Schritt 1 und 2:
Gruppe und Cookie anlegen

Du brauchst eine Gruppe und darin einen Cookie ohne eigenes Script. Das Laden der Karte übernimmt später das Template. Ich gehe davon aus, dass deine Cookiebar-Konfiguration schon angelegt ist.

Nach dem Speichern notierst du dir die ID des Cookies aus der Liste oder der URL (id=…). Die brauchst du gleich im Script. Die Feldnamen können je nach Version der Cookiebar leicht abweichen.

Schritt 3:
Das Cowegis-Template anpassen

Die Karte lädt sich von selbst, sobald das Attribut map-uri im HTML steht. Benennst du es um, lädt sie nichts mehr.

Das Kartenelement <cowegis-map> holt sich beim Einfügen in die Seite die Konfiguration von der Adresse in map-uri und baut die Karte sofort auf. Steht das Attribut nicht da, wartet das Element einfach.

So gehst du vor:

1. Unter Layout → Templates das Template ce_cowegis_map öffnen. Gibt es noch keins, legst du es über „Neues Template“ an.
2. map-uri= durch data-map-uri= ersetzen. Der Wert dahinter bleibt, wie er ist.

<!-- vorher -->
<cowegis-map ... map-uri="...">
<!-- nachher -->
<cowegis-map ... data-map-uri="...">

Ab jetzt zeigt die Seite gar keine Karte mehr. Im nächsten Schritt lädst du sie nach der Zustimmung wieder nach.

Schritt 4:
JavaScript in der Templatedatei ergänzen

Die Cookiebar hat eine eigene JavaScript-Funktion für genau diesen Fall: cookiebar.addModule(). Sie führt eine Funktion erst aus, wenn der Besucher dem Cookie zugestimmt hat, und zeigt bis dahin einen Hinweis mit Button.

Füge dieses Script im Template ce_cowegis_map unter der Karte ein. Achtung! Ersetze ###CookieID### durch die ID deines Cookies.

<script>
document.addEventListener('DOMContentLoaded', function () {
  var COOKIE_ID = ###CookieID###;
  var el = document.querySelector('cowegis-map[data-map-uri]');
  if (!el || typeof cookiebar === 'undefined') return;

  // Platzhalter-Container vor der Karte, gleiche Höhe wie die Karte
  var box = document.createElement('div');
  box.className = 'map-consent';
  box.style.minHeight = el.style.height || '450px';
  el.parentNode.insertBefore(box, el);
  el.style.display = 'none';

  cookiebar.addModule(COOKIE_ID, function () {
    if (box.parentNode) box.parentNode.removeChild(box);
    el.style.display = 'block';
    if (el.map) return;
    fetch(el.getAttribute('data-map-uri'))
      .then(function (r) { return r.json(); })
      .then(function (cfg) { el.config = cfg; });
  }, {
    selector: box,
    message: 'Hier wird eine interaktive Karte dargestellt. Um Ihnen diese Funktion anbieten zu können, nutzen wir Kartendaten von externen Anbietern, in diesem Fall vom Bundesamt für Kartographie und Geodäsie (BKG). Dabei wird Ihre IP-Adresse an das BKG übertragen. Sie müssen dem zustimmen, damit Sie diesen Dienst nutzen können.',
    button: {
      show: true,
      text: 'Zustimmen und Karte laden',
      classes: 'map-consent__btn'
    }
  });
});
</script>

So funktioniert das Script:

1. Es legt einen eigenen Container .map-consent direkt vor der Karte an und blendet die Karte aus.
2. addModule setzt den Hinweis mit Button in diesen Container.
3. Klickt der Besucher auf den Button, speichert die Cookiebar die Einwilligung nur für diesen Cookie und ruft die Funktion auf.
4. Die Funktion entfernt den Container, blendet die Karte ein, holt die Konfiguration und übergibt sie mit el.config = cfg an das Kartenelement. Jetzt baut sich die Karte auf.
5. Hat der Besucher schon vorher zugestimmt, etwa über das Banner, läuft die Funktion sofort.

Die Karte wird erst eingeblendet und dann geladen. Das ist wichtig, weil Leaflet die Größe des Containers kennen muss, und die ist bei einem ausgeblendeten Element null.

Den Button-Text solltest du immer selbst setzen. Ohne ihn zeigt die Cookiebar bei mir den nicht übersetzten Schlüssel tl_cookiebar.acceptAndDisplayLabel an.

Eigene Scripts im Template, die auf die fertige Karte zugreifen (z. B. zusätzliche Bedienelemente), funktionieren weiter, wenn sie auf das Event cowegis:ready warten. Das kommt auch beim Nachladen.

Schritt 5:
CSS für den Hinweis-Kasten

Die Cookiebar bringt für den Hinweis kein eigenes Styling mit. Das hier gehört in dein Layout-CSS, die Farben passt du an dein Design an. Die Höhe setzt das Script automatisch.

.map-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #efefea;
  text-align: center;
}
.map-consent .cc-module { max-width: 520px; }
.map-consent .cc-module p { margin: 0 0 1.25rem; }
.map-consent__btn {
  padding: .75em 1.5em;
  border: 0;
  cursor: pointer;
  background: #444;
  color: #fff;
}
.map-consent__btn:hover { background: #222; }

Mehrsprachige Seiten

Bei einer zweiten Sprache brauchst du eine zweite Cookiebar mit eigener Cookie-ID. Das Script wählt die richtige ID anhand der Seitensprache. Die Oveleon-Cookiebar wird pro Startpunkt einer Website zugewiesen. Hat die englische Seite einen eigenen Startpunkt, legst du dort eine eigene Konfiguration mit Gruppe und Cookie an. Die neue Cookie-ID ist dann eine andere, in meinem Beispiel 4 (Deutsch) und 8 (Englisch).

Englische Texte für die Cookiebar

Das zweisprachige Script ersetzt das Script aus Schritt 4:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var el = document.querySelector('cowegis-map[data-map-uri]');
  if (!el || typeof cookiebar === 'undefined') return;

  var en = (document.documentElement.lang || '').indexOf('en') === 0;
  var COOKIE_ID = en ? 8 : 4;

  var box = document.createElement('div');
  box.className = 'map-consent';
  box.style.minHeight = el.style.height || '450px';
  el.parentNode.insertBefore(box, el);
  el.style.display = 'none';

  cookiebar.addModule(COOKIE_ID, function () {
    if (box.parentNode) box.parentNode.removeChild(box);
    el.style.display = 'block';
    if (el.map) return;
    fetch(el.getAttribute('data-map-uri'))
      .then(function (r) { return r.json(); })
      .then(function (cfg) { el.config = cfg; });
  }, {
    selector: box,
    message: en
      ? 'An interactive map is displayed here. To provide this feature, we use map data from an external provider, in this case the German Federal Agency for Cartography and Geodesy (BKG). In the process, your IP address is transmitted to the BKG. You must consent to this in order to use this service.'
      : 'Hier wird eine interaktive Karte dargestellt. Um Ihnen diese Funktion anbieten zu können, nutzen wir Kartendaten von externen Anbietern, in diesem Fall vom Bundesamt für Kartographie und Geodäsie (BKG). Dabei wird Ihre IP-Adresse an das BKG übertragen. Sie müssen dem zustimmen, damit Sie diesen Dienst nutzen können.',
    button: {
      show: true,
      text: en ? 'Accept and load map' : 'Zustimmen und Karte laden',
      classes: 'map-consent__btn'
    }
  });
});
</script>

Damit das klappt, muss im <html>-Tag der englischen Seite lang="en" stehen. Das setzt Contao automatisch aus der Sprache des Startpunkts. Weil die Karten in beiden Sprachen unterschiedlich hoch sein können, übernimmt der Kasten die Höhe aus dem style-Attribut der jeweiligen Karte.

Testen

Entscheidend ist nicht, ob der Hinweis erscheint, sondern ob vor dem Klick wirklich kein Request zum Kartenserver geht.

1. Cache leeren: Symfony-Cache über den Contao Manager oder unter Systemwartung.
2. Kontaktseite im Inkognito-Fenster öffnen und im Banner nur die essenziellen Cookies bestätigen. Der Kasten mit Hinweis und Button muss erscheinen.
3. DevTools → Netzwerk öffnen und nach geodatenzentrum filtern. Hier darf nichts auftauchen.
4. Auf „Zustimmen und Karte laden“ klicken. Der Kasten verschwindet, die Karte erscheint, im Netzwerk-Tab tauchen jetzt die Kacheln auf.
5. Gegentest: Cookies löschen, Seite neu laden und im Banner „Externe Medien“ zulassen. Die Karte muss sofort laden.
6. Englische Seite genauso prüfen.

Wenn die Karte blockiert ist, aber kein Hinweis erscheint: Prüf mit den DevTools, ob ein div.cc-module im HTML steht. Wenn ja, liegt es fast immer am Darstellungsort (siehe Shadow DOM) oder am CSS.

Datenschutzerklärung ergänzen

Der Kartenanbieter muss in die Datenschutzerklärung, Leaflet nicht. Diesen Abschnitt kannst du als Vorlage nehmen:

Kartendienst des BKG

Auf unserer Kontaktseite binden wir eine Karte ein, deren Kartendaten vom Bundesamt für Kartographie und Geodäsie (BKG), Richard-Strauss-Allee 11, 60598 Frankfurt am Main, bereitgestellt werden. Die Karte wird erst geladen, nachdem Sie eingewilligt haben. Beim Laden werden Ihre IP-Adresse sowie technische Informationen (z. B. Browsertyp, Datum und Uhrzeit, angeforderte Kartenausschnitte) an Server des BKG übermittelt. Rechtsgrundlage ist Ihre Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO und § 25 Abs. 1 TDDDG. Sie können Ihre Einwilligung jederzeit über die Cookie-Einstellungen widerrufen. Weitere Informationen: https://www.bkg.bund.de/DE/Service/Datenschutz/datenschutz.html

Fazit und Checkliste

Mit einem umbenannten Attribut, rund 30 Zeilen JavaScript und einem Cookie in der Cookiebar lädt die Karte erst nach Zustimmung. Der Aufwand liegt bei etwa einer Stunde, und das Prinzip lässt sich auf andere Web Components und Kartenanbieter übertragen.

• Gruppe „Externe Medien“ in der Cookiebar angelegt
• Cookie „Karte (BKG)“ ohne Script angelegt, ID notiert
• Im Template ce_cowegis_map map-uri durch data-map-uri ersetzt
• Script mit cookiebar.addModule eingefügt, Cookie-ID eingetragen
• Platzhalter neben der Karte, nicht darin (Shadow DOM)
• Button-Text selbst gesetzt
• CSS für .map-consent ergänzt
• Bei mehreren Sprachen: eigene Cookiebar und ID je Sprache, Script zweisprachig
• Cache geleert
• Im Inkognito-Fenster geprüft: vor dem Klick kein Request an den Kartenserver
• Gegentest mit Zustimmung über das Banner
• Datenschutzerklärung um den Kartenanbieter ergänzt, alte Abschnitte entfernt
• Link zu den Cookie-Einstellungen im Footer

Quellen:
Oveleon Contao Cookiebar – Extended Usage · Oveleon Contao Cookiebar – Configuration
Das ist eine technische Anleitung, keine Rechtsberatung. Nit Hilfe von KI erstellt.