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(() => {