Contao-Camp 2024
Ergebnis 1 bis 17 von 17

Thema: oveleon/contao-cookiebar und openstreetmaps

  1. #1
    Contao-Nutzer
    Registriert seit
    31.05.2010.
    Ort
    Österreich
    Beiträge
    98

    Standard 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)?

  2. #2
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

  3. #3
    Contao-Nutzer Avatar von Spelmann
    Registriert seit
    24.11.2012.
    Ort
    Nördlich von Berlin
    Beiträge
    234

    Standard

    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?

  4. #4
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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:
    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
    Geändert von Doi (26.10.2020 um 15:10 Uhr)

  5. #5
    Contao-Nutzer Avatar von Spelmann
    Registriert seit
    24.11.2012.
    Ort
    Nördlich von Berlin
    Beiträge
    234

    Standard

    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!

  6. #6
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

    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
    Geändert von Doi (27.10.2020 um 12:07 Uhr)

  7. #7
    Contao-Nutzer
    Registriert seit
    31.05.2010.
    Ort
    Österreich
    Beiträge
    98

    Standard

    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

  8. #8
    Contao-Nutzer
    Registriert seit
    31.05.2010.
    Ort
    Österreich
    Beiträge
    98

    Standard

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

  9. #9
    Contao-Nutzer Avatar von Spelmann
    Registriert seit
    24.11.2012.
    Ort
    Nördlich von Berlin
    Beiträge
    234

    Beitrag

    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.
    Geändert von Spelmann (27.10.2020 um 15:40 Uhr)

  10. #10
    Contao-Nutzer
    Registriert seit
    12.03.2012.
    Ort
    Dresden
    Beiträge
    211

    Standard

    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.

  11. #11
    Contao-Nutzer Avatar von Spelmann
    Registriert seit
    24.11.2012.
    Ort
    Nördlich von Berlin
    Beiträge
    234

    Standard

    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.

  12. #12
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von landzone Beitrag anzeigen
    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?

  13. #13
    Contao-Nutzer
    Registriert seit
    12.03.2012.
    Ort
    Dresden
    Beiträge
    211

    Standard

    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?

  14. #14
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  15. #15
    Contao-Fan Avatar von Gassi
    Registriert seit
    18.11.2009.
    Ort
    Konstanz
    Beiträge
    423

    Standard

    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

  16. #16
    Contao-Nutzer
    Registriert seit
    12.03.2012.
    Ort
    Dresden
    Beiträge
    211

    Standard

    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>

  17. #17
    Contao-Fan Avatar von Gassi
    Registriert seit
    18.11.2009.
    Ort
    Konstanz
    Beiträge
    423

    Standard

    Danke Landzone - jetzt hat es geklappt !!!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •