more tweaks to map

Author: ndbroadbent

src/cli/steps/export.ts

@@ -161,7 +161,7 @@ function parseMapStyle(style: string | undefined): MapStyle | undefined {
 
 /**
  * Extract image attributions from ImageResult objects.
- * Converts ImageResult.meta.attribution to ImageAttribution format.
+ * Converts ImageResult.meta to ImageAttribution format.
  *
  * Only sources with meaningful attribution are included:
  * - wikipedia, pixabay, unsplash
@@ -179,16 +179,13 @@ function extractImageAttributions(
       // Only include sources that have meaningful artist attribution
       const source = mapToAttributionSource(result.meta.source)
       if (source) {
-        const attr: ImageAttribution = {
+        attributions.set(activityId, {
           name: result.meta.attribution.name,
-          url: result.meta.attribution.url,
+          photoUrl: result.meta.url, // URL to the photo/place page
+          authorUrl: result.meta.attribution.url || undefined, // Empty string → undefined
+          license: source === 'wikipedia' ? result.meta.license : undefined, // Only show license for Wikipedia
           source
-        }
-        // Only add license if defined (exactOptionalPropertyTypes)
-        if (result.meta.license !== undefined) {
-          ;(attr as { license: string }).license = result.meta.license
-        }
-        attributions.set(activityId, attr)
+        })
       }
     }
   }
@@ -206,16 +203,15 @@ function mapToAttributionSource(
   switch (source) {
     case 'wikipedia':
     case 'pixabay':
-      return source
     case 'unsplash':
-      return 'unsplash'
     case 'google_places':
+      return source
     case 'user_upload':
     case 'unsplash+':
       // These sources don't have artist attribution to display
       return null
     default:
-      return 'other'
+      return null
   }
 }
 

src/export/map/activity-list.js.template

@@ -97,12 +97,13 @@ function attachLightboxHandlers(sorted) {
       window.openLightbox(lightboxImage, a.activity, a.imageAttribution)
     })
 
-    if (a.imageAttribution) {
-      thumb.addEventListener('mouseenter', function () {
-        showAttributionTooltip(thumb, a.imageAttribution.text)
-      })
-      thumb.addEventListener('mouseleave', hideTooltip)
-    }
+    // Attribution shown in lightbox - tooltip too noisy
+    // if (a.imageAttribution) {
+    //   thumb.addEventListener('mouseenter', function () {
+    //     showAttributionTooltip(thumb, a.imageAttribution)
+    //   })
+    //   thumb.addEventListener('mouseleave', hideTooltip)
+    // }
   })
 }
 

src/export/map/app.js.template

@@ -7,10 +7,10 @@
     return
   }
 
-  // Initialize map
-  var map = L.map('map').setView([mapData.center.lat, mapData.center.lng], mapData.zoom)
+  // Initialize map (map and currentTileLayer are global for setMapStyle)
+  map = L.map('map').setView([mapData.center.lat, mapData.center.lng], mapData.zoom)
 
-  var currentTileLayer = L.tileLayer(tileStyles[currentStyle].url, {
+  currentTileLayer = L.tileLayer(tileStyles[currentStyle].url, {
     attribution: tileStyles[currentStyle].attribution
   }).addTo(map)
 
@@ -36,7 +36,7 @@
   }
 
   // Setup popup tooltip handlers
-  setupPopupTooltips()
+  setupPopupTooltips(map)
 
   // Render info box
   document.getElementById('infoTitle').textContent = mapData.title

src/export/map/data.ts

@@ -106,33 +106,13 @@ function toMapActivities(
 
 /**
  * Format attribution info for display.
- * Creates user-friendly text like "Photo by X on Unsplash" or "Photo by X via Wikipedia (CC-BY-SA)"
  */
 function formatAttribution(attr: ImageAttribution): MapImageAttribution {
-  let text: string
-
-  switch (attr.source) {
-    case 'unsplash':
-      text = `Photo by ${attr.name} on Unsplash`
-      break
-    case 'wikipedia':
-      text = attr.license ? `Photo by ${attr.name} (${attr.license})` : `Photo by ${attr.name}`
-      break
-    case 'pixabay':
-      text = `Photo by ${attr.name} on Pixabay`
-      break
-    case 'media_library':
-      // Media library images may have various sources
-      text = attr.name
-      break
-    default:
-      text = `Photo by ${attr.name}`
-  }
-
   return {
     name: attr.name,
-    url: attr.url,
+    photoUrl: attr.photoUrl,
+    authorUrl: attr.authorUrl,
     license: attr.license,
-    text
+    source: attr.source
   }
 }

src/export/map/lightbox.js.template

@@ -18,8 +18,7 @@ window.openLightbox = function (imagePath, title, attribution) {
   document.getElementById('lightboxTitle').textContent = title
   var attrEl = document.getElementById('lightboxAttribution')
   if (attribution) {
-    attrEl.innerHTML = '<a href="' + escapeHtml(attribution.url) + '" target="_blank">' +
-      escapeHtml(attribution.text) + '</a>'
+    attrEl.innerHTML = formatAttributionHtml(attribution)
     attrEl.style.display = 'block'
   } else {
     attrEl.style.display = 'none'

src/export/map/markers.js.template

@@ -13,14 +13,12 @@ function createMarkers(markersLayer) {
     var imageHtml = ''
     var popupImage = p.mediumImagePath || p.imagePath
     if (popupImage) {
-      imageHtml = '<img src="' +
-        escapeHtml(popupImage) +
-        '" style="display:block;width:100%;max-width:200px;border-radius:4px;margin-bottom:4px;" />'
-      if (p.imageAttribution) {
-        imageHtml += '<a href="' + escapeHtml(p.imageAttribution.url) +
-          '" target="_blank" class="img-attribution">' +
-          escapeHtml(p.imageAttribution.text) + '</a>'
-      }
+      var attrOverlay = p.imageAttribution
+        ? '<div class="img-attr-overlay">' + formatAttributionHtml(p.imageAttribution) + '</div>'
+        : ''
+      imageHtml = '<div class="img-container">' +
+        '<img src="' + escapeHtml(popupImage) + '" />' +
+        attrOverlay + '</div>'
     }
 
     var mapsUrl = p.placeId
@@ -99,7 +97,7 @@ function createMarkers(markersLayer) {
   return geocodedPoints
 }
 
-function setupPopupTooltips() {
+function setupPopupTooltips(map) {
   map.on('popupopen', function () {
     var triggers = document.querySelectorAll('.leaflet-popup .sender-trigger[data-messages]')
     triggers.forEach(function (trigger) {

src/export/map/styles.css.template

@@ -235,6 +235,38 @@ body { margin: 0; padding: 0; }
 }
 .img-attribution:hover { text-decoration: underline; color: #4b5563; }
 
+/* Popup image with attribution overlay */
+.img-container {
+  position: relative;
+  display: block;
+  width: 240px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.img-container img {
+  display: block;
+  width: 100%;
+}
+.img-attr-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px 8px 6px;
+  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
+  color: rgba(255,255,255,0.7);
+  font-size: 8px;
+  line-height: 1.3;
+}
+.img-attr-overlay a {
+  color: rgba(255,255,255,0.7);
+  text-decoration: underline;
+}
+.img-attr-overlay a:hover {
+  color: rgba(255,255,255,0.7);
+}
+
 /* Clickable thumbnail with cursor */
 .activity-thumb-wrapper.has-image {
   cursor: pointer;

src/export/map/tiles.js.template

@@ -1,4 +1,7 @@
 /* Tile layer styles */
+var map = null
+var currentTileLayer = null
+
 var tileStyles = {
   osm: {
     url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

src/export/map/tooltip.js.template

@@ -7,6 +7,31 @@ function escapeHtml(str) {
   return escapeDiv.innerHTML
 }
 
+var SERVICE_INFO = {
+  wikipedia: { name: 'Wikipedia', url: 'https://wikipedia.org' },
+  unsplash: { name: 'Unsplash', url: 'https://unsplash.com' },
+  pixabay: { name: 'Pixabay', url: 'https://pixabay.com' },
+  google_places: { name: 'Google', url: 'https://maps.google.com' }
+}
+
+function formatAttributionHtml(attr) {
+  var service = SERVICE_INFO[attr.source] || { name: attr.source, url: '#' }
+
+  var authorHtml = attr.authorUrl
+    ? '<a href="' + escapeHtml(attr.authorUrl) + '" target="_blank">' + escapeHtml(attr.name) + '</a>'
+    : escapeHtml(attr.name)
+
+  var html = '<a href="' + escapeHtml(attr.photoUrl) + '" target="_blank">Photo</a> by ' +
+    authorHtml + ' on ' +
+    '<a href="' + escapeHtml(service.url) + '" target="_blank">' + service.name + '</a>'
+
+  if (attr.license) {
+    html += ' (' + escapeHtml(attr.license) + ')'
+  }
+
+  return html
+}
+
 function formatSenders(messages) {
   var uniqueSenders = []
   var seen = {}
@@ -50,12 +75,21 @@ function showTooltip(trigger, messages) {
   positionTooltip(trigger, false)
 }
 
-function showAttributionTooltip(trigger, text) {
+function showAttributionTooltip(trigger, attr) {
   floatingTooltip.className = 'tooltip-simple'
-  floatingTooltip.innerHTML = '<div style="color:#e5e7eb;">' + escapeHtml(text) + '</div>'
+  floatingTooltip.innerHTML = '<div style="color:#e5e7eb;">' + formatAttributionText(attr) + '</div>'
   positionTooltip(trigger, true)
 }
 
+function formatAttributionText(attr) {
+  var service = SERVICE_INFO[attr.source] || { name: attr.source }
+  var text = 'Photo by ' + escapeHtml(attr.name) + ' on ' + service.name
+  if (attr.license) {
+    text += ' (' + escapeHtml(attr.license) + ')'
+  }
+  return text
+}
+
 function positionTooltip(trigger, center) {
   var rect = trigger.getBoundingClientRect()
   floatingTooltip.style.display = 'block'

src/export/map/types.ts

@@ -14,12 +14,14 @@ interface MapMessage {
 export interface MapImageAttribution {
   /** Artist/photographer name */
   name: string
-  /** Link to source page */
-  url: string
-  /** License (e.g., "CC-BY-SA 4.0") */
+  /** Link to the photo page */
+  photoUrl: string
+  /** Link to the author's profile (may be undefined for Google Places) */
+  authorUrl: string | undefined
+  /** License (only for Wikipedia) */
   license: string | undefined
-  /** Formatted attribution text (e.g., "Photo by X on Unsplash") */
-  text: string
+  /** Source platform */
+  source: 'wikipedia' | 'unsplash' | 'pixabay' | 'google_places'
 }
 
 export interface MapActivity {