feat(photos): manual placement and drag for non-geotagged photos

When a single selected photo has no usable EXIF GPS, the Add Geotagged
Photos dialog now offers a manual-placement workflow instead of a hard
error. The photo is dropped at the current map center and a draggable pin
lets the user fine-tune its position on the map before committing.

- loadPhotosAtLocation builds a point layer for no-GPS photos at a given
  center, still reading EXIF metadata and thumbnails.
- relocatePhotoFeatures moves the placed points as the pin is dragged.
- MapController.startManualPlacement drops the draggable pin and a themed
  hint popup with a Done button; it lives outside React so it survives the
  dialog closing (the modal overlay would otherwise block dragging).

Fixes #894

Author: giswqs

apps/geolibre-desktop/src/components/layout/add-data/sources/PhotosSource.tsx

@@ -1,28 +1,47 @@
+import { useAppStore } from "@geolibre/core";
 import { Button, Label } from "@geolibre/ui";
-import { Images } from "lucide-react";
+import { Images, MapPin } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   type GeotaggedPhotoResult,
   loadGeotaggedPhotos,
+  loadPhotosAtLocation,
+  relocatePhotoFeatures,
 } from "../../../../lib/geotagged-photos";
 import { pickImageFilesWithFallback } from "../../../../lib/tauri-io";
 import { createBaseLayer, errorMessage } from "../helpers";
 import { AddDataSourceForm, useAddDataSource } from "../shared";
 
