oveleon/contao-cookiebar und openstreetmaps

Hallo allerseits,
vielleicht kann mir hier jemand helfen:

ich verwende das geniale oveleon/contao-cookiebar zur Darstellung der (wenigen) Cookies.

Das würde ich gerne auch für eine Zustimmung zur Darstellung von OSM-Karten verwenden - hier wird jedoch kein Cookie gesetzt, sondern einfach externe Bilder von einem Tiles-Server geholt (z.B. in meinem Fall .png von stamen.com).

Wie kann man die cookiebar Konfiguration dahingehend ändern, dass es auch für externe Grafiken anwendbar wäre (also diese ohne Zustimmung nicht geladen werden würden)?

Hallo eixi,

schau mal, ich habe hier eine kleine Anleitung für diesen Fall geschrieben:
https://github.com/oveleon/contao-cookiebar/issues/32

Schau mal ob dir der Absatz "Wie kann ich andere Dienste (bspw. OpenStreetMap) blocken?" weiterhilft.

LG Doi

Hallo,
oben genannte Anleitung bezieht sich ja auf die Verwendung von OSM via iFrame.
Wie verhält es sich aber, wenn ich die OSM Karten über das Leaflet Framework laden möchte.

Ich habe einen Cookie-Typ -> Benutzerdefiniert eingefügt.

Im Feld "Script" habe ich mein JS eingefügt:

Code:

---

var map = L.map('map').setView([52.7820,13.3566], 9);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>',
                maxZoom: 18
        }).addTo(map);
        L.marker([Koordinaten]).addTo(map)
              .bindPopup('Label.')
        L.marker([Koordinaten]).addTo(map)
              .bindPopup('Label.')

---

(Das Script funktionert natürlich, wenn ich es im Scriptbereich des Contao-Seitenlayouts verwende)

Weitere Einstellungen habe ich ersteinmal nicht vorgenommen. Wenn ich nun in den Haupteinstellungen von Cookiebar Version aktualisieren wähle und speichere, passiert nix. Die Karte wird nicht angezeigt. Habe ich die Funktionsweise falsch verstanden?

Hallo Spelmann,

dafür stellt die Cookiebar bereits zwei Möglichkeiten zur Verfügung, diese werden ebenfalls in der Anleitung im Abschnitt "Wie kann ich andere Erweiterungen berücksichtigen?" kurz angeschnitten.

Zum einen hättest Du die Möglichkeit den Skriptblock erst initialisieren zu lassen wenn der entsprechende Cookie akzeptiert wurde:

Code:

---

if(cookiebar.issetCookie(cookieIdOfLeaflet)){
  // Skript-Initialisierung der Erweiterung
}

---

zum anderen könnte man der Cookiebar über die addModule-Methode eine Callback-Methode mitgeben/registrieren, welche Dir das Initialisieren des Skripts abnimmt und dabei alle Verhalten berücksichtigt.

Zum Beispiel:

Code:

---

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(cookieIdOfLeaflet, initializeLeaflet);
});

function initializeLeaflet(){
    var map = L.map('map').setView([52.7820,13.3566], 9);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>',
                maxZoom: 18
        }).addTo(map);
        L.marker([Koordinaten]).addTo(map)
              .bindPopup('Label.')
        L.marker([Koordinaten]).addTo(map)
              .bindPopup('Label.')
}

---

oder mit Ausgabe eines Blockieren-Textes + Akzeptieren Button:

Code:

---

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(cookieIdOfLeaflet, initializeLeaflet, {
        selector: '#element',          // [required] Defines the element selector in which the message is output
        message: 'Your text',          // [required] The text to be displayed
        button: {                     
            show: true,                // Extends the output by a confirmation button,
            text: 'Custom button text', // Button text
            classes: 'e.g. first second'    // Own CSS classes for the button separated by spaces
        }
    });
});

function initializeLeaflet(){
    ...
}

---

