From e90ad852bb1375fafce888ad43775fcf0306f6c8 Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Fri, 20 Mar 2026 21:37:39 +0100
Subject: [PATCH] feat(been): add Leaflet map, show all checkins, link venue
 names

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 been.njk | 48 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/been.njk b/been.njk
index 062094a..adb6a19 100644
--- a/been.njk
+++ b/been.njk
@@ -3,6 +3,7 @@ layout: layouts/been.njk
 title: Been
 permalink: /been/
 withSidebar: true
+leafletMap: true
 ---
 {% set checkins = whereCheckins.checkins or [] %}
 
@@ -14,9 +15,46 @@ withSidebar: true
     </p>
   </header>
 
-  {% if checkins.length > 1 %}
+  {% set mapPoints = [] %}
+  {% for c in checkins %}
+    {% if c.latitude and c.longitude %}
+      {% set mapPoints = (mapPoints.push({name: c.name, lat: c.latitude, lng: c.longitude, url: c.venueUrl}), mapPoints) %}
+    {% endif %}
+  {% endfor %}
+
+  {% if mapPoints.length %}
+  <div id="checkin-map" class="mb-8 rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700" style="height: 420px;" aria-label="Map of past check-ins"></div>
+  <script>
+    var checkinPoints = {{ mapPoints | dump | safe }};
+  </script>
+  <script>
+    (function() {
+      L.Icon.Default.imagePath = 'https://unpkg.com/leaflet@1.9.4/dist/images/';
+      var map = L.map('checkin-map');
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: 19
+      }).addTo(map);
+      var markers = checkinPoints.map(function(p) {
+        var popup = p.url
+          ? '<a href="' + p.url + '" target="_blank" rel="noopener">' + p.name + '</a>'
+          : p.name;
+        return L.marker([p.lat, p.lng]).bindPopup(popup);
+      });
+      markers.forEach(function(m) { m.addTo(map); });
+      if (markers.length === 1) {
+        map.setView([checkinPoints[0].lat, checkinPoints[0].lng], 15);
+      } else {
+        var group = L.featureGroup(markers);
+        map.fitBounds(group.getBounds().pad(0.1));
+      }
+    })();
+  </script>
+  {% endif %}
+
+  {% if checkins.length %}
   <section class="space-y-4" aria-label="Past check-ins">
-    {% for checkin in checkins %}{% if not loop.first %}
+    {% for checkin in checkins %}
     <article class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
       <div class="flex items-start gap-3 sm:gap-4">
         <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center flex-shrink-0 mt-0.5">
@@ -28,7 +66,11 @@ withSidebar: true
 
         <div class="flex-1 min-w-0">
           <h2 class="text-base sm:text-lg font-semibold text-surface-900 dark:text-surface-100">
+            {% if checkin.venueUrl %}
+            <a href="{{ checkin.venueUrl }}" target="_blank" rel="noopener" class="hover:underline">{{ checkin.name }}</a>
+            {% else %}
             {{ checkin.name }}
+            {% endif %}
           </h2>
 
           {% if checkin.locationText or checkin.postalCode %}
@@ -98,7 +140,7 @@ withSidebar: true
         </div>
       </div>
     </article>
-    {% endif %}{% endfor %}
+    {% endfor %}
   </section>
   {% else %}
   <p class="text-surface-600 dark:text-surface-400">No past check-ins found.</p>