// Atmosphere — Map view, Weather view, Setup view // All three pages share the same vertical narrative layout and glass palette. // ============ MAP VIEW ============ function MapView({ snapshot, hour, accent, location }) { // Pretty satellite/terrain-style map mockup with sun-bearing overlay. // Replace this whole inner SVG block with a Google Maps embed when a key // is available — see comment in atm-weather.js for the integration steps. const az = AtmData.azimuth(hour); const alt = AtmData.altitude(hour); const azRad = (az * Math.PI) / 180; // Sun direction line — from center (observer) outward in bearing direction const cx = 480, cy = 380; const len = 280; const sunX = cx + len * Math.sin(azRad); const sunY = cy - len * Math.cos(azRad); return (
Section 02 · Map
Where the sun is, where you are.
{location.label} · {location.lat}°N · {location.lon}°E
{/* Map mockup */} {/* Map base */} {/* Fake roads */} {/* Fake water */} {/* Fake parks/green */} {/* Buildings */} {Array.from({ length: 40 }).map((_, i) => { let s = (i * 9301 + 49297) % 233280; const r = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; const x = r() * 920 + 20; const y = r() * 680 + 20; const w = 6 + r() * 18; const h = 6 + r() * 18; return ; })} {/* Sun bearing visualization */} {alt > 0 && ( <> {/* Wedge — area of sky the sun is in */} {/* Ray */} {/* Sun disk */} {Math.round(az)}° · {AtmWeather.bearingLabel(az)} )} {/* Compass rose */} N {/* Scale bar */} 500 m {/* Observer pin */} YOU · {location.label} {/* Map controls overlay */}
{['Satellite', 'Terrain', 'Streets'].map((m, i) => (
{m}
))}
{/* Sun stats overlay (bottom-right) */}
Sun · right now
BEARING
{Math.round(az)}°
{AtmWeather.bearingLabel(az)}
ALTITUDE
{alt >= 0 ? '+' : ''}{Math.round(alt)}°
{alt > 0 ? 'ABOVE' : 'BELOW'}
{/* Placeholder banner */}
Map preview · Google Maps wires in via API key
); } // ============ WEATHER VIEW ============ function WeatherView({ snapshot, dataset, hour, virtualOffset, accent, station }) { const cond = snapshot.condition; const condLabel = AtmWeather.conditionLabel(cond); return ( <>
Section 02 · Weather
{condLabel}.
STATION · {station.id} · {snapshot.isHistory ? 'HISTORY' : snapshot.isForecast ? 'FORECAST' : 'OBSERVED'}
{/* Temp hero */}
Air temperature
{snapshot.airTemp.toFixed(1)}°C
{condLabel}
Feels like
{(snapshot.airTemp - snapshot.wind.speed * 0.15).toFixed(1)}°
Humidity
{snapshot.humidity}%
Pressure
{snapshot.pressure}hPa
In the sun
{snapshot.sunTemp.toFixed(1)}°C
Shade
{(snapshot.airTemp - 1.2).toFixed(1)}°C
Δ {(snapshot.sunTemp - snapshot.airTemp + 1.2).toFixed(1)}°C SUN VS SHADE
 Wind
{/* Stats grid */}
Section 03 · Station feed
All the numbers.
WU · {station.id}
0.1 ? 'Active' : 'Dry'} />
{/* 48h timeline — history left, forecast right */}
Section 04 · 48-Hour Timeline
Yesterday → tomorrow.
DRAG TO SCRUB · NOW MARKED
{/* Sunrise / sunset and daylight */}
Section 05 · Daylight
Sunrise · noon · sunset.
); } function StatCard({ label, value, unit, sub, accent }) { return ( {label}
{value}{unit}
{sub &&
{sub}
} ); } function WindCompass({ speed, dir, gust, accent }) { const r = 78; const dirRad = (dir * Math.PI) / 180; const arrowX = r * Math.sin(dirRad); const arrowY = -r * Math.cos(dirRad); return (
{['N', 'E', 'S', 'W'].map((d, i) => { const a = (i * 90 * Math.PI) / 180; const x = (r + 14) * Math.sin(a); const y = -(r + 14) * Math.cos(a); return {d}; })} {/* Ticks */} {Array.from({ length: 24 }).map((_, i) => { const a = (i / 24) * Math.PI * 2; const x1 = r * Math.sin(a), y1 = -r * Math.cos(a); const x2 = (r + (i % 6 === 0 ? 6 : 3)) * Math.sin(a), y2 = -(r + (i % 6 === 0 ? 6 : 3)) * Math.cos(a); return ; })} {/* Arrow showing wind FROM direction (rotates with dir) */}
{speed.toFixed(1)}
MPH
{AtmWeather.bearingLabel(dir)}
FROM
{gust.toFixed(0)}
GUST
); } function TimelineChart({ dataset, virtualOffset, accent }) { // 48h chart: x = offset (-24..+24), draw temp, rain bars, cloudiness band. const W = 1280, H = 240; const pad = 36; const xFor = (off) => pad + ((off + 24) / 48) * (W - pad * 2); const temps = dataset.map(d => d.airTemp); const tMin = Math.floor(Math.min(...temps) - 2); const tMax = Math.ceil(Math.max(...temps) + 2); const yForT = (t) => H - 60 - ((t - tMin) / (tMax - tMin)) * (H - 100); const cursorX = xFor(virtualOffset); // Build temp line const linePts = dataset.map(d => `${xFor(d.offset).toFixed(1)},${yForT(d.airTemp).toFixed(1)}`).join(' '); // Cloudiness band as filled area const cloudFill = dataset.map(d => `${xFor(d.offset).toFixed(1)},${(H - 60 - d.cloudiness * 30).toFixed(1)}`).join(' '); return (
{/* History/forecast split */} HISTORY · STATION FEED FORECAST · ECMWF {/* Cloudiness band */} {/* Rain bars */} {dataset.map((d, i) => { const x = xFor(d.offset); const w = (W - pad * 2) / 48 - 2; const h = Math.min(80, d.rain * 40); if (h < 1) return null; return ; })} {/* Temp line */} {/* Temp dots at notable points */} {dataset.filter((_, i) => i % 3 === 0).map((d, i) => ( {d.airTemp.toFixed(0)}° ))} {/* X-axis labels (hours from now) */} {[-24, -12, 0, 12, 24].map(off => ( {off === 0 ? 'NOW' : (off > 0 ? `+${off}H` : `${off}H`)} ))} {/* Now line */} {/* Cursor */}
); } function DaylightStrip({ hour, accent }) { const W = 1280, H = 100; const xFor = (h) => (h / 24) * W; // Day arc const noon = 13; const sunrise = 6.2; const sunset = 19.8; const cursorX = xFor(hour); return ( {/* Markers */} {[ { h: sunrise, l: 'SUNRISE', t: '06:14' }, { h: noon, l: 'SOLAR NOON', t: '13:01' }, { h: sunset, l: 'SUNSET', t: '19:48' }, ].map((m, i) => ( {m.l} {m.t} ))} {/* Hour ticks */} {Array.from({ length: 24 }).map((_, i) => ( ))} {/* Cursor */} ); } // ============ SETUP VIEW ============ function SetupView({ location, setLocation, station, setStation, accent }) { const [postcode, setPostcode] = React.useState(location.postcode || ''); const [stationId, setStationId] = React.useState(station.id || 'IEDENB52'); const [wuKey, setWuKey] = React.useState(station.apiKey || ''); const [mapsKey, setMapsKey] = React.useState(localStorage.getItem('atm.maps_api_key') || ''); const [units, setUnits] = React.useState(localStorage.getItem('atm.units') || 'metric'); const save = () => { setLocation({ ...location, postcode, label: postcode || location.label }); setStation({ id: stationId, apiKey: wuKey }); localStorage.setItem('atm.maps_api_key', mapsKey); localStorage.setItem('atm.units', units); }; return (
Section 02 · Setup
Point Atmosphere at your sky.
SAVED LOCALLY · NEVER LEAVES YOUR BROWSER
Your location
Postcode or place
USED FOR LATITUDE/LONGITUDE LOOKUP · SUN POSITION CALCULATION · GOOGLE MAPS CENTRING
Google Maps API key
ⓘ PLACEHOLDER · CODE HANDOFF · agents wire this into the embed URL.
Until then, the Map page renders a beautiful mockup.
Weather Underground
Your weather station
Station ID
DEFAULT · IEDENB52 · Replace with your PWS ID
WU API key
ⓘ PLACEHOLDER · CODE HANDOFF · agents wire this into
api.weather.com/v2/pws/observations/current
Until then, dummy hourly data drives the UI so the design is testable.
Units
{[['metric', 'Metric'], ['imperial', 'Imperial']].map(([k, l]) => ( ))}
Save settings
ALL VALUES STORED IN LOCALSTORAGE
); } function SetupInput({ value, onChange, placeholder, type = 'text', big, mono }) { return ( onChange(e.target.value)} placeholder={placeholder} style={{ width: '100%', marginTop: 10, padding: big ? '18px 18px' : '14px 16px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.16)', borderRadius: 10, color: '#fff', fontFamily: mono ? "'JetBrains Mono', monospace" : 'Geist, system-ui, sans-serif', fontSize: big ? 22 : 16, letterSpacing: mono ? 1 : 0, outline: 'none', }} /> ); } window.MapView = MapView; window.WeatherView = WeatherView; window.SetupView = SetupView;