@@ -289,7 +331,19 @@ window.Page_map = (() => {
_saveVisible();
});
+ // Speed Dial
+ const _sdEl = document.getElementById('map-speed-dial');
+ document.getElementById('map-sd-trigger')?.addEventListener('click', e => {
+ e.stopPropagation();
+ _sdEl?.classList.toggle('open');
+ });
+ // Klick auf Karte / außerhalb schließt Speed Dial
+ document.getElementById('central-map')?.addEventListener('pointerdown', () => {
+ _sdEl?.classList.remove('open');
+ });
+
document.getElementById('map-locate-btn').addEventListener('click', () => {
+ _sdEl?.classList.remove('open');
if (_userPos) {
_map?.setView([_userPos.lat, _userPos.lon], 16);
} else {
@@ -297,9 +351,54 @@ window.Page_map = (() => {
}
});
- document.getElementById('map-pin-btn').addEventListener('click', _togglePlacementMode);
- document.getElementById('map-radar-btn')?.addEventListener('click', _toggleRadar);
- document.getElementById('map-temp-btn')?.addEventListener('click', _toggleTemp);
+ document.getElementById('map-pin-btn').addEventListener('click', () => {
+ _sdEl?.classList.remove('open');
+ _togglePlacementMode();
+ });
+ document.getElementById('map-radar-btn')?.addEventListener('click', () => {
+ _sdEl?.classList.remove('open');
+ _toggleRadar();
+ });
+ document.getElementById('map-temp-btn')?.addEventListener('click', () => {
+ _sdEl?.classList.remove('open');
+ _toggleTemp();
+ });
+
+ // Suche — FAB öffnet Panel
+ document.getElementById('map-search-btn')?.addEventListener('click', () => {
+ document.getElementById('map-speed-dial')?.classList.remove('open');
+ const wrap = document.getElementById('map-search-wrap');
+ const isOpen = wrap?.classList.contains('active');
+ if (isOpen) {
+ _clearSearch();
+ } else {
+ wrap?.classList.add('active');
+ setTimeout(() => document.getElementById('map-search-input')?.focus(), 60);
+ document.getElementById('map-search-btn')?.classList.add('active');
+ }
+ });
+
+ const searchInput = document.getElementById('map-search-input');
+ const searchResults = document.getElementById('map-search-results');
+
+ searchInput?.addEventListener('input', () => {
+ const q = searchInput.value.trim();
+ clearTimeout(_searchTimer);
+ if (q.length < 2) { searchResults.style.display = 'none'; return; }
+ _searchTimer = setTimeout(() => _runSearch(q), 400);
+ });
+
+ searchInput?.addEventListener('keydown', e => {
+ if (e.key === 'Escape') _clearSearch();
+ });
+
+ document.getElementById('map-search-clear')?.addEventListener('click', _clearSearch);
+
+ // Klick auf Karte schließt Ergebnisse (aber behält Marker)
+ document.getElementById('central-map')?.addEventListener('pointerdown', () => {
+ searchResults.style.display = 'none';
+ searchInput?.blur();
+ });
}
// ----------------------------------------------------------
@@ -907,7 +1006,7 @@ window.Page_map = (() => {
const params = new URLSearchParams({ type: osmType, ...bbox });
try {
const pois = await fetch(`/api/osm/pois?${params}`).then(r => r.json());
- const osmCount = _layers[layerKey].filter(m => !m._ownPlace).length;
+ const osmCount = (_layers[layerKey] || []).filter(m => !m._ownPlace).length;
if (pois.length !== osmCount) _replaceOsmMarkers(layerKey, pois);
_done++;
const pct = Math.round(20 + _done / _total * 80);
@@ -919,11 +1018,14 @@ window.Page_map = (() => {
const pct = Math.round(20 + _done / _total * 80);
const total = Object.values(_layers).flat().filter(m => !m._ownPlace).length;
_setOsmStatus(pct < 100 ? `Scanne…` : `${total} Marker`, pct);
- return _layers[layerKey].filter(m => !m._ownPlace).length;
+ return (_layers[layerKey] || []).filter(m => !m._ownPlace).length;
}
});
- await Promise.all(freshTasks);
- _overpassActive = false;
+ try {
+ await Promise.all(freshTasks);
+ } finally {
+ _overpassActive = false;
+ }
const totalLoaded = Object.values(_layers).flat().filter(m => !m._ownPlace).length;
const allHidden = Object.keys(OSM_LAYER_MAP).every(k => _visible[k] === false);
@@ -931,10 +1033,13 @@ window.Page_map = (() => {
_setOsmStatus('Layer deaktiviert — Liste antippen', 100);
}
- // Wenn 0 OSM-Marker: Hintergrund-Fetch läuft noch — max 3× automatisch nachfragen
- if (totalLoaded === 0 && zoom >= 14 && _autoRetryCount < 3) {
+ // Wenn 0 OSM-Marker: Hintergrund-Overpass-Fetch läuft noch — bis zu 8× nachfragen
+ // Overpass für alle Layer sequential: bis zu ~4min → Retries müssen das abdecken
+ if (totalLoaded === 0 && zoom >= 14 && _autoRetryCount < 8) {
_autoRetryCount++;
- const delay = _autoRetryCount * 30000; // 30s, 60s, 90s
+ // 10s, 20s, 35s, 50s, 70s, 90s, 120s, 150s
+ const delays = [10000, 20000, 35000, 50000, 70000, 90000, 120000, 150000];
+ const delay = delays[_autoRetryCount - 1] || 120000;
_setOsmStatus(`Neue Umgebung – Daten werden geladen…`);
setTimeout(() => { if (!_overpassActive) _scheduleOsmLoad(); }, delay);
}
@@ -1944,6 +2049,92 @@ window.Page_map = (() => {
} catch { /* still */ }
}
+ // ----------------------------------------------------------
+ // Orts-Suche (Nominatim-Proxy)
+ // ----------------------------------------------------------
+ async function _runSearch(q) {
+ const resultsEl = document.getElementById('map-search-results');
+ if (!resultsEl) return;
+ resultsEl.innerHTML = '
Suche…
';
+ resultsEl.style.display = '';
+ try {
+ const data = await API.get(`/osm/geocode?q=${encodeURIComponent(q)}`);
+ if (!data.length) {
+ resultsEl.innerHTML = '
Keine Ergebnisse
';
+ return;
+ }
+ resultsEl.innerHTML = data.map((r, i) =>
+ `
+
${UI.escape(r.name)}
+ ${r.subtitle ? `
${UI.escape(r.subtitle)}
` : ''}
+
`
+ ).join('');
+ resultsEl.querySelectorAll('.map-search-item').forEach(el => {
+ el.addEventListener('pointerdown', e => {
+ e.stopPropagation();
+ const r = data[+el.dataset.i];
+ _flyToResult(r);
+ document.getElementById('map-search-input').value = r.name;
+ document.getElementById('map-search-clear').style.display = '';
+ resultsEl.style.display = 'none';
+ });
+ });
+ } catch {
+ resultsEl.innerHTML = '
Suche nicht verfügbar
';
+ }
+ }
+
+ function _flyToResult(r) {
+ if (!_map || !window.L) return;
+ _searchMarker?.remove();
+ _map.flyTo([r.lat, r.lon], 15, { duration: 1.0 });
+ _searchMarker = L.marker([r.lat, r.lon], {
+ icon: L.divIcon({
+ className: '',
+ html: `
`,
+ iconSize: [32, 32],
+ iconAnchor: [16, 32],
+ }),
+ zIndexOffset: 1000,
+ })
+ .addTo(_map)
+ .bindPopup(`
${UI.escape(r.name)}
+ ${r.subtitle ? `
${UI.escape(r.subtitle)}
` : ''}
+
`, { maxWidth: 240 })
+ .openPopup();
+
+ setTimeout(() => {
+ document.getElementById('search-marker-close')?.addEventListener('click', () => {
+ _clearSearch();
+ _searchMarker?.closePopup();
+ });
+ }, 50);
+ }
+
+ function _clearSearch() {
+ const input = document.getElementById('map-search-input');
+ const results = document.getElementById('map-search-results');
+ const wrap = document.getElementById('map-search-wrap');
+ const btn = document.getElementById('map-search-btn');
+ if (input) { input.value = ''; input.blur(); }
+ if (results) results.style.display = 'none';
+ wrap?.classList.remove('active');
+ btn?.classList.remove('active');
+ _searchMarker?.remove();
+ _searchMarker = null;
+ clearTimeout(_searchTimer);
+ }
+
return { init, refresh, onDogChange, startRecording: _startRecording, stopRecording: _stopRecording, isRecording: () => _recActive };
})();
diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js
index 0f4e1af..bf3ccaa 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -1698,6 +1698,10 @@ window.Page_routes = (() => {
center: [mid.lat, mid.lon], zoom: 15,
zoomControl: false, attributionControl: false,
});
+ // Container hat im frisch eingefügten Fixed-Overlay erst jetzt seine
+ // finale Flex-Höhe — Leaflet muss sie neu vermessen, sonst lädt es nur
+ // oben Tiles und der Rest bleibt grau.
+ _navMap.invalidateSize();
// Route-Polylines: erledigt (grün) + ausstehend (orange)
const doneLine = L.polyline([], { color: '#22c55e', weight: 5, opacity: 0.85 }).addTo(_navMap);
@@ -1705,6 +1709,14 @@ window.Page_routes = (() => {
_navMap.fitBounds(remainLine.getBounds(), { padding: [20, 20] });
_addRouteArrows(_navMap, track, '#3b82f6');
+ // iOS rendert das Flex-Layout teils verzögert — nochmal neu vermessen
+ // und Ausschnitt erneut anpassen.
+ setTimeout(() => {
+ if (!_navMap) return;
+ _navMap.invalidateSize();
+ _navMap.fitBounds(remainLine.getBounds(), { padding: [20, 20] });
+ }, 250);
+
// Start/End-Marker (als Variable damit Reverse sie neu setzen kann)
const mkPin = (p, color) => L.circleMarker([p.lat, p.lon], {
radius: 8, color: '#fff', weight: 2, fillColor: color, fillOpacity: 1
diff --git a/backend/static/js/pages/walks.js b/backend/static/js/pages/walks.js
index 2d2072e..dfa11ee 100644
--- a/backend/static/js/pages/walks.js
+++ b/backend/static/js/pages/walks.js
@@ -897,8 +897,6 @@ window.Page_walks = (() => {
let _locLon = v.lon != null ? parseFloat(v.lon) : null;
let _locName = v.ort_name || null;
- const _pinSvg = '
';
-
const body = `