29:null 2a:["$","title",null,{"children":"World Position and Time Zones Input | Lao | Observable"}] 2f:T2423,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; }30:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1767494116337.558,"size":545534},{"id":"5ee3cc5cda9ebaaf1593361349c08ff99d8d6a7743cee7d83116968df685c6595a6b4ffac715ca1c60760a9ce3da090b9940d3b52c167e62cf4d22b2264d0922","href":"https://static.observableusercontent.com/files/5ee3cc5cda9ebaaf1593361349c08ff99d8d6a7743cee7d83116968df685c6595a6b4ffac715ca1c60760a9ce3da090b9940d3b52c167e62cf4d22b2264d0922","name":"timezones.json","type":"application/json","lastModified":1767494116337.558,"size":786565}] 2d:{"id":"fe76f453555a0d6a","slug":null,"title":"World Position and Time Zones Input","thumbnail":"a35133c44a19ddd8a05c8caf8de56ebe665b6cfc837bb26d20c065f012047bf8","access_level":"public","create_time":"$D2026-01-04T02:35:16.337Z","update_time":"$D2026-01-12T04:02:04.610Z","view_time":null,"first_public_time":"$D2026-01-04T02:40:15.680Z","fork":{"id":"df60fbc8a63a74c4","slug":"time-zones","title":"Time Zones","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":8,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":239,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"World Position and Time Zones Input","cells":[{"id":0,"value":"# World Position and Time Zones Input\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"location","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"## Assets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"timezones = FileAttachment(\"timezones.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"land = FileAttachment(\"land-50m.json\").json().then(topology => topojson.feature(topology, topology.objects.land))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"## Credit\nData: [Natural Earth](https://gist.github.com/mbostock/f0ae25cf1f057d443ca903277e3eb330)
\nFork: [Time Zones](https://observablehq.com/@mbostock/time-zones)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"