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:
2026-07-24 12:55:04 +02:00
parent c7e3246b44
commit 2d41bce063
5 changed files with 157 additions and 1 deletions
+53 -1
View File
@@ -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();
+54
View File
@@ -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;
})();