mapbg

website/assets/map_howto.js

@@ -1,22 +1,30 @@
-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: 'map',
-  boxZoom: false,
-  doubleClickZoom: false,
-  scrollZoom: false,
-})
+function initMap(div) {
+  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,
+    // boxZoom: false,
+    // doubleClickZoom: false,
+    // scrollZoom: false,
+  })
+  window.map = map
 
-let nav = new maplibregl.NavigationControl({ showCompass: false })
-map.addControl(nav, 'top-right')
+  let nav = new maplibregl.NavigationControl({ showCompass: false })
+  map.addControl(nav, 'top-right')
 
-let scale = new maplibregl.ScaleControl()
-map.addControl(scale)
+  let scale = new maplibregl.ScaleControl()
+  map.addControl(scale)
 
-new maplibregl.Marker().setLngLat([-0.119, 51.507]).addTo(map)
+  new maplibregl.Marker().setLngLat([-0.119, 51.507]).addTo(map)
+}
+
+const mapDiv = document.getElementById('map')
+mapDiv.onclick = function () {
+  initMap(mapDiv)
+}
 
 function selectStyle(style) {
   const styleUrl = 'https://tiles.openfreemap.org/styles/' + style

website/assets/style.css

@@ -162,6 +162,14 @@ code {
   margin-bottom: 2em;
 }
 
+#map:not(.maplibregl-map) {
+  background-image: url('mapbg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
 button {
   border: 0;
   border-radius: 0.25rem;