From 333d1cf7ebb101bed3a4062a9f2fe3e65e341621 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sun, 22 Mar 2026 22:47:01 +0000
Subject: [PATCH] Map: highlight pin when navigated from packet detail

Red circle marker with tooltip at the target coordinates,
fades out after 10 seconds. Makes it obvious where the
packet location is on the map.
---
 public/index.html |  2 +-
 public/map.js     | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index b0ece78e..0047178c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -86,7 +86,7 @@
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
   <script src="packets.js?v=1774219409"></script>
-  <script src="map.js?v=1774219409" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="map.js?v=1774219621" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774218049" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="traces.js?v=1774135052" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/map.js b/public/map.js
index b8982bfa..d7c897bf 100644
--- a/public/map.js
+++ b/public/map.js
@@ -139,6 +139,16 @@
     }
     map = L.map('leaflet-map', { zoomControl: true }).setView(initCenter, initZoom);
 
+    // Drop a highlight pin if navigated from a packet detail link
+    if (urlParams.get('lat') && urlParams.get('lon')) {
+      const pinLat = parseFloat(urlParams.get('lat'));
+      const pinLon = parseFloat(urlParams.get('lon'));
+      const pin = L.circleMarker([pinLat, pinLon], { radius: 12, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 0.3, weight: 2 }).addTo(map);
+      pin.bindTooltip(`${pinLat.toFixed(4)}, ${pinLon.toFixed(4)}`, { permanent: true, direction: 'top', offset: [0, -10] });
+      // Fade out pin after 10 seconds
+      setTimeout(() => { map.removeLayer(pin); }, 10000);
+    }
+
     const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
       (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
     const tileLayer = L.tileLayer(isDark ? TILE_DARK : TILE_LIGHT, {