+/** Round a lng/lat for the placement prompt so it reads cleanly. */
+function formatCoordinate(value: number): string {
+  return value.toFixed(4);
+}
+
 /**
  * Add Data source that imports a set of geotagged photos as a point layer.
  * Each image is placed from its EXIF GPS coordinates with a thumbnail and EXIF
  * metadata stored on the feature; photos without GPS are skipped and reported.
+ *
+ * When a single photo carries no usable GPS, the dialog offers a manual
+ * placement workflow instead of a hard error: the photo is dropped at the
+ * current map center and a draggable pin lets the user fine-tune its position
+ * on the map (issue #894).
  */
 export function PhotosSource() {
   const { t } = useTranslation();
   // Captured once on mount so the "did the user rename it?" comparisons stay
   // stable even if the UI language changes while the dialog is open.
   const [defaultName] = useState(() => t("addData.photos.defaultName"));
   const source = useAddDataSource(defaultName);
+  const updateLayer = useAppStore((s) => s.updateLayer);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [summary, setSummary] = useState<GeotaggedPhotoResult | null>(null);
+  // Set when a single photo had no GPS: holds the map center the photo would be
+  // placed at, switching the dialog to the manual-placement prompt.
+  const [manualCenter, setManualCenter] = useState<[number, number] | null>(
+    null,
+  );
 
   const handleChoosePhotos = async () => {
     source.setError(null);
@@ -43,6 +62,16 @@ export function PhotosSource() {
 
     const result = await loadGeotaggedPhotos(selectedFiles);
     if (result.located === 0) {
+      // A single photo with no GPS pivots to manual placement instead of a hard
+      // stop; multiple no-GPS photos still report the original error.
+      if (selectedFiles.length === 1) {
+        const center =
+          source.shell.mapControllerRef.current?.readView().center ?? null;
+        if (center) {
+          setManualCenter([center[0], center[1]]);
+          return;
+        }
+      }
       throw new Error(
         t("addData.photos.errorNoGps", { count: result.total }),
       );
@@ -70,6 +99,43 @@ export function PhotosSource() {
     setSummary(result);
   });
 
+  const handleManualPlace = source.runSubmit(async () => {
+    if (!manualCenter) return;
+    const name = source.layerName.trim() || defaultName;
+    const result = await loadPhotosAtLocation(selectedFiles, manualCenter);
+    const layer = {
+      ...createBaseLayer(
+        name,
+        "geojson",
+        { type: "geojson" },
+        {
+          sourceKind: "geotagged-photos",
+          featureCount: result.located,
+          skipped: result.skipped,
+          withoutThumbnail: result.withoutThumbnail,
+          total: result.total,
+          manualPlacement: true,
+        },
+      ),
+      geojson: result.featureCollection,
+    };
+    source.shell.addLayer(layer, source.beforeLayer);
+    // Hand the user a draggable pin on the map to fine-tune the position. It
+    // lives outside React, so closing the dialog (below) does not cancel it;
+    // each drag rewrites the layer's coordinates in the store.
+    source.shell.mapControllerRef.current?.startManualPlacement(manualCenter, {
+      hint: t("addData.photos.manualHint"),
+      doneLabel: t("common.done"),
+      onMove: (lngLat) =>
+        updateLayer(layer.id, {
+          geojson: relocatePhotoFeatures(result.featureCollection, lngLat),
+        }),
+    });
+    // Close the dialog so the map (and the drag pin) become interactive; the
+    // modal overlay would otherwise block dragging.
+    source.shell.closeDialog();
+  });
+
   if (summary) {
     return (
       <div className="space-y-4">
@@ -99,6 +165,47 @@ export function PhotosSource() {
     );
   }
 
+  if (manualCenter) {
+    return (
+      <form className="space-y-4" onSubmit={handleManualPlace}>
+        <div className="space-y-2 rounded-md border border-border p-3 text-sm">
+          <p className="font-medium text-foreground">
+            {t("addData.photos.manualPromptTitle")}
+          </p>
+          <p className="text-muted-foreground">
+            {t("addData.photos.manualPromptBody")}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {t("addData.photos.manualPromptCenter", {
+              lng: formatCoordinate(manualCenter[0]),
+              lat: formatCoordinate(manualCenter[1]),
+            })}
+          </p>
+        </div>
+        {source.error ? (
+          <p className="text-sm text-destructive">{source.error}</p>
+        ) : null}
+        <div className="flex justify-end gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setManualCenter(null);
+              source.setError(null);
+            }}
+            disabled={source.isSubmitting}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button type="submit" disabled={source.isSubmitting}>
+            <MapPin className="mr-2 h-3.5 w-3.5" />
+            {t("addData.photos.manualPlace")}
+          </Button>
+        </div>
+      </form>
+    );
+  }
+
   return (
     <AddDataSourceForm
       layerName={source.layerName}

apps/geolibre-desktop/src/i18n/locales/en.json

@@ -325,7 +325,12 @@
       "skippedNote_one": "{{count}} photo was skipped (no GPS location).",
       "skippedNote_other": "{{count}} photos were skipped (no GPS location).",
       "noThumbnailNote_one": "{{count}} photo has no thumbnail (HEIC or unsupported format).",
-      "noThumbnailNote_other": "{{count}} photos have no thumbnail (HEIC or unsupported format)."
+      "noThumbnailNote_other": "{{count}} photos have no thumbnail (HEIC or unsupported format).",
+      "manualPromptTitle": "No GPS location was found in this photo.",
+      "manualPromptBody": "Place it at the current map center and drag it into position on the map.",
+      "manualPromptCenter": "Map center: {{lng}}, {{lat}}",
+      "manualPlace": "Place at map center",
+      "manualHint": "Drag this pin to position the photo, then click Done."
     },
     "mbtiles": {
       "defaultName": "MBTiles Layer",

apps/geolibre-desktop/src/index.css

@@ -1842,6 +1842,65 @@ body,
   border-left-color: hsl(var(--popover));
 }
 
+/* The draggable photo-placement pin's hint popup (manual placement of a
+   non-geotagged photo). Themed to match the app's popover surface. */
+.geolibre-placement-popup-root .maplibregl-popup-content {
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.18),
+    0 4px 6px -4px rgb(0 0 0 / 0.18);
+  color: hsl(var(--popover-foreground));
+  padding: 0.625rem 0.75rem;
+}
+
+.geolibre-placement-popup-root.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.geolibre-placement-popup-root.maplibregl-popup-anchor-top-left
+  .maplibregl-popup-tip,
+.geolibre-placement-popup-root.maplibregl-popup-anchor-top-right
+  .maplibregl-popup-tip {
+  border-bottom-color: hsl(var(--popover));
+}
+
+.geolibre-placement-popup-root.maplibregl-popup-anchor-bottom
+  .maplibregl-popup-tip,
+.geolibre-placement-popup-root.maplibregl-popup-anchor-bottom-left
+  .maplibregl-popup-tip,
+.geolibre-placement-popup-root.maplibregl-popup-anchor-bottom-right
+  .maplibregl-popup-tip {
+  border-top-color: hsl(var(--popover));
+}
+
+.geolibre-placement-popup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 13rem;
+}
+
+.geolibre-placement-popup-hint {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  color: hsl(var(--popover-foreground));
+}
+
+.geolibre-placement-popup-done {
+  align-self: flex-end;
+  border-radius: 0.375rem;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.geolibre-placement-popup-done:hover {
+  background: hsl(var(--primary) / 0.9);
+}
+
 .swipe-control-panel .swipe-control-select {
   height: 28px;
   line-height: 28px;

apps/geolibre-desktop/src/lib/geotagged-photos.ts

@@ -303,3 +303,71 @@ export async function loadGeotaggedPhotos(
     withoutThumbnail,
   };
 }
+
+/**
+ * Build a point layer for photos that carry no usable GPS by placing every one
+ * at `center` (typically the current map view center). EXIF metadata and inline
+ * thumbnails are still read so a manually placed photo carries the same feature
+ * properties as a GPS-located one; the caller then lets the user drag the point
+ * into its final position.
+ *
+ * @param files - The image files to place. Anything the EXIF/thumbnail readers
+ *   cannot parse is still placed at the center with whatever could be read.
+ * @param center - The `[lng, lat]` to drop every photo at.
+ * @returns The point layer plus counts shaped like {@link loadGeotaggedPhotos}
+ *   (`skipped` is always 0 because manual placement never drops a photo).
+ */
+export async function loadPhotosAtLocation(
+  files: File[],
+  center: [number, number],
+): Promise<GeotaggedPhotoResult> {
+  const features: Feature<Point>[] = [];
+  let withoutThumbnail = 0;
+
+  for (const file of files) {
+    const fileName = file.name || "photo";
+    const exif = (await readPhotoExif(file)) ?? {};
+    const thumbnail = await createThumbnailDataUrl(file, fileName);
+    if (!thumbnail) withoutThumbnail += 1;
+
+    features.push({
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [center[0], center[1]],
+      },
+      properties: buildPhotoProperties(fileName, exif, thumbnail),
+    });
+  }
+
+  return {
+    featureCollection: { type: "FeatureCollection", features },
+    total: files.length,
+    located: features.length,
+    skipped: 0,
+    withoutThumbnail,
+  };
+}
+
+/**
+ * Return a copy of a photo point collection with every feature moved to
+ * `[lng, lat]`. Used while the user drags the manual-placement handle so the
+ * rendered points follow the marker; feature properties (thumbnail, EXIF) are
+ * preserved.
+ *
+ * @param collection - The photo point collection to relocate.
+ * @param position - The `[lng, lat]` to move every feature to.
+ * @returns A new collection with the same features at the new position.
+ */
+export function relocatePhotoFeatures(
+  collection: FeatureCollection<Point>,
+  [lng, lat]: [number, number],
+): FeatureCollection<Point> {
+  return {
+    type: "FeatureCollection",
+    features: collection.features.map((feature) => ({
+      ...feature,
+      geometry: { type: "Point", coordinates: [lng, lat] },
+    })),
+  };
+}

