diff --git a/web/src/components/LeafletMap.tsx b/web/src/components/LeafletMap.tsx index e1facc54c..f71122ce4 100644 --- a/web/src/components/LeafletMap.tsx +++ b/web/src/components/LeafletMap.tsx @@ -37,6 +37,16 @@ const LocationMarker = (props: MarkerProps) => { map.locate(); }, []); + // Keep marker and map in sync with external position updates + useEffect(() => { + if (props.position) { + setPosition(props.position); + map.setView(props.position); + } else { + setPosition(undefined); + } + }, [props.position, map]); + return position === undefined ? null : ; }; diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx index 935e96f04..b5ce6cc7d 100644 --- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx +++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx @@ -35,13 +35,23 @@ const LocationSelector = (props: Props) => { const [popoverOpen, setPopoverOpen] = useState(false); useEffect(() => { - setState((state) => ({ - ...state, - placeholder: props.location?.placeholder || "", - position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0), - latInput: String(props.location?.latitude ?? 0), - lngInput: String(props.location?.longitude ?? 0), - })); + if (props.location) { + setState((state) => ({ + ...state, + placeholder: props.location.placeholder || "", + position: new LatLng(props.location.latitude, props.location.longitude), + latInput: String(props.location.latitude), + lngInput: String(props.location.longitude), + })); + } else { + setState((state) => ({ + ...state, + placeholder: "", + position: undefined, + latInput: "", + lngInput: "", + })); + } }, [props.location]); useEffect(() => {