From d3eab7d973c98a4bb964fc0e540211154d0fd1b3 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 14 Apr 2026 15:24:29 +0200
Subject: [PATCH] Fix journey map OSM warning (#627) and sidebar re-render on
 tab switch (#610)

- Enable attributionControl and add OSM attribution to JourneyMap TileLayer
- Memoize sidebar map entries array to prevent unnecessary map rebuilds
- Use stable callback reference for onMarkerClick
---
 client/src/components/Journey/JourneyMap.tsx |  7 +++++--
 client/src/pages/JourneyDetailPage.tsx       | 22 +++++++++++---------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Journey/JourneyMap.tsx b/client/src/components/Journey/JourneyMap.tsx
index f8a0d58a..082c4a4f 100644
--- a/client/src/components/Journey/JourneyMap.tsx
+++ b/client/src/components/Journey/JourneyMap.tsx
@@ -155,7 +155,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
 
     const map = L.map(containerRef.current, {
       zoomControl: false,
-      attributionControl: false,
+      attributionControl: true,
       scrollWheelZoom: false,
       dragging: true,
       touchZoom: true,
@@ -165,7 +165,10 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
     const defaultTile = dark
       ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
       : 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
-    L.tileLayer(mapTileUrl || defaultTile, { maxZoom: 18 }).addTo(map)
+    L.tileLayer(mapTileUrl || defaultTile, {
+      maxZoom: 18,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    }).addTo(map)
 
     const items = buildMarkerItems(entries)
     itemsRef.current = items
diff --git a/client/src/pages/JourneyDetailPage.tsx b/client/src/pages/JourneyDetailPage.tsx
index 21c4fce8..989ecfd4 100644
--- a/client/src/pages/JourneyDetailPage.tsx
+++ b/client/src/pages/JourneyDetailPage.tsx
@@ -158,6 +158,16 @@ export default function JourneyDetailPage() {
     [current?.entries]
   )
 
+  const sidebarMapItems = useMemo(() => mapEntries.map(e => ({
+    id: String(e.id),
+    lat: e.location_lat!,
+    lng: e.location_lng!,
+    title: e.title || '',
+    mood: e.mood,
+    created_at: e.entry_date,
+    entry_date: e.entry_date,
+  })), [mapEntries])
+
   const tripDates = useMemo(() => {
     const dates = new Set<string>()
     if (!current?.trips) return dates
@@ -387,17 +397,9 @@ export default function JourneyDetailPage() {
                 <JourneyMap
                   ref={mapRef}
                   checkins={[]}
-                  entries={mapEntries.map(e => ({
-                    id: String(e.id),
-                    lat: e.location_lat!,
-                    lng: e.location_lng!,
-                    title: e.title || '',
-                    mood: e.mood,
-                    created_at: e.entry_date,
-                    entry_date: e.entry_date,
-                  })) as any}
+                  entries={sidebarMapItems as any}
                   height={240}
-                  onMarkerClick={(id) => handleMarkerClick(id)}
+                  onMarkerClick={handleMarkerClick}
                 />
                 <div className="px-3.5 py-2.5 border-t border-zinc-200 dark:border-zinc-700 flex items-center justify-between text-[11px] text-zinc-500">
                   <span>{mapEntries.length} {t('journey.stats.places')}</span>