diff --git a/website/assets/map_howto.js b/website/assets/map_howto.js index fe3ba00..01b12c1 100644 --- a/website/assets/map_howto.js +++ b/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) diff --git a/website/assets/style.css b/website/assets/style.css index 306e3a9..de2d548 100644 --- a/website/assets/style.css +++ b/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; diff --git a/website/blocks/map_howto.html b/website/blocks/map_howto.html index e19582f..5fc244b 100644 --- a/website/blocks/map_howto.html +++ b/website/blocks/map_howto.html @@ -1,4 +1,6 @@ -
+Choose a style: