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