I would like to include a dynamic (leaflet-) map on my homepage. Before the map is shown and background data is loaded from external sources (e.g. OpenStreetMap), the users should explicitly agree to sending their meta data (IP, BrowserType etc.) to that external web pages.
The JavaScript library iframemanger allows something similar if the content to show is completly provided by an external url, e.g.
https://orestbida.com/demo-projects/iframemanager/demo1/
However, instead of specifying a service url, I would like to define the deferred content on the same page. I need to somehow define, how my map should look like and what layers it should contain. It would also be great, if that content could interact with the rest of the page, for example react to changes of user selections. That does not work with iframemanager.
If I would use iframemanger and put the content on an extra page, I would again have the problem, that that extra page is not in compliance with GDPR.
=> Is there an alternative to iframemanager, where the content is defined on the same page?
=> If not, could you get me started to implement an own solution for it?
The solution should support:
- Three Options
a) "Accept",
b) "Accept and remember decision"
c) "Undo of remember decision" (e.g. by extra check box below content or by deleting cookies of page) - Preview via custom specified image file
Related:
a) I could find some GDPR JavaScript libraries, but they seem to serve a different purpose:
https://github.com/wimagguc/jquery-eu-cookie-law-popup
https://github.com/zoxxx/GDPR-cookie-consent
https://github.com/osano/cookieconsent/
https://www.npmjs.com/package/react-gdpr-consent
b) A different strategy would be, to use my server as a proxy to load external data. However, I would prefer a purely client based solution, that does not need an extra server component.
https://github.com/heiseonline/embetty
c) Related questions:
leaflet.js gdpr compliant integration
How do you disable <script> elements using JavaScript
Edit
Here is some first draft (without remember option cookie). It shows a preview image "preview.png" with a button and loads a script "deferred_action.js" after a user clicks on the button "Load map!".
<div
id="disclaimer-container"
style="position:relative;"
>
<img
src="preview.png"
style="width:800px"
></img>
<button
class="accept-button"
onclick="loadScript('deferred_action.js')"
style="position: absolute;left:400px; top:200px"
>
Load map!
</button>
</div>
<script>
function loadScript(script_path){
var script = document.createElement('script');
script.src = script_path;
script.onload = () => {
var disclaimerContainer = document.getElementById('disclaimer-container');
disclaimerContainer.style.display = 'none';
};
document.body.appendChild(script);
}
</script>