Die Cookiebar-Version dient dazu, die Cookiebar bei allen Besuchern wieder anzeigen zu lassen, unabhängig davon ob diese durch den Besucher bereits bedient wurde oder nicht. Dies wäre also sinnvoll wenn der Seite z.B. neue Services/Cookies hinzugefügt werden o.ä.

EDIT:

Zitat:

---

Ich habe einen Cookie-Typ -> Benutzerdefiniert eingefügt.

Im Feld "Script" habe ich mein JS eingefügt:

---

Auch diese Vorgehensweise sollte durchaus möglich sein. Allerdings können so kein Text und / oder Button statt der Karte angezeigt werden.

LG Doi

Vielen Dank für die ausführliche Beschreibung. Ich bekomme jetzt immerhin schon etwas angezeigt. Ohne im Detail zu verstehen was die Abschnitte machen, habe ich das letzte Beispiel folgendermaßen versucht:

Im Seitenlayout habe ich eingefügt:

Code:

---

document.addEventListener("DOMContentLoaded", function() { usw...

---

In der cookiebar-Erweiterung habe ich wieder den Typ Benutzerdefiniert genommen und dort unter Script (bestätigt) eingetragen:

Code:

---

function initializeLeaflet(){
    var map = L.map('map').setView([52.7820,13.3566], 9);
usw...

---

Ausserdem dort noch die Cookie-ID angelegt.

Wenn ich jetzt den Eintrag für Leaflet in den Cookie-Einstellungen des Frontends aktiviere/deaktiviere wird das zwar registriert, aber leider erst nach einem Refresh. Auch der Button und die Hinweistexte werden bei deaktiviertem Cookie nicht angezeigt.

War das falsch das so aufzuteilen?
Kannst Du mir noch etwas helfen?
Vielen Dank!

Das das Skript erst nach einem Refresh greift, kommt dadurch, dass die Funktion erst hinzugefügt wird wenn der Cookie akzeptiert wurde (Feld: Skript (bestätigt)), die Initialisierung jedoch bereits vorher stattgefunden hat.

D.h. du bindest gerade eine Funktion die noch nicht Verfügbar ist. M.E. müssten hier auch Fehler in der Konsole ausgegeben werden. Nach einem Refresh ist der Cookie dann bereits akzeptiert, weshalb die Funktion direkt ausgegeben und von der Cookiebar getriggert wird.

Wir können das ganze also etwas vereinfachen:

Sollten wir also mit der addModule-Methode arbeiten wollen, greifen wir am besten erstmal auf den Cookie-Typen "Hinweis" "Benutzerdefiniert (Skript)" zurück (EDIT: Ein Hinweis-Typ kann nicht entgegengenommen werden, einfach "Benutzerdefiniert (Skript)" wählen und die Skriptblöcke für diesen Fall freilassen).
In meinem Fall hat der soeben angelegte Typ die ID 1. Dieser soll nun dafür da sein, um mein "individuelles" Skript steuern zu können (Cookie akzeptiert / nicht akzeptiert).

Wenn ich nun folgenden Code in meinem Layout hinterlege, weiß die Cookiebar, dass wenn der Cookie-Typ mit der ID 1 akzeptiert wurde, eine Callback-Methode ausgeführt werden muss. Das funktioniert sowohl beim betreten einer Seite als auch beim betätigen der Cookiebar.

Code:

---

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(1, initializeLeaflet); // 1 durch eigene ID austauschen
});

function initializeLeaflet(){
    var map = L.map('map').setView([52.7820,13.3566], 9);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>',
                maxZoom: 18
        }).addTo(map);
        L.marker([Koordinaten]).addTo(map)
              .bindPopup('Label.')
        L.marker([Koordinaten]).addTo(map)
              .bindPopup('Label.')
}

---

