From 13a87393274e2d586eb65de53be680e37b3758b6 Mon Sep 17 00:00:00 2001
From: Arne Baeumler <arne@br0tkasten.de>
Date: Sun, 7 Jun 2026 20:25:17 +0200
Subject: [PATCH] feat: show photo thumbnails in map markers

---
 src/server/request-handler.ts | 42 ++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index 4c66a83..6011d02 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -553,6 +553,32 @@ function htmlPage(): string {
         color: var(--leaflet-popup-text);
       }
 
+      .photo-map-marker {
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 2px solid rgba(255, 255, 255, 0.92);
+        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
+        background: rgba(15, 23, 42, 0.2);
+      }
+
+      body[data-theme="dark"] .photo-map-marker {
+        border-color: rgba(15, 23, 42, 0.96);
+      }
+
+      .photo-map-marker img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .photo-map-marker.active {
+        border-color: rgba(100, 116, 139, 0.95);
+        box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18), 0 10px 22px rgba(15, 23, 42, 0.28);
+      }
+
       .timeline {
         padding: 15px;
         display: grid;
@@ -1304,6 +1330,18 @@ function htmlPage(): string {
         overlayImage.alt = photo.name;
       }
 
+      function createPhotoMarkerIcon(photo) {
+        const activeClass = photo.id === state.activePhotoId ? " active" : "";
+        return L.divIcon({
+          className: "photo-map-marker" + activeClass,
+          html:
+            '<img src="' + photo.thumbUrl + '" alt="' + photo.name + '" />',
+          iconSize: [44, 44],
+          iconAnchor: [22, 22],
+          popupAnchor: [0, -22]
+        });
+      }
+
       function closeOverlayView() {
         overlay.classList.remove("open");
         overlay.setAttribute("aria-hidden", "true");
@@ -1492,7 +1530,9 @@ function htmlPage(): string {
 
           for (const photo of visiblePhotos) {
             if (photo.latitude !== null && photo.longitude !== null) {
-              const marker = L.marker([photo.latitude, photo.longitude]).addTo(markers);
+              const marker = L.marker([photo.latitude, photo.longitude], {
+                icon: createPhotoMarkerIcon(photo)
+              }).addTo(markers);
 
               marker.bindPopup(
                 '<div class="thumb">' +