andreas/weltze.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add svg hover highlight

Browse Source
This commit is contained in:
Your Name
2025-10-14 08:26:54 -06:00
parent 9bb7ae7213
commit cfe891f6b0
2 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index-map.html
View File

@@ -52,6 +52,9 @@
height: 100%; height: 100%;
cursor: crosshair; cursor: crosshair;
} }
.map-container svg .hover-highlight {
filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.75));
}
.map-overlay { .map-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;

15
map-prototype.js
View File

@@ -244,6 +244,7 @@ function resolveEntryFromElement(element) {
if (!candidate) { if (!candidate) {
return null; return null;
} }
lastHoveredElement = candidate;
const classAttr = candidate.getAttribute('class'); const classAttr = candidate.getAttribute('class');
if (!classAttr) { if (!classAttr) {
return null; return null;
@@ -259,6 +260,8 @@ function resolveEntryFromElement(element) {
return null; return null;
} }
let lastHoveredElement = null;
function loadMap() { function loadMap() {
fetch(MAP_SVG_SOURCE) fetch(MAP_SVG_SOURCE)
.then((response) => response.text()) .then((response) => response.text())
@@ -285,6 +288,13 @@ function loadMap() {
function attachMapListeners(svg) { function attachMapListeners(svg) {
const svgPoint = svg.createSVGPoint(); const svgPoint = svg.createSVGPoint();
function clearHighlight() {
if (lastHoveredElement) {
lastHoveredElement.classList.remove('hover-highlight');
lastHoveredElement = null;
}
}
function getRelativePoint(event) { function getRelativePoint(event) {
svgPoint.x = event.clientX; svgPoint.x = event.clientX;
svgPoint.y = event.clientY; svgPoint.y = event.clientY;
@@ -301,7 +311,11 @@ function attachMapListeners(svg) {
const { x, y } = getRelativePoint(event); const { x, y } = getRelativePoint(event);
const lon = normalizeLongitude(x, svg.viewBox.baseVal.width); const lon = normalizeLongitude(x, svg.viewBox.baseVal.width);
const lat = normalizeLatitude(y, svg.viewBox.baseVal.height); const lat = normalizeLatitude(y, svg.viewBox.baseVal.height);
clearHighlight();
const classEntry = resolveEntryFromElement(event.target); const classEntry = resolveEntryFromElement(event.target);
if (lastHoveredElement) {
lastHoveredElement.classList.add('hover-highlight');
}
if (classEntry) { if (classEntry) {
const suggestion = buildSuggestion(classEntry); const suggestion = buildSuggestion(classEntry);
positionTooltip(event.clientX, event.clientY, `${suggestion.offsetLabel}\n${classEntry.name}`); positionTooltip(event.clientX, event.clientY, `${suggestion.offsetLabel}\n${classEntry.name}`);
@@ -322,6 +336,7 @@ function attachMapListeners(svg) {
function handlePointerLeave() { function handlePointerLeave() {
tooltipEl?.classList.remove('visible'); tooltipEl?.classList.remove('visible');
clearHighlight();
} }
function handleClick(event) { function handleClick(event) {