fix: refine fullscreen photo overlay

src/client/app.ts

@@ -32,6 +32,7 @@ let scheduledRenderTimer = null;
 let scheduledRenderOptions = { fitMap: false };
 let lastRenderAt = 0;
 const SHARE_PARAM_NAME = "share";
+let overlayMapView = null;
 
 const map = L.map("map", { zoomControl: true }).setView([52.5208, 13.4095], 13);
 const lightMapLayer = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
@@ -248,6 +249,27 @@ function setMapTheme(theme) {
   });
 }
 
+function captureMapView() {
+  const center = map.getCenter();
+  return {
+    center: [center.lat, center.lng],
+    zoom: map.getZoom()
+  };
+}
+
+function rememberOverlayMapView() {
+  overlayMapView = captureMapView();
+}
+
+function restoreOverlayMapView() {
+  if (!overlayMapView) {
+    return;
+  }
+
+  map.setView(overlayMapView.center, overlayMapView.zoom, { animate: false });
+  overlayMapView = null;
+}
+
 function setRouteVisible(visible) {
   routeVisible = Boolean(visible);
   localStorage.setItem(ROUTE_VISIBLE_STORAGE_KEY, routeVisible ? "true" : "false");
@@ -494,6 +516,7 @@ function closeOverlayView() {
   overlayLoading.classList.remove("error");
   overlayLoadingText.textContent = "Loading full-size image...";
   overlayImage.removeAttribute("src");
+  restoreOverlayMapView();
 }
 
 closeOverlay.addEventListener("click", closeOverlayView);
@@ -503,7 +526,7 @@ overlay.addEventListener("click", (event) => {
   }
 });
 
-function updateRouteView(photos) {
+function updateRouteView(photos, options = {}) {
   const routePoints = photos
     .filter((photo) => photo.latitude !== null && photo.longitude !== null && photo.capturedAt)
     .sort((a, b) => String(a.capturedAt).localeCompare(String(b.capturedAt)))
@@ -511,6 +534,10 @@ function updateRouteView(photos) {
 
   route.setLatLngs(routePoints);
 
+  if (options.preserveMapView) {
+    return;
+  }
+
   if (routePoints.length === 1) {
     map.setView(routePoints[0], 13);
   } else if (routePoints.length > 1) {
@@ -671,7 +698,8 @@ function renderVisiblePhotos(options = {}) {
         marker.on("mouseover", () => marker.openPopup());
         marker.on("click", () => {
           state.activePhotoId = photo.id;
-          renderVisiblePhotos({ fitMap: false });
+          rememberOverlayMapView();
+          renderVisiblePhotos({ fitMap: false, preserveMapView: true });
           openOverlay(photo);
         });
       }
@@ -685,14 +713,15 @@ function renderVisiblePhotos(options = {}) {
         '<img src="' + escapeHtml(photo.thumbUrl) + '" alt="' + escapeHtml(photo.name) + '" />';
       item.addEventListener("click", () => {
         state.activePhotoId = photo.id;
-        renderVisiblePhotos({ fitMap: false });
+        rememberOverlayMapView();
+        renderVisiblePhotos({ fitMap: false, preserveMapView: true });
         openOverlay(photo);
       });
       photoList.appendChild(item);
     }
   }
 
-  updateRouteView(visiblePhotos);
+  updateRouteView(visiblePhotos, options);
   renderTimeline();
 
   if (options.fitMap && visiblePhotos.length) {