feat: add svg hover highlight

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;

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) {