OpenStreetMap mit Cookie-Abfrage

Noch ein Satz vorab: Cookies können wir nicht auf dem lokalen Rechner testen, denn sie erfordern eine sichere Verbindung – sprich https.

Cookie-Zustimmung erforderlich

Diese Seite braucht Ihre Zustimmung, um Ihre Position auf der Karte anzuzeigen. Die Anzeige der Karte sendet Daten an OpenStreetMap: Ihre IP-Adresse sowie Ihre Positionsdaten.

Bevor die Karte angezeigt wird, muss der Benutzer Cookies zustimmen und zusätzlich die Nutzung der Geodaten erlauben. Beim ersten Laden bleibt die Karte leer.

<div id="myLeafletMap"></div>

<div class="map-wrapper">
   <div id="allowLeafMap">
      <div id="close">✕</div>
      <div class="column">
         <p class="header">Cookie-Zustimmung erforderlich</p>
         <p>Diese Seite braucht Ihre Zustimmung, um Ihre Position auf der Karte anzuzeigen.
            Die Anzeige der Karte sendet Daten an OpenStreetMap: Ihre IP-Adresse sowie Ihre Positionsdaten.</p>
         <div class="accept">
             <div class="accept">
               <label><input type="radio" name="allowGeoCookie" id="allowGeoCookie"> Akzeptieren</label>
               <label><input type="radio" name="allowGeoCookie" id="refuseGeoCookie"> Ablehnen</label>
            </div>
         </div>
      </div>
   </div>
</div>

Vor dem Laden der LeafletMap muss also abgeklärt werden, ob Cookies bereits erlaubt wurden.

const close = document.querySelector("#close");
close.addEventListener("click", function() {
   document.querySelector(".map-wrapper").style = "display: none";
});

const refuseGeoCookie = document.querySelector("#refuseGeoCookie");
refuseGeoCookie.addEventListener("click", function() {
   document.querySelector(".map-wrapper").style = "display: none";
});

const allowGeoCookie = document.querySelector("#allowGeoCookie");
allowGeoCookie.addEventListener("click", function() {
   document.cookie = "allowGeoCookie=allow; max-age=900;";
   document.querySelector(".map-wrapper").style = "display: none";
   loadLeaflet();
});

function getCookieValue(a) {
   console.log ("frag mal nach " + a)
   const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
  return b ? b.pop() : '';
}

if (getCookieValue("allowGeoCookie")) {
   document.querySelector(".map-wrapper").style = "display: none";
   loadLeaflet();
}

Jetzt erst dürfen das leaflet-Skript, die OpenStreetMap-Karte und die CSS-Datei geladen werden. Die Funktion loadLeaflet() erzeugt das Link-Element für die CSS-Datei und das script-Element für die Skript-Datei und ruft loadMap() mit der Skript-Datei auf.

function loadLeaflet() {
   const leafletCss = document.createElement("link");
   leafletCss.setAttribute("rel", "stylesheet");
   leafletCss.setAttribute("href", "leaflet.css");

   const script = document.createElement("script");
   script.src = "leaflet.js";

   document.querySelector("head").append(leafletCss);
   document.querySelector("head").append(script);

   loadMap(script);
}

function loadMap(script) {
   script.addEventListener("load", function() {
      console.log ("Script loaded");
      const myMap = L.map('myLeafletMap').setView([0, 0], 0);

      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: `© 
            <a href="https://www.openstreetmap.org/copyright">
              OpenStreetMap contributors` 
      }).addTo(myMap);

      const myMarker = L.marker ([0,0]).addTo(myMap);

      function locate(position) {
         const lat = position.coords.latitude;
         const lng = position.coords.longitude;
         myMarker.setLatLng([lat, lng]).update();
         myMap.setView([lat, lng], 10);
      }
      navigator.geolocation.getCurrentPosition(locate);
   });
}