Wie kann ich OpenStreetMap mit Leafletjs und der Usercentrics CMP implementieren?

Dieser Artikel nutzt folgende Implementierung von Leaflet, um die Kompatibilität mit Usercentrics darzustellen.

1. Füge den Leaflet CSS <link> tag ein:

<script type="text/plain" data-usercentrics="OpenStreetMap">
    <!-- Stylesheet that you need to recreate -->
    // <styles rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    // integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    // crossorigin="">

    const leafletStyles = document.createElement('link');
    leafletStyles.rel = 'stylesheet';
    leafletStyles.href = 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css';
    leafletStyles.integrity = 'sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==';
    leafletStyles.crossOrigin = '';
    document.head.appendChild(leafletStyles);
</script>

2. Füge den Leaflet <script> tag mit dem onload function trigger ein:

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script type="text/plain" data-usercentrics="OpenStreetMap" onload="loadMap();" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>

3. Füge die folgenden <script> tags die zu OpenStreetMap gehören
mit type="text</plain" data-usercentrics="OpenStreetMap" ein und stelle sicher, sie derselben Funktion hinzuzufügen wie im vorherigen Skript, zum Beispiel:

<script type="text/plain" data-usercentrics="OpenStreetMap">
function loadMap() {
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);
  
  //.........
  //here go all the points of interest and the rest of the script
  //.........
  
};
</script>