Karte: Follow-Mode + Live-Strecke bei Routen-Aufzeichnung (Wunsch Rene)
- MapGLMini-Polyline hatte KEIN addLatLng (nur setLatLngs) -> TypeError im Rec-Overlay: Strecke unsichtbar, Marker fror ein, kein Folgen. Facade ergaenzt (Leaflet-kompatibel). - Rec-Overlay (routes.js): Follow-Mode default AN — Karte wandert mit dem Standort, Drag pausiert, Crosshair-Button (unten rechts) reaktiviert; erster Fix setzt Zoom 16, danach bleibt der Zoom erhalten - Zentrale Karte (map.js): Standort-Button aktiviert Follow (+Toast), dragstart beendet es (beide Engines); GPS-Tracking folgt sanft (easeTo); Aufzeichnung startet im Follow-Mode, _updateRecMap pant nur noch im Follow Bump v1238
This commit is contained in:
parent
2cdb743ce7
commit
abd7447d29
8 changed files with 61 additions and 18 deletions
|
|
@ -17,6 +17,7 @@ window.Page_map = (() => {
|
|||
let _tileLayer = null;
|
||||
let _usingVector = false; // true wenn Vektor-Basemap (PMTiles) statt OSM-Raster
|
||||
let _engineGL = false; // true wenn MapLibre GL statt Leaflet (zentrale Karte)
|
||||
let _followGps = false; // Karte folgt dem Standort (Standort-Button an, Drag aus)
|
||||
let _maplibreLoaded = false;
|
||||
let _glLayersReady = false; // GL: POI-Sources/Layer angelegt?
|
||||
let _pmtilesProtoReg = false; // pmtiles-Protokoll bei MapLibre registriert?
|
||||
|
|
@ -364,6 +365,10 @@ window.Page_map = (() => {
|
|||
_sdEl?.classList.remove('open');
|
||||
if (_userPos) {
|
||||
_mapSetView(_userPos.lat, _userPos.lon, 16);
|
||||
// Follow-Mode (René 2026-06-08): Karte wandert ab jetzt mit dem Standort;
|
||||
// manuelles Verschieben beendet das Folgen (dragstart-Listener im Map-Init).
|
||||
_followGps = true;
|
||||
UI.toast.info('Karte folgt deinem Standort — zum Beenden Karte verschieben.');
|
||||
} else {
|
||||
UI.toast.error('Standort noch nicht verfügbar.');
|
||||
}
|
||||
|
|
@ -744,6 +749,7 @@ window.Page_map = (() => {
|
|||
window.addEventListener('resize', () => _map.invalidateSize());
|
||||
|
||||
_map.on('moveend zoomend', () => { _autoRetryCount = 0; _updateZoomDisplay(); _scheduleOsmLoad(); });
|
||||
_map.on('dragstart', () => { _followGps = false; }); // manuelles Verschieben beendet Follow
|
||||
setTimeout(() => { _updateZoomDisplay(); _scheduleOsmLoad(); }, 800);
|
||||
|
||||
// Fadenkreuz-Animation beim Kartenverschieben
|
||||
|
|
@ -921,6 +927,7 @@ window.Page_map = (() => {
|
|||
_map.on('movestart', () => {
|
||||
document.getElementById('map-crosshair')?.classList.add('dragging');
|
||||
});
|
||||
_map.on('dragstart', () => { _followGps = false; }); // manuelles Verschieben beendet Follow
|
||||
|
||||
window.addEventListener('resize', _mapResize);
|
||||
setTimeout(_mapResize, 100);
|
||||
|
|
@ -1070,6 +1077,7 @@ window.Page_map = (() => {
|
|||
_locationMarker = new maplibregl.Marker({ element: elx, anchor: 'center' })
|
||||
.setLngLat([lon, lat]).addTo(_map);
|
||||
}
|
||||
if (_followGps && !_recActive) _map.easeTo({ center: [lon, lat], duration: 600 });
|
||||
},
|
||||
() => {},
|
||||
{ enableHighAccuracy: true, maximumAge: 5000, timeout: 15000 }
|
||||
|
|
@ -1102,6 +1110,7 @@ window.Page_map = (() => {
|
|||
icon, zIndexOffset: 500, interactive: false,
|
||||
}).addTo(_map);
|
||||
}
|
||||
if (_followGps && !_recActive) _map.panTo([lat, lon]);
|
||||
},
|
||||
() => {},
|
||||
{ enableHighAccuracy: true, maximumAge: 5000, timeout: 15000 }
|
||||
|
|
@ -2564,6 +2573,7 @@ window.Page_map = (() => {
|
|||
document.addEventListener('visibilitychange', _onVisibilityChange);
|
||||
|
||||
_recTimerInt = setInterval(_updateRecStatus, 1000);
|
||||
_followGps = true; // Aufzeichnung startet im Follow-Mode (Drag pausiert, Standort-Button reaktiviert)
|
||||
|
||||
_recWatchId = navigator.geolocation.watchPosition(
|
||||
pos => {
|
||||
|
|
@ -2690,7 +2700,7 @@ window.Page_map = (() => {
|
|||
if (_engineGL) {
|
||||
_recTrackGL();
|
||||
_updateRecMarker(lat, lon);
|
||||
_map.panTo([lon, lat]); // MapLibre: [lng,lat]
|
||||
if (_followGps) _map.panTo([lon, lat]); // MapLibre: [lng,lat] — Drag pausiert Follow
|
||||
return;
|
||||
}
|
||||
if (!window.L) return;
|
||||
|
|
@ -2701,7 +2711,7 @@ window.Page_map = (() => {
|
|||
_recPolyline.addLatLng(ll);
|
||||
}
|
||||
_updateRecMarker(lat, lon);
|
||||
_map.panTo(ll);
|
||||
if (_followGps) _map.panTo(ll);
|
||||
}
|
||||
|
||||
function _updateRecStatus() {
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ window.Page_routes = (() => {
|
|||
|
||||
// Recording-Overlay state
|
||||
let _recOvl = null, _recMap = null;
|
||||
let _recFollow = true; // Karte folgt dem Standort bei Aufzeichnung (Drag pausiert)
|
||||
let _recActive = false;
|
||||
let _recTrack = [], _recDistKm = 0, _recStartTime = null;
|
||||
let _recTimerInt = null, _recWatchId = null;
|
||||
|
|
@ -762,6 +763,29 @@ window.Page_routes = (() => {
|
|||
_recLocMarker = UI.map.circleMarker([pos.lat, pos.lon], {
|
||||
radius: 8, color: '#fff', weight: 2.5, fillColor: '#3b82f6', fillOpacity: 1
|
||||
}).addTo(_recMap);
|
||||
// Follow-Mode (René 2026-06-08): Karte wandert mit dem Standort. Manuelles
|
||||
// Verschieben pausiert das Folgen; Crosshair-Button schaltet es wieder ein.
|
||||
_recFollow = true;
|
||||
const fwrap = ovl.querySelector('#rk-rec-map-wrap');
|
||||
if (!fwrap.style.position) fwrap.style.position = 'relative';
|
||||
const fb = document.createElement('button');
|
||||
fb.id = 'rk-rec-follow';
|
||||
fb.type = 'button';
|
||||
fb.title = 'Karte folgt dem Standort';
|
||||
fb.style.cssText = 'position:absolute;right:10px;bottom:10px;z-index:500;width:42px;height:42px;'
|
||||
+ 'border-radius:50%;border:none;background:var(--c-surface,#fff);'
|
||||
+ 'box-shadow:0 2px 8px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer';
|
||||
fb.innerHTML = UI.icon('crosshair');
|
||||
const updFb = () => { fb.style.color = _recFollow ? 'var(--c-primary)' : 'var(--c-text-secondary, #9ca3af)'; };
|
||||
updFb();
|
||||
fb.addEventListener('click', () => {
|
||||
_recFollow = true;
|
||||
const last = _recTrack[_recTrack.length - 1] || pos;
|
||||
_recMap?.setView([last.lat, last.lon]);
|
||||
updFb();
|
||||
});
|
||||
fwrap.appendChild(fb);
|
||||
try { _recMap.on('dragstart', () => { _recFollow = false; updFb(); }); } catch (e) {}
|
||||
} catch {
|
||||
const mapWrap = ovl.querySelector('#rk-rec-map-wrap');
|
||||
if (mapWrap) mapWrap.innerHTML =
|
||||
|
|
@ -892,7 +916,9 @@ window.Page_routes = (() => {
|
|||
_persistRec();
|
||||
_recPolyline?.addLatLng([lat, lon]);
|
||||
_recLocMarker?.setLatLng([lat, lon]);
|
||||
// Follow-Mode: Karte wandert mit (erster Fix setzt den Zoom, danach bleibt er)
|
||||
if (_recTrack.length === 1) _recMap?.setView([lat, lon], 16);
|
||||
else if (_recFollow) _recMap?.setView([lat, lon]);
|
||||
_updateRecStats();
|
||||
}, () => {}, { enableHighAccuracy: true, maximumAge: 2000 });
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue