v2: pin responds to input fields

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 : <Marker position={position} icon={markerIcon}></Marker>;
 };
 

web/src/components/MemoEditor/ActionButton/LocationSelector.tsx

@@ -35,13 +35,23 @@ const LocationSelector = (props: Props) => {
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   useEffect(() => {
-    setState((state) => ({
+    if (props.location) {
-      ...state,
+      setState((state) => ({
-      placeholder: props.location?.placeholder || "",
+        ...state,
-      position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
+        placeholder: props.location.placeholder || "",
-      latInput: String(props.location?.latitude ?? 0),
+        position: new LatLng(props.location.latitude, props.location.longitude),
-      lngInput: String(props.location?.longitude ?? 0),
+        latInput: String(props.location.latitude),
-    }));
+        lngInput: String(props.location.longitude),
+      }));
+    } else {
+      setState((state) => ({
+        ...state,
+        placeholder: "",
+        position: undefined,
+        latInput: "",
+        lngInput: "",
+      }));
+    }
   }, [props.location]);
 
   useEffect(() => {