JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>

<div id="customTiles" style="width: 100%; height: 400px; margin-bottom: 2em;"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var customTiles = L.map('customTiles', {
            scrollWheelZoom: false
        }).setView([40.1, 0.1], 5);

        L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            maxZoom: 17,
            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        }).addTo(customTiles);
    });

</script>