From cfe891f6b030f9eced11fb6b3c743d8896dec694 Mon Sep 17 00:00:00 2001
From: Your Name <youremail@example.com>
Date: Tue, 14 Oct 2025 08:26:54 -0600
Subject: [PATCH] feat: add svg hover highlight

---
 index-map.html   |  3 +++
 map-prototype.js | 15 +++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/index-map.html b/index-map.html
index ac49c15..aa74dd2 100644
--- a/index-map.html
+++ b/index-map.html
@@ -52,6 +52,9 @@
       height: 100%;
       cursor: crosshair;
     }
+    .map-container svg .hover-highlight {
+      filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.75));
+    }
     .map-overlay {
       position: absolute;
       inset: 0;
diff --git a/map-prototype.js b/map-prototype.js
index 40b2344..32b6436 100644
--- a/map-prototype.js
+++ b/map-prototype.js
@@ -244,6 +244,7 @@ function resolveEntryFromElement(element) {
   if (!candidate) {
     return null;
   }
+  lastHoveredElement = candidate;
   const classAttr = candidate.getAttribute('class');
   if (!classAttr) {
     return null;
@@ -259,6 +260,8 @@ function resolveEntryFromElement(element) {
   return null;
 }
 
+let lastHoveredElement = null;
+
 function loadMap() {
   fetch(MAP_SVG_SOURCE)
     .then((response) => response.text())
@@ -285,6 +288,13 @@ function loadMap() {
 function attachMapListeners(svg) {
   const svgPoint = svg.createSVGPoint();
 
+  function clearHighlight() {
+    if (lastHoveredElement) {
+      lastHoveredElement.classList.remove('hover-highlight');
+      lastHoveredElement = null;
+    }
+  }
+
   function getRelativePoint(event) {
     svgPoint.x = event.clientX;
     svgPoint.y = event.clientY;
@@ -301,7 +311,11 @@ function attachMapListeners(svg) {
     const { x, y } = getRelativePoint(event);
     const lon = normalizeLongitude(x, svg.viewBox.baseVal.width);
     const lat = normalizeLatitude(y, svg.viewBox.baseVal.height);
+    clearHighlight();
     const classEntry = resolveEntryFromElement(event.target);
+    if (lastHoveredElement) {
+      lastHoveredElement.classList.add('hover-highlight');
+    }
     if (classEntry) {
       const suggestion = buildSuggestion(classEntry);
       positionTooltip(event.clientX, event.clientY, `${suggestion.offsetLabel}\n${classEntry.name}`);
@@ -322,6 +336,7 @@ function attachMapListeners(svg) {
 
   function handlePointerLeave() {
     tooltipEl?.classList.remove('visible');
+    clearHighlight();
   }
 
   function handleClick(event) {