Fix: Karte — position:absolute;inset:0 statt height:100% (kein parent-height Problem)
This commit is contained in:
parent
d4c3f159d5
commit
2ff439a4e3
3 changed files with 17 additions and 18 deletions
|
|
@ -1565,9 +1565,9 @@ textarea.form-control {
|
||||||
ZENTRALE KARTE (map.js)
|
ZENTRALE KARTE (map.js)
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.map-full-layout {
|
.map-full-layout {
|
||||||
position: relative;
|
position: absolute;
|
||||||
height: 100%;
|
inset: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.map-full {
|
.map-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,16 @@ window.Page_map = (() => {
|
||||||
async function init(container, appState) {
|
async function init(container, appState) {
|
||||||
_container = container;
|
_container = container;
|
||||||
_appState = appState;
|
_appState = appState;
|
||||||
|
|
||||||
|
// Map-Container braucht position:relative + kein Padding,
|
||||||
|
// damit .map-full-layout mit position:absolute;inset:0 korrekt füllt.
|
||||||
|
Object.assign(_container.style, {
|
||||||
|
padding: '0',
|
||||||
|
overflow: 'hidden',
|
||||||
|
position: 'relative',
|
||||||
|
gap: '0',
|
||||||
|
});
|
||||||
|
|
||||||
_render();
|
_render();
|
||||||
try { _userPos = await API.getLocation(); } catch {}
|
try { _userPos = await API.getLocation(); } catch {}
|
||||||
await _loadLeaflet();
|
await _loadLeaflet();
|
||||||
|
|
@ -129,19 +139,6 @@ window.Page_map = (() => {
|
||||||
const el = document.getElementById('central-map');
|
const el = document.getElementById('central-map');
|
||||||
if (!el || !window.L || _map) return;
|
if (!el || !window.L || _map) return;
|
||||||
|
|
||||||
// Explizite Pixel-Höhe setzen, damit Leaflet Kacheln lädt.
|
|
||||||
// height:100% auf einem flex:1-Child ohne feste Parent-Höhe = 0px.
|
|
||||||
const layout = el.closest('.map-full-layout');
|
|
||||||
if (layout) {
|
|
||||||
const top = layout.getBoundingClientRect().top;
|
|
||||||
layout.style.height = (window.innerHeight - top) + 'px';
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
const t = layout.getBoundingClientRect().top;
|
|
||||||
layout.style.height = (window.innerHeight - t) + 'px';
|
|
||||||
_map?.invalidateSize();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
|
const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
|
||||||
const zoom = _userPos ? 13 : 6;
|
const zoom = _userPos ? 13 : 6;
|
||||||
|
|
||||||
|
|
@ -151,7 +148,9 @@ window.Page_map = (() => {
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
||||||
.addTo(_map);
|
.addTo(_map);
|
||||||
|
|
||||||
setTimeout(() => _map.invalidateSize(), 100);
|
// invalidateSize nach kurzer Verzögerung, damit der Browser das Layout abgeschlossen hat
|
||||||
|
setTimeout(() => _map.invalidateSize(), 150);
|
||||||
|
window.addEventListener('resize', () => _map.invalidateSize());
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
Offline-Cache + Push Notifications
|
Offline-Cache + Push Notifications
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
const CACHE_VERSION = 'by-v25';
|
const CACHE_VERSION = 'by-v26';
|
||||||
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
||||||
|
|
||||||
// Diese Dateien werden beim Install gecacht (App Shell)
|
// Diese Dateien werden beim Install gecacht (App Shell)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue