fix: use actual timezone offsets in map tooltip
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
const MAP_SVG_SOURCE = 'assets/world_time_zones.svg';
|
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 mapContainer = document.getElementById('map-container');
|
||||||
const overlayEl = document.getElementById('map-overlay');
|
const overlayEl = document.getElementById('map-overlay');
|
||||||
@@ -52,9 +52,15 @@ function attachMapListeners(svg) {
|
|||||||
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);
|
||||||
const offsetMinutes = approximateOffsetMinutes(lon);
|
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() {
|
function handlePointerLeave() {
|
||||||
@@ -65,15 +71,22 @@ function attachMapListeners(svg) {
|
|||||||
const { x } = getRelativePoint(event);
|
const { x } = getRelativePoint(event);
|
||||||
const lon = normalizeLongitude(x, svg.viewBox.baseVal.width);
|
const lon = normalizeLongitude(x, svg.viewBox.baseVal.width);
|
||||||
const offsetMinutes = approximateOffsetMinutes(lon);
|
const offsetMinutes = approximateOffsetMinutes(lon);
|
||||||
const { offsetLabel, offsetMinutesRounded } = describeOffset(offsetMinutes);
|
const candidate = findTimezoneByOffset(offsetMinutes);
|
||||||
|
let labelToShow;
|
||||||
|
|
||||||
showOverlay(offsetLabel);
|
if (candidate) {
|
||||||
|
const suggestion = buildSuggestion(candidate);
|
||||||
const candidate = findTimezoneByOffset(offsetMinutesRounded);
|
labelToShow = `${suggestion.offsetLabel}`;
|
||||||
if (candidate && typeof addSelection === 'function') {
|
if (typeof addSelection === 'function') {
|
||||||
addSelection(candidate);
|
addSelection(candidate);
|
||||||
renderSelections();
|
renderSelections();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const { offsetLabel } = describeOffset(offsetMinutes);
|
||||||
|
labelToShow = offsetLabel;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showOverlay(labelToShow);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.addEventListener('pointermove', handlePointerMove);
|
svg.addEventListener('pointermove', handlePointerMove);
|
||||||
@@ -158,3 +171,15 @@ function findTimezoneByOffset(targetOffsetMinutes) {
|
|||||||
|
|
||||||
return bestCandidate;
|
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')}`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user