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); }); }