29:null 2a:["$","title",null,{"children":"Your Sunset, Their Sunrise | Observable Ambassadors | Observable"}] 2f:T15ff,/** * Location controls: latitude/longitude sliders, a "Re-center" button * that restores the initial (geolocated or Greenwich-fallback) position, * and a live UTC clock for context. * * Exposes latSlider/lonSlider as reactive generators (via Generators.input) * that the rest of the notebook (see cell defining userLat/userLon) reads * to recompute the paired sunrise/sunset points whenever the user drags a * slider or clicks Re-center. */ // Latitude range for which the paired simultaneous sunset/sunrise points // actually exist on this date. Beyond a certain latitude, the sun never // rises or sets at all today (polar day or polar night) — there's no // sunrise/sunset event to pair up. That cutoff latitude is // 90° − |today's solar declination|: the further the sun's declination // is from the equator (i.e. the closer today is to a solstice), the // smaller the polar region, and the LOWER this cutoff latitude is; // near an equinox (declination ≈ 0°), the cutoff sits close to 90° // (only the poles themselves are affected). // horizonLongitudes() returns null past that cutoff. A safety margin // (see polarBoundarySafetyMarginDeg, shared with the validation cell) // keeps the slider away from that boundary — not just to avoid the // exact degenerate point (where the paired points would collapse onto // the user's own location), but because SunCalc's per-UTC-day // computation can flip to "no sunrise/sunset today" for a real UTC // calendar day within a degree or two of the boundary even though the // geometric model still predicts a short-but-real day/night cycle (see // polarBoundarySafetyMarginDeg's comment for why). Without this margin, // the slider could let you select a latitude whose displayed times come // back "n/a" despite validation passing. const declForLimit = solarDeclination(today); const latLimitRaw = 90 - Math.abs(declForLimit); const latLimit = Math.max(0, Math.round((latLimitRaw - polarBoundarySafetyMarginDeg) * 10) / 10); // Starting slider values: the user's detected (or Greenwich-fallback) // position, clamped to the valid latitude range above. Also remembered // so the Re-center button can jump back to them later. const initialLat = Math.max(-latLimit, Math.min(latLimit, userPosition.lat)); const initialLon = userPosition.lon; const latInput = Inputs.range([-latLimit, latLimit], { value: initialLat, step: 0.1, label: "Latitude (°)" }); const lonInput = Inputs.range([-180, 180], { value: initialLon, step: 0.1, label: "Longitude (°)" }); /** * Inputs.range() renders as a

wrapping a paired * + (kept in sync with each * other internally). Setting `.value` on the outer element alone * does NOT reliably propagate to the underlying pair or notify * Generators.input listeners — so instead, to programmatically change a * range input (as the Re-center button below does), we must set `.value` * on both child elements directly and dispatch an "input" event * on each, mimicking what happens when a user actually drags the slider. * * CAUTION: don't call this from a cell that also reads the corresponding * latSlider/lonSlider reactive value — doing so creates a feedback loop * (the cell re-runs when the slider changes, which re-triggers this * function, which changes the slider again, forever). */ function setRangeValue(container, value) { for (const el of container.querySelectorAll("input")) { el.value = value; el.dispatchEvent(new Event("input", { bubbles: true })); } } // Re-center: jump both sliders back to the original starting location. const recenterButton = html``; recenterButton.onclick = () => { setRangeValue(latInput, initialLat); setRangeValue(lonInput, initialLon); }; // Live UTC clock, shown alongside the location controls for context, // since all sunrise/sunset times in this notebook are displayed in UTC. // Ticks independently of the reactive graph (plain setInterval), and // cleans itself up via `invalidation` if this cell re-runs or is removed. const utcClock = html``; function updateUtcClock() { utcClock.textContent = new Date().toISOString().slice(0, 19).replace("T", " ") + " UTC"; } updateUtcClock(); const utcClockInterval = setInterval(updateUtcClock, 1000); invalidation.then(() => clearInterval(utcClockInterval)); const controls = html`

${latInput}${lonInput}${recenterButton}

Time: ${utcClock}

`; display(controls); // Explanatory caption, shown just below the controls, so it's clear why // the latitude slider stops well short of ±90° — and why that exact // number changes from day to day as the sun's declination changes // through the year. const latLimitCaption = html`

Latitude is capped at ±${latLimit}° today: beyond that, this latitude sees the midnight sun or polar night (no sunrise/sunset to pair up), since today's sun is only ${Math.abs(declForLimit).toFixed(1)}° from directly over the equator — the cutoff is 90° − ${Math.abs(declForLimit).toFixed(1)}°, minus a ${polarBoundarySafetyMarginDeg}° safety margin.

`; display(latLimitCaption); // Reactive slider values: re-emit whenever the user drags a slider or // Re-center reprograms the underlying elements (see // setRangeValue above). const latSlider = Generators.input(latInput); const lonSlider = Generators.input(lonInput); 30:T1122,/** * Map-view toggle: a small custom on/off switch choosing between the * rotatable 3D globe (orthographic projection) and a flat Mercator map * (which shows the user's pin and both paired sunrise/sunset points at * once, without needing to rotate). Defaults to the flat map (switch * off/left), since it's the easier view for seeing all three points * simultaneously; the globe is the "on"/right side of the switch. A * toggle switch (rather than Inputs.radio) was chosen since there are * exactly two mutually exclusive options — it reads more like a physical * on/off switch than a list of choices. * * Layout: "🗺️ Flat map" (left) — switch — "🌐 Globe" (right), matching * the switch's off=left/on=right motion: off (default) = flat map, * on = globe. `mapToggleInput.checked` therefore means "globe is * active", i.e. the OPPOSITE of `isFlatMap` (see below). * * Built as a plain checkbox (for keyboard-accessibility) with a * custom-styled visual track+knob overlay, rather than relying on CSS * :checked+sibling selectors (which would require a global