How can I implement OpenStreetMap with Leafletjs and the Usercentrics CMP?

This article uses the following implementation of Leaflet to show compatibility with Usercentrics.

1. Insert Leaflet CSS <link> tag:

<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. Insert leaflet <script> tag including the onload function trigger:

<!-- 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. Include all following <script> tags that affect OpenStreetMap
with type="text</plain" data-usercentrics="OpenStreetMap" and ensure you wrap them into the same function as on the previous script, for example:

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

Do you need further help?

How can I get help with technical questions?