viewof location = { // CONFIGURATION // ========================================================================== // Layout const mapWidth = width; // Default Location (Denver, CO, USA) const defaultLongitude = -104.99; const defaultLatitude = 39.74; const defaultTimezone = "UTC-07:00"; // Styling const styles = { ocean: { color: "#D1E3EB", opacity: 1 }, land: { color: "#FCF8E5", opacity: 1 }, graticule: { color: "#000", opacity: 0.07 }, timezone: { color: "red", opacity: 0.2 }, userLocation: { color: "red", radius: 4, blendMode: "multiply" }, outline: { color: "#000", width: 1 } }; // PROJECTION SETUP // ========================================================================== const projection = d3.geoNaturalEarth1(); const path = d3.geoPath(projection); const outline = { type: "Sphere" }; // Calculate dimensions based on projection const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(mapWidth, outline)).bounds(outline); const dy = Math.ceil(y1 - y0); const l = Math.min(Math.ceil(x1 - x0), dy); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); const height = dy; // DATA PROCESSING // ========================================================================== const zones = topojson.feature(timezones, timezones.objects.timezones).features; const landData = land; const graticule = d3.geoGraticule().stepMinor([15, 10])(); // Build sorted timezone list const timezoneList = Array.from(new Set(zones.map(z => z.properties.time_zone))) .sort((a, b) => { const extractOffset = (tz) => { const match = tz.match(/UTC([+-])(\d+):(\d+)/); if (!match) return 0; const sign = match[1] === '+' ? 1 : -1; return sign * (parseInt(match[2]) + parseInt(match[3]) / 60); }; return extractOffset(a) - extractOffset(b); }); // STATE // ========================================================================== let currentLongitude = defaultLongitude; let currentLatitude = defaultLatitude; let currentTimezone = defaultTimezone; let isDragging = false; let animationFrameId = null; // HELPER FUNCTIONS // ========================================================================== function findTimezoneAtPoint(lon, lat) { const point = [lon, lat]; for (const zone of zones) { if (d3.geoContains(zone, point)) { return zone.properties.time_zone; } } return currentTimezone; } function clampCoords(lon, lat) { return [ Math.max(-180, Math.min(180, lon)), Math.max(-90, Math.min(90, lat)) ]; } // UI ELEMENTS // ========================================================================== const container = html`

`; // Input controls const getLocationBtn = html``; const lonInput = html``; const latInput = html``; const tzSelect = html``; const inputRow = html`

${getLocationBtn} Longitude: ${lonInput} Latitude: ${latInput} Timezone: ${tzSelect}

`; // SVG MAP // ========================================================================== const svg = d3.create("svg") .attr("viewBox", `0 0 ${mapWidth} ${height}`) .attr("width", mapWidth) .style("display", "block") .style("cursor", "crosshair"); // Ocean background svg.append("path") .datum(outline) .attr("d", path) .attr("fill", styles.ocean.color) .attr("fill-opacity", styles.ocean.opacity); // Land svg.append("path") .datum(landData) .attr("d", path) .attr("fill", styles.land.color) .attr("fill-opacity", styles.land.opacity) .attr("pointer-events", "none"); // Graticule svg.append("path") .datum(graticule) .attr("d", path) .attr("stroke", styles.graticule.color) .attr("stroke-opacity", styles.graticule.opacity) .attr("fill", "none") .attr("pointer-events", "none"); // Timezone zones (rendered on top of land, styled dynamically) const zoneElements = svg.selectAll(".zone") .data(zones) .join("path") .attr("class", "zone") .attr("d", path) .attr("stroke", "none"); // Outline svg.append("path") .datum(outline) .attr("d", path) .attr("fill", "none") .attr("stroke", styles.outline.color) .attr("stroke-width", styles.outline.width) .attr("pointer-events", "none"); // User location marker const dotElement = svg.append("circle") .attr("r", styles.userLocation.radius) .attr("fill", styles.userLocation.color) .style("mix-blend-mode", styles.userLocation.blendMode) .attr("pointer-events", "none"); // UPDATE FUNCTIONS // ========================================================================== function updateMapVisuals() { // Highlight selected timezone zoneElements .attr("fill", d => d.properties.time_zone === currentTimezone ? styles.timezone.color : "none") .attr("fill-opacity", d => d.properties.time_zone === currentTimezone ? styles.timezone.opacity : 0); // Position user marker const coords = projection([currentLongitude, currentLatitude]); if (coords) { dotElement.attr("cx", coords[0]).attr("cy", coords[1]); } } function updateValue() { container.value = { longitude: currentLongitude, latitude: currentLatitude, timezone: currentTimezone }; container.dispatchEvent(new CustomEvent("input")); } function scheduleUpdate() { if (animationFrameId) return; animationFrameId = requestAnimationFrame(() => { updateMapVisuals(); updateValue(); animationFrameId = null; }); } function updateInputs() { lonInput.value = currentLongitude.toFixed(2); latInput.value = currentLatitude.toFixed(2); tzSelect.value = currentTimezone; } function setLocation(lon, lat, updateTz = true) { [currentLongitude, currentLatitude] = clampCoords(lon, lat); if (updateTz) { currentTimezone = findTimezoneAtPoint(currentLongitude, currentLatitude); } updateInputs(); scheduleUpdate(); } // EVENT HANDLERS // ========================================================================== // Map interaction function handleMapInteraction(event) { const [x, y] = d3.pointer(event); const coords = projection.invert([x, y]); if (coords) { setLocation(coords[0], coords[1]); } } svg.on("mousedown", (event) => { isDragging = true; handleMapInteraction(event); }); svg.on("mousemove", (event) => { if (isDragging) handleMapInteraction(event); }); svg.on("mouseup", () => { isDragging = false; }); svg.on("mouseleave", () => { isDragging = false; }); svg.on("click", (event) => { if (!isDragging) handleMapInteraction(event); }); // Input controls lonInput.addEventListener("input", () => { const val = parseFloat(lonInput.value); if (!isNaN(val)) setLocation(val, currentLatitude); }); latInput.addEventListener("input", () => { const val = parseFloat(latInput.value); if (!isNaN(val)) setLocation(currentLongitude, val); }); tzSelect.addEventListener("change", () => { currentTimezone = tzSelect.value; scheduleUpdate(); }); // Timezone dropdown looping tzSelect.addEventListener("keydown", (event) => { const idx = tzSelect.selectedIndex; const max = tzSelect.options.length - 1; if (event.key === "ArrowDown" && idx === max) { event.preventDefault(); tzSelect.selectedIndex = 0; currentTimezone = tzSelect.value; scheduleUpdate(); } else if (event.key === "ArrowUp" && idx === 0) { event.preventDefault(); tzSelect.selectedIndex = max; currentTimezone = tzSelect.value; scheduleUpdate(); } }); // Geolocation button getLocationBtn.addEventListener("click", () => { if (!navigator.geolocation) return; getLocationBtn.disabled = true; navigator.geolocation.getCurrentPosition( (pos) => { setLocation(pos.coords.longitude, pos.coords.latitude); getLocationBtn.disabled = false; }, (err) => { console.error("Geolocation error:", err.message); getLocationBtn.disabled = false; } ); }); // INITIALIZATION // ========================================================================== container.appendChild(inputRow); container.appendChild(svg.node()); updateMapVisuals(); updateValue(); return container; }