diff --git a/map-prototype.js b/map-prototype.js index 9f0b006..3855009 100644 --- a/map-prototype.js +++ b/map-prototype.js @@ -1,5 +1,5 @@ const MAP_SVG_SOURCE = 'assets/world_time_zones.svg'; -const OFFSET_PRECISION = 15; // Minuten-Schrittweite +const OFFSET_PRECISION = 30; // Minuten-Schrittweite const mapContainer = document.getElementById('map-container'); const overlayEl = document.getElementById('map-overlay'); @@ -52,9 +52,15 @@ function attachMapListeners(svg) { const lon = normalizeLongitude(x, svg.viewBox.baseVal.width); const lat = normalizeLatitude(y, svg.viewBox.baseVal.height); const offsetMinutes = approximateOffsetMinutes(lon); - const { offsetLabel } = describeOffset(offsetMinutes); + const candidate = findTimezoneByOffset(offsetMinutes); - positionTooltip(event.clientX, event.clientY, `${offsetLabel}\n${formatCoordinate(lat, lon)}`); + if (candidate) { + const suggestion = buildSuggestion(candidate); + positionTooltip(event.clientX, event.clientY, `${suggestion.offsetLabel}\n${candidate.name}`); + } else { + const { offsetLabel } = describeOffset(offsetMinutes); + positionTooltip(event.clientX, event.clientY, `${offsetLabel}\n${formatCoordinate(lat, lon)}`); + } } function handlePointerLeave() { @@ -65,15 +71,22 @@ function attachMapListeners(svg) { const { x } = getRelativePoint(event); const lon = normalizeLongitude(x, svg.viewBox.baseVal.width); const offsetMinutes = approximateOffsetMinutes(lon); - const { offsetLabel, offsetMinutesRounded } = describeOffset(offsetMinutes); + const candidate = findTimezoneByOffset(offsetMinutes); + let labelToShow; - showOverlay(offsetLabel); - - const candidate = findTimezoneByOffset(offsetMinutesRounded); - if (candidate && typeof addSelection === 'function') { - addSelection(candidate); - renderSelections(); + if (candidate) { + const suggestion = buildSuggestion(candidate); + labelToShow = `${suggestion.offsetLabel}`; + if (typeof addSelection === 'function') { + addSelection(candidate); + renderSelections(); + } + } else { + const { offsetLabel } = describeOffset(offsetMinutes); + labelToShow = offsetLabel; } + + showOverlay(labelToShow); } svg.addEventListener('pointermove', handlePointerMove); @@ -158,3 +171,15 @@ function findTimezoneByOffset(targetOffsetMinutes) { return bestCandidate; } + +function buildSuggestion(entry) { + const now = new Date(); + const offsetMinutes = getOffsetMinutes(now, entry.timeZone); + const hours = Math.trunc(offsetMinutes / 60); + const minutes = Math.abs(offsetMinutes % 60); + const sign = offsetMinutes >= 0 ? '+' : '-'; + return { + offsetMinutes, + offsetLabel: `UTC${sign}${String(Math.abs(hours)).padStart(2, '0')}:${String(minutes).padStart(2, '0')}` + }; +}