In dieser Variante liegt der auszuführende Code bereits die ganze Zeit im DOM und wird ausschließlich von der Cookiebar getriggert wenn die Initialisierung stattfinden darf. Also könntest Du den Code auch in ein beliebiges Template schreiben oder dort wo es für Dich am meisten Sinn macht. Ich habe für sowas immer eigene js-Dateien oder schreibe den Code immer direkt in ein für die Initialisierung zuständiges Template wie bspw. bei der dlh_googlemaps-Erweiterung.

Um sicherzugehen dass der Code an sich stimmt und das Verhalten korrekt ist, kannst Du zum Test einmal ein einfaches alert('hallo'); in die Funktion initializeLeaflet aufnehmen.

Also im Endeffekt sind nur zwei Schritte nötig:
1. Cookie-Typ anlegen
2. addModule-Methode mit Callback einrichten

Erweiterte Ausgabe
Nun ist es ja so, dass wir die Karte nicht nur sperren wollen, sondern dem Besucher auch irgendwie mitteilen möchten, dass diese erst angezeigt werden kann, sofern der zuständige Service akzeptiert wird.
Für diesen Fall gibt es wie schon erwähnt im dritten Parameter der addModule-Methode die Möglichkeit einen beliebigen Text, sowie einen Button in einem beliebigen DOM-Element ausgeben zu lassen.

Wenn ich mir Deinen Code so anschauen, gehe ich nun davon aus, dass die Initialisierung der Karte auf ein DIV mit der ID "map" angewendet wird.
Mit folgendem Code, möchte ich nun einen Text "Akzeptiere mich!" und einem Button "Klick mich!" in genau diesem DIV anzeigen lassen, bis der Cookie akzeptiert wurde:

Code:

---

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(1, initializeLeaflet, {
        selector: '#map',
        message: 'Akzeptiere mich!',
        button: {                     
            show: true,
            text: 'Klick mich!'
        }
    });
});

function initializeLeaflet(){
    ...
}

---

Cookie akzeptiert: DIV#map -> Karte
Cookie nicht akzeptiert: DIV#map -> Text + Button

Ich hoffe das ist irgendwie verständlich und hilft Dir weiter :p

Sollte es nicht funktionieren kannst du mir gerne auch eine PN mit der Seite schicken o.ä., dann schau ich mir das mal an.

LG Doi

Danke erstmal an Spelmann, der mein Problem wesentlich präziser formuliert hat, und natürlich an Doi für die ausführliche Antwort.

Ich werde mich da mal durchkämpfen und hoffe, dass es meine Fähigkeiten nicht übersteigt ;)

Doi, ich bin begeistert!

Falls es noch jemanden interessiert, ich habe dies nun für das Modul srhinow/simple-map-bundle so umgesetzt:

• Cookie-Typ Hinweis wie vorgeschlagen (in meinem Fall ID 9)
• Template ce_sm_map-view.html5 umgeändert in:

PHP-Code:

---

<script>
        
        document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(9, loadmap, {
        selector: '#<?=$this->mapId;?>',
        message: 'To display this map blahblah...',
        button: {                       
            show: true,
            text: 'Click here'
        }
    });
});

            function loadmap(){
                var latitude = ... etc....

---

GELÖST!
Doi hat mir via PN geholfen. Vielen Dank noch einmal.

Da mir, bei gelösten Problemen, immer Zusammenfassungen helfen, zeige ich hier noch mal auf wie es funktioniert:

Aufgabe: Für ein eigenes Script soll ein Cookie gesetzt werden. Das Script soll erst geladen werden wenn das Cookie akzeptiert wird.
Vorraussetzung: Das Cookiebar-Modul muss im Prinzip laufen (Wichtig: falls vom Seitenlayout nicht das Seitentemplate fe_page verwendet wird, muss das in config/config.yml registriert werden.)

Eine mögliche Lösung:
Unter Cookiebar -> Cookiebar-Gruppen ... bearbeiten -> Cookies der Gruppe ID bearbeiten, lege ich ein neues Cookie vom Typ "Benutzerdefiniertes Script" an. Es ist wichtig, diesen Typ zu wählen, auch wenn ich dort in den Script-Feldern, wie in diesem Fall, nichts eintragen möchte. (Veröffentlichen nicht vergessen :)). Dieses eben angelegte Cookie bekommt von Contao eine ID (wird beim Bearbeiten angezeigt, oder wenn ich in der Liste auf das i-Icon hover). Diese ID merken.