packages/map/src/map-controller.ts

@@ -856,6 +856,86 @@ export class MapController {
     );
   }
 
+  /**
+   * Drop a draggable pin at `lngLat` so the user can fine-tune the position of a
+   * feature that was just placed without coordinates of its own (e.g. a
+   * non-geotagged photo dropped at the map center). Every drag reports the new
+   * position through `onMove`; clicking the pin's "Done" button (label supplied
+   * by the caller so it stays translatable) removes the pin and runs `onDone`.
+   *
+   * The pin and its hint popup live outside the React tree, so the interaction
+   * survives the dialog that started it being closed. Returns a disposer that
+   * removes the pin early (e.g. if the caller needs to abort).
+   *
+   * @param lngLat - Where to drop the pin, as `[lng, lat]`.
+   * @param options - Translated labels plus the move/done callbacks.
+   * @returns A function that removes the pin and its popup.
+   */
+  startManualPlacement(
+    lngLat: [number, number],
+    options: {
+      /** Instruction shown in the pin's popup while it is draggable. */
+      hint: string;
+      /** Label for the button that finishes placement. */
+      doneLabel: string;
+      /** Called with `[lng, lat]` on every drag of the pin. */
+      onMove: (lngLat: [number, number]) => void;
+      /** Called once when the user clicks the "Done" button. */
+      onDone?: () => void;
+    },
+  ): () => void {
+    const map = this.map;
+    if (!map) return () => {};
+
+    const marker = new maplibregl.Marker({ draggable: true, color: "#ef4444" })
+      .setLngLat(lngLat)
+      .addTo(map);
+
+    const container = document.createElement("div");
+    container.className = "geolibre-placement-popup";
+    const hintText = document.createElement("p");
+    hintText.className = "geolibre-placement-popup-hint";
+    hintText.textContent = options.hint;
+    const doneButton = document.createElement("button");
+    doneButton.type = "button";
+    doneButton.className = "geolibre-placement-popup-done";
+    doneButton.textContent = options.doneLabel;
+    container.append(hintText, doneButton);
+
+    const popup = new maplibregl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      offset: 28,
+      className: "geolibre-placement-popup-root",
+    })
+      .setLngLat(lngLat)
+      .setDOMContent(container)
+      .addTo(map);
+
+    let disposed = false;
+    const handleDrag = () => {
+      const next = marker.getLngLat();
+      popup.setLngLat(next);
+      options.onMove([next.lng, next.lat]);
+    };
+    const dispose = () => {
+      if (disposed) return;
+      disposed = true;
+      marker.off("drag", handleDrag);
+      doneButton.removeEventListener("click", handleDone);
+      popup.remove();
+      marker.remove();
+    };
+    const handleDone = () => {
+      dispose();
+      options.onDone?.();
+    };
+
+    marker.on("drag", handleDrag);
+    doneButton.addEventListener("click", handleDone);
+    return dispose;
+  }
+
   /**
    * Imperatively animate the camera, for the programmatic scripting API.
    *