sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-22 06:22:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

autoload

Browse Source
This commit is contained in:
Zsolt Ero
2024-01-19 21:54:26 +01:00
parent f434c627bd
commit c800337fb3
3 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
website/assets/map_howto.js
View File

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

7
website/assets/style.css
View File

@@ -160,9 +160,14 @@ code {
width: 100%; width: 100%;
height: 500px; height: 500px;
margin-bottom: 2em; 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-image: url('mapbg.jpg');
background-size: cover; background-size: cover;
background-position: center; background-position: center;

4
website/blocks/map_howto.html
View File

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