Dann lege ich in einem Verzeichnis meiner Wahl eine JS Script Datei an.

Erste Funktion:

Code:

---

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(die ID welche das Cookie von Contao erhalten hat, initializeLeaflet, {
        selector: '#map',
        message: 'Akzeptiere mich!',
        button: {
            show: true,
            text: 'Klick mich!'
        }
    });
});

---

Wenn ich das richtig verstanden habe, fragt diese Funktion ab ob das Cookie durch den User gesetzt wurde oder nicht. Mein Haupt-Fehler war der Teil in der Zeile 2 hinter

Code:

---

cookiebar.addModule(...falsche ID

---

Ich hatte gedacht hier den Cookie-Token verwenden zu müssen, den ich bei o.g. anlegen des Cookies eingetragen hatte. Tatsächlich muss hier schlicht die ID eingtragen werden, die wir uns vorhin gemerkt haben.

Innerhalb der Funktion befindet sich alles was ausgegeben werden soll, wenn das Cookie vom User noch nicht gesetzt ist. Was wirklich schick ist, da dieser dann nicht den Umweg über das Frontend-Modul der Cookiebar gehen muss um die Einstellung zu ändern.

Fehlt nur noch der Code der ausgeführt werden soll, wenn das Cookie gesetzt ist:

Code:

---

function initializeLeaflet(){

mein Code, z. B. zum Anzeigen einer Karte via Leaflet-Framework

}

---

Hinweis: Wer mit dem Leaflet-Snippet von oben experimentiert, es ist wichtig statt "Koordinaten" jeweils zwei echte kommagetrennte Koordinaten einzutragen, da sich sonst das PopUp von Cookiebar aufhängt.
Das Script im gewünschten Seitenlayout des Themes unter "Externe Javascripts" inkludieren. Fertig.

Vielen Dank für die Hilfe!
Ich hoffe ich kann mit dieser ausführlichen Zusammenfassung der Hilfestellung samt Lösung all jenen helfen, die ebenfalls nicht so die Master-Backendler sind wie ich. Alle anderen möchten mir meine niederschwelligen Auslassungen verzeihen. :D

Dank dieser Anleitung ist es mir nun auch gelungen, Contao Leaflet erfolgreich mit der Cookiebar zu nutzen.

Eine Frage hab ich noch:
Wenn ich auf einer Seite zwei Leaflet-Karten einbinde, habe ich zwei Selektoren: #map_1 und #map_2

Ich habe den Code nun so angepasst:

Code:

---

<script>
document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(4, initializeLeaflet, {
        selector: '#map_ce_1,#map_ce_2',
        message: '<div class="ccb-element-blocker"><h3>Externe Inhalte blockiert!</h3>...</div>',
        button: {
            show: true,
            text: 'Externe Inhalte nachladen',
            classes: 'button'
        }
    });
});
</script>

---

Nun wird aber nach Bestätigung nur eine Karte geladen und nicht zwei.
Was müsste ich hier noch anpassen?

Oder brauch ich zwei separate Funktionen?

Dankeschön.

Ich bin nicht so der Coder, und würde es in deinem Fall erst mal mit zwei Funktionen versuchen. Wenn das dann prinzipiell funktioniert, kannst Du ja immer noch versuchen das kompakter zu schreiben. Da ich aus der Grafik und Frontend komme, kann ich in JS leider nicht so viel Support leisten.

Zitat:

---

Zitat von landzone

Oder brauch ich zwei separate Funktionen?

---

Sofern beide Selektoren in deiner Funktion berücksichtigt werden, sollte es hier keine Probleme geben.
Wie genau sieht die Funktion "initializeLeaflet" denn aus?

Zitat:

---

Wie genau sieht die Funktion "initializeLeaflet" denn aus?

---

Ich habe die Funktion direkt das Template ce_leaflet_map.html integriert:

Code:

---

function initializeLeaflet(){
                L.contao.addMap('map_ce_1', function() {
var map, layers = {}, controls = {}, icons = {};
map = L.map("map_ce_1", {center: [...], zoom: 15, keyboardZoomOffset: 1, dynamicLoad: false});

layers.test = L.tileLayer.provider('OpenStreetMap.Mapnik', {});
layers.test.addTo(map);
layers.marker_test = L.contao.loadUrl("https://...", "geojson", {}, null, map);
layers.marker_test.addTo(map);


return { map: map, layers: layers, controls: controls, icons: icons };
}());
        }

---

Im Moment hab ich es so gelöst, dass ich tatsächlich 2 Funktionen und 2 getrennte Templates angelegt habe. Damit funktioniert es erstmal, vielleicht geht es aber noch einfacher?

Ach und die Karten werden jeweils durch ein eigenes Template ausgeliefert?
Ich denke, dann ist deine Vorgehensweise korrekt.

Du kannst also ruhig mehrere addModule-Aufrufe zu einer ID ausführen, die Cookiebar kann damit umgehen.

Hey,
ich versuche auch grad die Leaflet Karte mit dem Cookie banner zu sperren - bei mir läufts aber nicht.
Ich habe folgende J_Skript datei angelegt :

HTML-Code:

---

<script>
document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(4, initializeLeaflet, {
        selector: '#map_ce_45',
        message: '<div class="ccb-element-blocker"><h3>Externe Inhalte blockiert!</h3>...</div>',
        button: {
            show: true,
            text: 'Externe Inhalte nachladen',
            classes: 'button'
        }
    });
});
function initializeLeaflet(){
L.contao.addMap('map_ce_45',function(){var map,layers={},controls={},icons={};map=L.map("map_ce_45",{center:[47.678892399999995177495293319225311279296875,9.1552267589615414777881596819497644901275634765625],zoom:16,scrollWheelZoom:!1,keyboardZoomOffset:1,dynamicLoad:!1});layers.layer_1=L.tileLayer.provider('OpenStreetMap.BlackAndWhite',{});layers.layer_1.addTo(map);layers.layer_2=L.geoJson({"type":"FeatureCollection","features":[]},{boundsMode:"fit"});L.contao.loadUrl("http://gadesko-server.de/leaflet/api/layer/2?context=page&contextId=2","geojson",{},layers.layer_2,map);layers.layer_2.addTo(map);map.calculateFeatureBounds();return{map:map,layers:layers,controls:controls,icons:icons}}())
</script>

---

und dann hab ich natürlich vorher noch in der cookiebar ein neues Modul angelegt mit dem Typ - > Ben. Skript. Dort eigentlich nichts eingetragen ausser dem Namen. Die id ist bei mir auch die 4 wenn ich auf das info icon gehe!

Aber die karte wird nachdem ich im layout die J_Skript eingebunden habe weiterhin angezeigt!

Kann jemand mir helfen?
Danke und Gruss
Gassi

Zitat:

---

ich versuche auch grad die Leaflet Karte mit dem Cookie banner zu sperren - bei mir läufts aber nicht.

---

Ich habe die Funktion

Code:

---

initializeLeaflet()

---

direkt ins Template ce_leaflet_map.html5 eingetragen und führe dadrin das JS aus, damit sollte es funktionieren.

Code:

---

<script>
  function initializeLeaflet(){
    <?= $this->javascript ?>
}
</script>

---

Danke Landzone - jetzt hat es geklappt !!!