I’m using Leaflet.js inside an HTMX component (it’s only loaded after the view is switched to ‘map’) so I need to delay the loading of the map. Without this, the map doesn’t load at all.

The problem with that is the size is all out and looks like the image below. I’ve tried to fix that with invalidateSize() but struggling to get it to work.

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
  var map;
  setTimeout(function() {
    map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  }, 10);

  setTimeout(function () {
    map.invalidateSize();
  }, 500);
</script>
<div id="map"></div>

I’m setting the height of #map correctly in my CSS, I’m confident that’s not the problem.