From e1dae97a851ecfd1a604fbaec06e856144f0729b Mon Sep 17 00:00:00 2001 From: Jakob Miksch Date: Sat, 21 Feb 2026 17:54:18 +0100 Subject: [PATCH 1/5] Make CSS layout "absolut" for proper display on mobile --- public/index.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/public/index.css b/public/index.css index 8ef4dee..94c3fed 100644 --- a/public/index.css +++ b/public/index.css @@ -37,6 +37,7 @@ --color-basemap-tile: darkgray; --menu-radius: 3px; --menu-padding: 4px 12px; + --header-height: 54px; } body { @@ -47,8 +48,11 @@ body { font-family: "Sarabun", sans-serif; } -main { - flex: 1; +#map { + position: absolute; + top: var(--header-height); + bottom: 0; + width: 100%; } a { @@ -60,7 +64,16 @@ a { display: flex; align-items: center; border-bottom: 1px solid var(--color-border); - position: relative; + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 100; + height: var(--header-height); +} + +/* direct children of header */ +.header > * { padding: 5px 10px; } From eb1c2f17f51bbbc6e541be7b9c7f527ac04c7a73 Mon Sep 17 00:00:00 2001 From: Jakob Miksch Date: Fri, 15 May 2026 17:21:28 +0200 Subject: [PATCH 2/5] Basic fix --- public/index.js | 158 +++++++++++++++++++++++++++--------------------- 1 file changed, 89 insertions(+), 69 deletions(-) diff --git a/public/index.js b/public/index.js index 294c3cf..5f7c588 100644 --- a/public/index.js +++ b/public/index.js @@ -8,84 +8,96 @@ import { } from "./lib/internal/mapUtils.js"; import { createSearchControl } from "./lib/internal/search.js"; -const basemapConfig = { - de: { - displayName: "deutscher Stil", - tiles: ["https://tile.openstreetmap.de/{z}/{x}/{y}.png"], - attribution: "Kartendaten © OpenStreetMap Mitwirkende", - thumbnail: "osmde.png", - }, - standard: { - displayName: "Standard", - tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], - attribution: "Kartendaten © OpenStreetMap Mitwirkende", - thumbnail: "osmorg.png", - }, - oepnv: { - displayName: "ÖPNV", - tiles: [ - "https://tile.geofabrik.de/25ab8b065d8149bd90c1876384259ebf/{z}/{x}/{y}.png", - ], - attribution: - "ÖPNV Kartenstil von memomaps.de CC-BY-SA, Kartendaten © OpenStreetMap Mitwirkende", - thumbnail: "oepnv.png", - }, -}; +const setupMap = () => { + const basemapConfig = { + de: { + displayName: "deutscher Stil", + tiles: ["https://tile.openstreetmap.de/{z}/{x}/{y}.png"], + attribution: "Kartendaten © OpenStreetMap Mitwirkende", + thumbnail: "osmde.png", + }, + standard: { + displayName: "Standard", + tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], + attribution: "Kartendaten © OpenStreetMap Mitwirkende", + thumbnail: "osmorg.png", + }, + oepnv: { + displayName: "ÖPNV", + tiles: [ + "https://tile.geofabrik.de/25ab8b065d8149bd90c1876384259ebf/{z}/{x}/{y}.png", + ], + attribution: + "ÖPNV Kartenstil von memomaps.de CC-BY-SA, Kartendaten © OpenStreetMap Mitwirkende", + thumbnail: "oepnv.png", + }, + }; -const map = new maplibregl.Map({ - container: "map", - hash: "map", - maplibreLogo: false, - dragRotate: false, - center: [11, 51.5], // center Germany - zoom: 5, - // prevent users changing pitch with keyboard shortcuts - maxPitch: 0, - attributionControl: true, - maxZoom: 19, - locale: { - "AttributionControl.ToggleAttribution": "Quellenangabe ein-/ausblenden", - "GeolocateControl.FindMyLocation": "Meinen Standort finden", - "GeolocateControl.LocationNotAvailable": "Standort nicht verfügbar", - "NavigationControl.ZoomIn": "Hineinzoomen", - "NavigationControl.ZoomOut": "Herauszoomen", - }, -}); - -// on desktop: prevent keyboard rotating using "shift" + arrow keys -map.keyboard.disableRotation(); - -// on mobile: prevent rotation and pitch, but leave zoom -map.touchZoomRotate.disableRotation(); -map.touchPitch.disable(); - -// set basemaps -Object.entries(basemapConfig).forEach(([id, config]) => { - const { tiles, attribution } = config; - map.addSource(id, { - type: "raster", - tileSize: 256, - attribution, - tiles, + const map = new maplibregl.Map({ + container: "map", + hash: "map", + maplibreLogo: false, + dragRotate: false, + center: [11, 51.5], // center Germany + zoom: 5, + // prevent users changing pitch with keyboard shortcuts + maxPitch: 0, + attributionControl: true, + maxZoom: 19, + locale: { + "AttributionControl.ToggleAttribution": "Quellenangabe ein-/ausblenden", + "GeolocateControl.FindMyLocation": "Meinen Standort finden", + "GeolocateControl.LocationNotAvailable": "Standort nicht verfügbar", + "NavigationControl.ZoomIn": "Hineinzoomen", + "NavigationControl.ZoomOut": "Herauszoomen", + }, + }); + + // on desktop: prevent keyboard rotating using "shift" + arrow keys + map.keyboard.disableRotation(); + + // on mobile: prevent rotation and pitch, but leave zoom + map.touchZoomRotate.disableRotation(); + map.touchPitch.disable(); + + // set basemaps + Object.entries(basemapConfig).forEach(([id, config]) => { + const { tiles, attribution } = config; + map.addSource(id, { + type: "raster", + tileSize: 256, + attribution, + tiles, + }); + map.addLayer({ id, source: id, type: "raster" }); }); - map.addLayer({ id, source: id, type: "raster" }); -}); -map.addControl(createSearchControl(maplibregl)); + map.addControl(createSearchControl(maplibregl)); -map.addControl(new maplibregl.NavigationControl({ showCompass: false })); + map.addControl(new maplibregl.NavigationControl({ showCompass: false })); -map.addControl(new maplibregl.ScaleControl(), "bottom-right"); + map.addControl(new maplibregl.ScaleControl(), "bottom-right"); -map.addControl(new maplibregl.GeolocateControl()); + map.addControl(new maplibregl.GeolocateControl()); -map.addControl(new maplibregl.GlobeControl(), "top-right"); + map.addControl(new maplibregl.GlobeControl(), "top-right"); -setGlobePermalinkUpdate(map); + setGlobePermalinkUpdate(map); -setupLinkUpdate(map); -const basemapSwitcher = new BasemapSwitcher(basemapConfig); -map.addControl(basemapSwitcher); + setupLinkUpdate(map); + const basemapSwitcher = new BasemapSwitcher(basemapConfig); + map.addControl(basemapSwitcher); +}; + +/** + * Checks if browser supports WebGL + * Inspired by: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL + */ +function isWebGlActivated() { + const canvas = document.createElement("canvas"); + const gl = canvas.getContext("webgl"); + return gl instanceof WebGLRenderingContext; +} /** * Make menu of website interactive @@ -151,3 +163,11 @@ const setupMenu = () => { // setup menu after page is loaded document.addEventListener("DOMContentLoaded", setupMenu); + +if (isWebGlActivated()) { + setupMap(); +} else { + const mapContainer = document.getElementById("map"); + mapContainer.textContent = + "Zur Anzeige dieser Karte muss Ihr Browser WebGL unterstützen."; +} From bdc779ccd39593ce009f6fbfcd9b69227222d9dd Mon Sep 17 00:00:00 2001 From: Jakob Miksch Date: Fri, 15 May 2026 17:36:35 +0200 Subject: [PATCH 3/5] Show warning if WebGL not available --- public/index.html | 10 +++++++++- public/index.js | 6 +++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index 7f1d00e..d911331 100644 --- a/public/index.html +++ b/public/index.html @@ -139,6 +139,14 @@ -
+
+ + +
diff --git a/public/index.js b/public/index.js index 5f7c588..64efeb6 100644 --- a/public/index.js +++ b/public/index.js @@ -167,7 +167,7 @@ document.addEventListener("DOMContentLoaded", setupMenu); if (isWebGlActivated()) { setupMap(); } else { - const mapContainer = document.getElementById("map"); - mapContainer.textContent = - "Zur Anzeige dieser Karte muss Ihr Browser WebGL unterstützen."; + // show warning that WebGL is not available + const warningNoWebGL = document.getElementById("warning-no-webgl"); + warningNoWebGL.style.display = "flex"; } From 4c1b9ab5fa1f98572149e99bf8553d78d5cab142 Mon Sep 17 00:00:00 2001 From: Jakob Miksch Date: Fri, 15 May 2026 17:39:34 +0200 Subject: [PATCH 4/5] Add padding --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index d911331..5c2dee5 100644 --- a/public/index.html +++ b/public/index.html @@ -143,7 +143,7 @@ From 8228b2f33d8b99d2cb7ca8fdcc9ec7fd729e31e2 Mon Sep 17 00:00:00 2001 From: Jakob Miksch Date: Sat, 16 May 2026 14:18:48 +0200 Subject: [PATCH 5/5] shorten function isWebGlActivated --- public/index.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/public/index.js b/public/index.js index 64efeb6..73b6d2f 100644 --- a/public/index.js +++ b/public/index.js @@ -89,15 +89,9 @@ const setupMap = () => { map.addControl(basemapSwitcher); }; -/** - * Checks if browser supports WebGL - * Inspired by: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL - */ -function isWebGlActivated() { - const canvas = document.createElement("canvas"); - const gl = canvas.getContext("webgl"); - return gl instanceof WebGLRenderingContext; -} +const isWebGlActivated = () => + document.createElement("canvas").getContext("webgl") instanceof + WebGLRenderingContext; /** * Make menu of website interactive