feat: add interactive map prototype
This commit is contained in:
Your Name
1833
assets/world_time_zones.svg
Normal file
1833
assets/world_time_zones.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 939 KiB |
168
index-map.html
Normal file
168
index-map.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Weltze.it — Alle Zeitzonen im Blick</title>
|
||||
<meta name="theme-color" content="#0f172a">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
.layout {
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
.map-panel {
|
||||
background: var(--panel-background);
|
||||
border: var(--border-thickness) solid var(--panel-border);
|
||||
border-radius: 18px;
|
||||
padding: clamp(1.2rem, 4vw, 1.8rem);
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: var(--panel-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.map-panel header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.map-panel h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.map-panel p {
|
||||
color: var(--text-color-alt);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.map-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 12 / 5;
|
||||
border: var(--border-thickness) solid var(--panel-border);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: var(--background-color-alt);
|
||||
}
|
||||
.map-container svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.85);
|
||||
text-shadow: 0 3px 12px rgba(0,0,0,0.4);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.map-overlay.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.map-tooltip {
|
||||
position: absolute;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
color: #f8fafc;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -120%);
|
||||
white-space: pre;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.map-tooltip.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.layout {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
.map-panel {
|
||||
order: 2;
|
||||
}
|
||||
.comparisons {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="manifest" href="manifest.webmanifest">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png">
|
||||
<link rel="apple-touch-icon" href="icons/icon-192.png">
|
||||
<script defer src="https://umami.due.ren/script.js" data-website-id="4692d3ad-c36a-4fb9-a7f0-182a8fe72a0b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="brand">
|
||||
<h1>weltze.it</h1>
|
||||
<p>Alle Zeitzonen auf den ersten Blick.</p>
|
||||
</div>
|
||||
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Dunklen Modus umschalten">
|
||||
<span class="theme-toggle-icon" aria-hidden="true">☾</span>
|
||||
<span class="theme-toggle-label">Dunkler Modus</span>
|
||||
</button>
|
||||
<div class="local-time">
|
||||
<h2>Deine aktuelle Zeit</h2>
|
||||
<div id="local-time" class="time-display">--:--</div>
|
||||
<div id="local-date" class="date-display"></div>
|
||||
<div id="local-zone" class="zone-display"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="layout">
|
||||
<section class="search-panel">
|
||||
<h3>Finde eine Stadt oder Zeitzone</h3>
|
||||
<label for="search-input" class="visually-hidden">Suche Stadt, Land oder Zeitzone</label>
|
||||
<input id="search-input" class="search-input" type="search" placeholder="Suche nach Städten, Ländern oder Zeitzonen…" autocomplete="off">
|
||||
<div id="search-results" class="search-results"></div>
|
||||
<div class="tips">
|
||||
<strong>Tipp:</strong> Füge mehrere Orte hinzu, um Abweichungen direkt zu vergleichen.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="map-panel">
|
||||
<header>
|
||||
<h3>Interaktive Zeitzonen-Karte (Prototyp)</h3>
|
||||
<p>Tippe auf einen Punkt der Karte, um die nächstgelegene Zeitzone zu übernehmen. Die Karte verwendet das Wikimedia-Weltzeit-Zonen-SVG.</p>
|
||||
</header>
|
||||
<div id="map-container" class="map-container">
|
||||
<div class="map-overlay" id="map-overlay">UTC±00:00</div>
|
||||
<div class="map-tooltip" id="map-tooltip"></div>
|
||||
</div>
|
||||
<p class="map-disclaimer">Quelle: <a href="https://en.wikipedia.org/wiki/Time_zone">Wikipedia – Time zone</a> · Lizenz: CC-BY-SA 4.0</p>
|
||||
</section>
|
||||
|
||||
<section class="comparisons">
|
||||
<header class="comparisons-header">
|
||||
<h3>Ausgewählte Orte</h3>
|
||||
<button id="reset-button" class="reset-button" type="button">Nur lokalen Ort behalten</button>
|
||||
</header>
|
||||
<div class="table-headings">
|
||||
<div>Ort</div>
|
||||
<div>Aktuelle Zeit</div>
|
||||
<div>Abweichung zur lokalen Zeit</div>
|
||||
</div>
|
||||
<ul id="selection-list" class="selection-list"></ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p><a href="https://git.due.ren/andreas/weltze.it">Ein Open‑Source‑Projekt</a> von <a href="https://andreas.due.ren">Andreas Düren</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="zones.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<script src="map-prototype.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
160
map-prototype.js
Normal file
160
map-prototype.js
Normal file
@@ -0,0 +1,160 @@
|
||||
const MAP_SVG_SOURCE = 'assets/world_time_zones.svg';
|
||||
const OFFSET_PRECISION = 15; // Minuten-Schrittweite
|
||||
|
||||
const mapContainer = document.getElementById('map-container');
|
||||
const overlayEl = document.getElementById('map-overlay');
|
||||
const tooltipEl = document.getElementById('map-tooltip');
|
||||
|
||||
if (mapContainer) {
|
||||
loadMap();
|
||||
}
|
||||
|
||||
function loadMap() {
|
||||
fetch(MAP_SVG_SOURCE)
|
||||
.then((response) => response.text())
|
||||
.then((svgText) => {
|
||||
mapContainer.insertAdjacentHTML('afterbegin', svgText);
|
||||
const svg = mapContainer.querySelector('svg');
|
||||
if (!svg) {
|
||||
throw new Error('SVG nicht gefunden.');
|
||||
}
|
||||
|
||||
svg.setAttribute('viewBox', '0 0 3600 1500');
|
||||
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||||
svg.style.width = '100%';
|
||||
svg.style.height = '100%';
|
||||
|
||||
attachMapListeners(svg);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Karte konnte nicht geladen werden:', error);
|
||||
mapContainer.innerHTML = '<p>Die Zeitzonenkarte konnte nicht geladen werden.</p>';
|
||||
});
|
||||
}
|
||||
|
||||
function attachMapListeners(svg) {
|
||||
const svgPoint = svg.createSVGPoint();
|
||||
|
||||
function getRelativePoint(event) {
|
||||
svgPoint.x = event.clientX;
|
||||
svgPoint.y = event.clientY;
|
||||
const ctm = svg.getScreenCTM();
|
||||
if (!ctm) {
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
const inverse = ctm.inverse();
|
||||
const transformed = svgPoint.matrixTransform(inverse);
|
||||
return { x: transformed.x, y: transformed.y };
|
||||
}
|
||||
|
||||
function handlePointerMove(event) {
|
||||
const { x, y } = getRelativePoint(event);
|
||||
const lon = normalizeLongitude(x, svg.viewBox.baseVal.width);
|
||||
const lat = normalizeLatitude(y, svg.viewBox.baseVal.height);
|
||||
const offsetMinutes = approximateOffsetMinutes(lon);
|
||||
const { offsetLabel } = describeOffset(offsetMinutes);
|
||||
|
||||
positionTooltip(event.clientX, event.clientY, `${offsetLabel}\n${formatCoordinate(lat, lon)}`);
|
||||
}
|
||||
|
||||
function handlePointerLeave() {
|
||||
tooltipEl?.classList.remove('visible');
|
||||
}
|
||||
|
||||
function handleClick(event) {
|
||||
const { x } = getRelativePoint(event);
|
||||
const lon = normalizeLongitude(x, svg.viewBox.baseVal.width);
|
||||
const offsetMinutes = approximateOffsetMinutes(lon);
|
||||
const { offsetLabel, offsetMinutesRounded } = describeOffset(offsetMinutes);
|
||||
|
||||
showOverlay(offsetLabel);
|
||||
|
||||
const candidate = findTimezoneByOffset(offsetMinutesRounded);
|
||||
if (candidate && typeof addSelection === 'function') {
|
||||
addSelection(candidate);
|
||||
renderSelections();
|
||||
}
|
||||
}
|
||||
|
||||
svg.addEventListener('pointermove', handlePointerMove);
|
||||
svg.addEventListener('pointerleave', handlePointerLeave);
|
||||
svg.addEventListener('click', handleClick);
|
||||
}
|
||||
|
||||
function normalizeLongitude(x, width) {
|
||||
const clampedWidth = width || 3600;
|
||||
return (x / clampedWidth) * 360 - 180;
|
||||
}
|
||||
|
||||
function normalizeLatitude(y, height) {
|
||||
const clampedHeight = height || 1500;
|
||||
return 90 - (y / clampedHeight) * 180;
|
||||
}
|
||||
|
||||
function approximateOffsetMinutes(longitude) {
|
||||
const offsetHours = Math.round((longitude / 15) * (60 / OFFSET_PRECISION)) * (OFFSET_PRECISION / 60);
|
||||
const clampedHours = Math.min(14, Math.max(-12, offsetHours));
|
||||
return Math.round(clampedHours * 60);
|
||||
}
|
||||
|
||||
function describeOffset(offsetMinutes) {
|
||||
const clamped = Math.round(offsetMinutes / OFFSET_PRECISION) * OFFSET_PRECISION;
|
||||
const hours = Math.trunc(clamped / 60);
|
||||
const minutes = Math.abs(clamped % 60);
|
||||
const sign = clamped >= 0 ? '+' : '-';
|
||||
return {
|
||||
offsetMinutesRounded: clamped,
|
||||
offsetLabel: `UTC${sign}${String(Math.abs(hours)).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
|
||||
};
|
||||
}
|
||||
|
||||
function positionTooltip(clientX, clientY, text) {
|
||||
if (!tooltipEl) {
|
||||
return;
|
||||
}
|
||||
const containerRect = mapContainer.getBoundingClientRect();
|
||||
tooltipEl.textContent = text;
|
||||
tooltipEl.style.left = `${clientX - containerRect.left}px`;
|
||||
tooltipEl.style.top = `${clientY - containerRect.top}px`;
|
||||
tooltipEl.classList.add('visible');
|
||||
}
|
||||
|
||||
let overlayTimeoutId = null;
|
||||
function showOverlay(text) {
|
||||
if (!overlayEl) {
|
||||
return;
|
||||
}
|
||||
overlayEl.textContent = text;
|
||||
overlayEl.classList.add('visible');
|
||||
if (overlayTimeoutId) {
|
||||
clearTimeout(overlayTimeoutId);
|
||||
}
|
||||
overlayTimeoutId = window.setTimeout(() => {
|
||||
overlayEl?.classList.remove('visible');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function formatCoordinate(lat, lon) {
|
||||
const formatValue = (value, positiveSuffix, negativeSuffix) => {
|
||||
const suffix = value >= 0 ? positiveSuffix : negativeSuffix;
|
||||
return `${Math.abs(value).toFixed(1)}°${suffix}`;
|
||||
};
|
||||
return `${formatValue(lat, 'N', 'S')} · ${formatValue(lon, 'E', 'W')}`;
|
||||
}
|
||||
|
||||
function findTimezoneByOffset(targetOffsetMinutes) {
|
||||
const now = new Date();
|
||||
let bestCandidate = null;
|
||||
let bestDelta = Infinity;
|
||||
|
||||
SORTED_TIMEZONE_DATA.forEach((entry) => {
|
||||
const offset = getOffsetMinutes(now, entry.timeZone);
|
||||
const delta = Math.abs(offset - targetOffsetMinutes);
|
||||
if (delta < bestDelta) {
|
||||
bestDelta = delta;
|
||||
bestCandidate = entry;
|
||||
}
|
||||
});
|
||||
|
||||
return bestCandidate;
|
||||
}
|
||||
Reference in New Issue
Block a user