autoload

website/assets/map_howto.js

@@ -14,6 +14,10 @@ function initMap() {
   })
   window.map = map
 
+  map.once('idle', () => {
+    document.getElementById('mapbg-image').remove()
+  })
+
   let nav = new maplibregl.NavigationControl({ showCompass: false })
   map.addControl(nav, 'top-right')
 
@@ -24,12 +28,14 @@ function initMap() {
 }
 
 const mapDiv = document.getElementById('map-container')
-mapDiv.onclick = function () {
-  initMap()
-}
+// mapDiv.onclick = function () {
+//   initMap()
+// }
+
+initMap()
 
 function selectStyle(style) {
-  initMap()
+  // initMap()
 
   const styleUrl = 'https://tiles.openfreemap.org/styles/' + style
   map.setStyle(styleUrl)

website/assets/style.css

@@ -160,9 +160,14 @@ code {
   width: 100%;
   height: 500px;
   margin-bottom: 2em;
+  position: relative;
 }
 
-#map-container:not(.maplibregl-map) {
+#mapbg-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
   background-image: url('mapbg.jpg');
   background-size: cover;
   background-position: center;

website/blocks/map_howto.html

@@ -1,4 +1,6 @@
-<div id="map-container"></div>
+<div id="map-container">
+  <div id="mapbg-image"></div>
+</div>
 
 <p>Choose a style:</p>
 <div class="button-container">