Familienfreundliche Ausflugsziele auf der Karte
Klicke auf die Karte, um den Standort auszuwählen. diff --git a/js/main.js b/js/main.js index e6c2533..a984aca 100644 --- a/js/main.js +++ b/js/main.js @@ -47,6 +47,57 @@ closeBtn.addEventListener('click', hideStatus); } + // Aktionen-Menü im Header (Hamburger): fasst die frueher direkt auf der + // Karte liegenden Buttons zusammen, damit sie nicht mehr mit dem + // Leaflet-Zoom-Regler kollidieren und auf dem Smartphone nicht die + // Karte zupflastern. + function setupMenuToggle() { + const toggleBtn = document.getElementById('menu-toggle-btn'); + const menu = document.getElementById('app-menu'); + if (!toggleBtn || !menu) return; + + function closeMenu() { + menu.hidden = true; + toggleBtn.setAttribute('aria-expanded', 'false'); + } + + function openMenu() { + menu.hidden = false; + toggleBtn.setAttribute('aria-expanded', 'true'); + } + + toggleBtn.addEventListener('click', () => { + if (menu.hidden) { + openMenu(); + } else { + closeMenu(); + } + }); + + // Menü nach Klick auf eine der enthaltenen Aktionen automatisch + // schließen (die jeweilige Aktion selbst wurde durch den eigenen + // Klick-Handler des Buttons bereits vorher ausgelöst, da Events erst + // beim Ziel-Element und danach erst am umschließenden ankommen). + menu.addEventListener('click', (event) => { + if (event.target.closest('button')) { + closeMenu(); + } + }); + + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && !menu.hidden) { + closeMenu(); + toggleBtn.focus(); + } + }); + + document.addEventListener('click', (event) => { + if (menu.hidden) return; + if (menu.contains(event.target) || toggleBtn.contains(event.target)) return; + closeMenu(); + }); + } + function setupGeolocationButton() { const button = document.getElementById('locate-btn'); if (!button) return; @@ -183,6 +234,7 @@ } setupStatusClose(); + setupMenuToggle(); bootstrap().catch((err) => { console.error('EventMap: Initialisierung fehlgeschlagen.', err); diff --git a/js/map/mapController.js b/js/map/mapController.js index 3ab1455..6da6107 100644 --- a/js/map/mapController.js +++ b/js/map/mapController.js @@ -165,7 +165,12 @@ map = L.map(containerId, { center: [DEFAULT_MAP_CENTER.lat, DEFAULT_MAP_CENTER.lng], zoom: DEFAULT_MAP_CENTER.zoom, + // Zoom-Regler bewusst oben rechts statt Leaflets Standard oben links, + // damit links oben durchgängig Platz für eigene Overlays (z.B. + // map-picking-hint) bleibt, ohne dass sich beides überschneidet. + zoomControl: false, }); + L.control.zoom({ position: 'topright' }).addTo(map); // tile.openstreetmap.org verlangt seit 2024 einen gültigen HTTP-Referer // (Tile Usage Policy). Seiten, die per file:// geöffnet werden, senden