map fix

website/assets/map_howto.js

@@ -1,11 +1,13 @@
-function initMap(div) {
+function initMap() {
+  if (window.map) return
+
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/liberty',
     center: [-0.114, 51.506],
     zoom: 14.2,
     bearing: 55.2,
     pitch: 60,
-    container: div,
+    container: mapDiv,
     // boxZoom: false,
     // doubleClickZoom: false,
     // scrollZoom: false,
@@ -21,12 +23,14 @@ function initMap(div) {
   new maplibregl.Marker().setLngLat([-0.119, 51.507]).addTo(map)
 }
 
-const mapDiv = document.getElementById('map')
+const mapDiv = document.getElementById('map-container')
 mapDiv.onclick = function () {
-  initMap(mapDiv)
+  initMap()
 }
 
 function selectStyle(style) {
+  initMap()
+
   const styleUrl = 'https://tiles.openfreemap.org/styles/' + style
   map.setStyle(styleUrl)
   map.setPitch(0)

website/assets/style.css

@@ -156,13 +156,13 @@ code {
   white-space: nowrap;
 }
 
-#map {
+#map-container {
   width: 100%;
   height: 500px;
   margin-bottom: 2em;
 }
 
-#map:not(.maplibregl-map) {
+#map-container:not(.maplibregl-map) {
   background-image: url('mapbg.jpg');
   background-size: cover;
   background-position: center;

website/blocks/map_howto.html

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