Feature: Standort per Klick auf der Karte auswaehlen
Neuer Toolbar-Button "Standort auf Karte waehlen" ergaenzt die bestehenden Wege (Browser-Geolocation, manuelle Eingabe): aktiviert einen Auswahlmodus (Crosshair-Cursor, Hinweisleiste mit Abbrechen-Option), der naechste Klick auf die Karte setzt state.userLocation auf die geklickten Koordinaten. Escape oder der Abbrechen-Button beenden den Modus ohne Aenderung. js/map/mapController.js: startLocationPicking()/stopLocationPicking()/ isPickingLocation() kapseln den einmaligen Klick-Listener und dessen Aufraeumen. Wiederverwendet den bereits vorhandenen "Hier bist du"-Marker (aus dem vorherigen Fix) fuer die Anzeige.
This commit is contained in:
+53
-1
@@ -2,7 +2,14 @@
|
||||
|
||||
(function () {
|
||||
const { initStore } = EventMap.store;
|
||||
const { initMap, centerOnCoords, requestUserLocation } = EventMap.map;
|
||||
const {
|
||||
initMap,
|
||||
centerOnCoords,
|
||||
requestUserLocation,
|
||||
startLocationPicking,
|
||||
stopLocationPicking,
|
||||
isPickingLocation,
|
||||
} = EventMap.map;
|
||||
const {
|
||||
initList,
|
||||
initDetail,
|
||||
@@ -76,6 +83,50 @@
|
||||
});
|
||||
}
|
||||
|
||||
function setupPickLocationButton() {
|
||||
const button = document.getElementById('pick-location-btn');
|
||||
const hint = document.getElementById('map-picking-hint');
|
||||
const cancelBtn = document.getElementById('map-picking-cancel-btn');
|
||||
if (!button || !hint || !cancelBtn) return;
|
||||
|
||||
const defaultLabel = button.textContent;
|
||||
|
||||
function endPicking() {
|
||||
button.textContent = defaultLabel;
|
||||
button.classList.remove('btn--active');
|
||||
hint.hidden = true;
|
||||
}
|
||||
|
||||
function beginPicking() {
|
||||
button.textContent = 'Klicke auf die Karte …';
|
||||
button.classList.add('btn--active');
|
||||
hint.hidden = false;
|
||||
|
||||
startLocationPicking({
|
||||
onPick: ({ lat, lng }) => {
|
||||
EventMap.store.setState({ userLocation: { lat, lng } });
|
||||
EventMap.store.updateSettings({ userConsentGeo: true });
|
||||
endPicking();
|
||||
},
|
||||
onCancel: endPicking,
|
||||
});
|
||||
}
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
if (isPickingLocation()) {
|
||||
stopLocationPicking();
|
||||
endPicking();
|
||||
} else {
|
||||
beginPicking();
|
||||
}
|
||||
});
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
stopLocationPicking();
|
||||
endPicking();
|
||||
});
|
||||
}
|
||||
|
||||
function setupAddPlaceButton() {
|
||||
const button = document.getElementById('add-place-btn');
|
||||
if (!button) return;
|
||||
@@ -115,6 +166,7 @@
|
||||
initImport('import-modal');
|
||||
setupGeolocationButton();
|
||||
setupManualLocationButton();
|
||||
setupPickLocationButton();
|
||||
setupAddPlaceButton();
|
||||
setupPromptGeneratorButton();
|
||||
setupImportButton();
|
||||
|
||||
@@ -102,6 +102,57 @@
|
||||
return map;
|
||||
}
|
||||
|
||||
let pickingActive = false;
|
||||
let pickingClickHandler = null;
|
||||
let pickingEscHandler = null;
|
||||
|
||||
/**
|
||||
* Aktiviert den "Standort auf Karte wählen"-Modus: der nächste Klick auf
|
||||
* die Karte liefert die geklickten Koordinaten an onPick. Escape oder ein
|
||||
* erneuter Aufruf von stopLocationPicking() bricht ab (onCancel).
|
||||
* @param {{onPick?: (loc:{lat:number,lng:number}) => void, onCancel?: () => void}} [handlers]
|
||||
*/
|
||||
function startLocationPicking({ onPick, onCancel } = {}) {
|
||||
if (!map || pickingActive) return;
|
||||
pickingActive = true;
|
||||
map.getContainer().classList.add('map-panel__map--picking');
|
||||
|
||||
pickingClickHandler = (event) => {
|
||||
const { lat, lng } = event.latlng;
|
||||
stopLocationPicking();
|
||||
if (onPick) onPick({ lat, lng });
|
||||
};
|
||||
map.once('click', pickingClickHandler);
|
||||
|
||||
pickingEscHandler = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
stopLocationPicking();
|
||||
if (onCancel) onCancel();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', pickingEscHandler);
|
||||
}
|
||||
|
||||
/** Beendet den Standort-Auswahlmodus, ohne onPick/onCancel selbst aufzurufen. */
|
||||
function stopLocationPicking() {
|
||||
if (!pickingActive || !map) return;
|
||||
pickingActive = false;
|
||||
map.getContainer().classList.remove('map-panel__map--picking');
|
||||
|
||||
if (pickingClickHandler) {
|
||||
map.off('click', pickingClickHandler);
|
||||
pickingClickHandler = null;
|
||||
}
|
||||
if (pickingEscHandler) {
|
||||
document.removeEventListener('keydown', pickingEscHandler);
|
||||
pickingEscHandler = null;
|
||||
}
|
||||
}
|
||||
|
||||
function isPickingLocation() {
|
||||
return pickingActive;
|
||||
}
|
||||
|
||||
/** Initialisiert die Karte im Element mit der übergebenen id. */
|
||||
function initMap(containerId) {
|
||||
// Leaflet leert den Container beim Initialisieren nicht selbst - den
|
||||
@@ -175,5 +226,8 @@
|
||||
EventMap.map.centerOnPlace = centerOnPlace;
|
||||
EventMap.map.centerOnCoords = centerOnCoords;
|
||||
EventMap.map.getMapInstance = getMapInstance;
|
||||
EventMap.map.startLocationPicking = startLocationPicking;
|
||||
EventMap.map.stopLocationPicking = stopLocationPicking;
|
||||
EventMap.map.isPickingLocation = isPickingLocation;
|
||||
EventMap.map.initMap = initMap;
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user