/* Live weather radar overlay — runs in the player's iframe (same-origin, external per CSP). CARTO dark basemap + animated RainViewer radar + live NWS warning polygons. All inputs come from the URL query string; all network is via https (CSP allows it). */ (function () { 'use strict'; var q = new URLSearchParams(location.search); var lat = parseFloat(q.get('lat')); if (!isFinite(lat)) lat = 39.5; var lon = parseFloat(q.get('lon')); if (!isFinite(lon)) lon = -98.35; var zoom = parseInt(q.get('zoom'), 10); if (!isFinite(zoom)) zoom = 8; var area = (q.get('area') || '').trim(); var states = (q.get('states') || '').split(',').map(function (s) { return s.trim().toUpperCase(); }).filter(Boolean); var DEFAULT_EVENTS = ['Tornado Warning', 'Severe Thunderstorm Warning', 'Flash Flood Warning', 'Flood Warning']; var events = (q.get('events') || '').split(',').map(function (s) { return s.trim(); }).filter(Boolean); if (!events.length) events = DEFAULT_EVENTS.slice(); // How far the auto-framing is ever allowed to pull back, expressed in county-widths from // the configured centre. Without this, a warning several counties away drags the frame // out to cover it and your own area shrinks to nothing — the map ends up showing half a // state at a zoom where local weather is unreadable. 2 counties in every direction keeps // "where I am" recognisable while still catching storms about to arrive. var maxCounties = parseFloat(q.get('maxcounties')); if (!isFinite(maxCounties) || maxCounties <= 0) maxCounties = 2; var COUNTY_DEG = 0.35; // ~24 mi, a typical US county var MIN_HALF_LAT = 0.18; // ~12 mi; a floor so one small cell can't over-zoom var EVENT_COLORS = { 'Tornado Warning': '#FF2D2D', 'Severe Thunderstorm Warning': '#FFD12E', 'Flash Flood Warning': '#25D0C0', 'Flood Warning': '#46C766', }; var DEFAULT_COLOR = '#FF8A1F'; function colorFor(ev) { return EVENT_COLORS[ev] || DEFAULT_COLOR; } // Decide the frame for a set of warning polygons. // // The map NEVER PANS. Signage is watched at a glance from across a room, and a view that // slides to wherever the weather is stops being "my area" — you lose the landmarks you // orient by. So the centre is pinned to the configured point and only the ZOOM responds: // the box we hand to fitBounds is always symmetric about home. // // Returns null to mean "nothing worth reframing for — hold the configured view", which is // the case both when there are no warnings and when they are all outside the home frame. function frameFor(b) { if (!b || !b.isValid || !b.isValid()) return null; if (!homeFrame.intersects(b)) return null; // a storm three counties over is not chased // How far from home the warning actually reaches, capped at the home frame. Taking the // max of the two sides is what keeps the box symmetric, and therefore centred. var halfLat = Math.min(Math.max(Math.abs(b.getNorth() - lat), Math.abs(lat - b.getSouth())), padLat); var halfLon = Math.min(Math.max(Math.abs(b.getEast() - lon), Math.abs(lon - b.getWest())), padLon); // Floor it so a single small cell overhead doesn't slam the map to street level. halfLat = Math.max(halfLat, MIN_HALF_LAT); halfLon = Math.max(halfLon, MIN_HALF_LAT / Math.max(0.2, Math.cos(lat * Math.PI / 180))); return L.latLngBounds([lat - halfLat, lon - halfLon], [lat + halfLat, lon + halfLon]); } // Bounds of a GeoJSON warning polygon, computed straight off the coordinates. Cheaper // than building a throwaway L.geoJSON layer per feature just to ask for its extent. function boundsOf(f) { var g = f && f.geometry; if (!g) return null; var polys = g.type === 'Polygon' ? [g.coordinates] : g.coordinates; var s = 90, w = 180, n = -90, e = -180; polys.forEach(function (poly) { poly.forEach(function (ring) { ring.forEach(function (pt) { var x = pt[0], y = pt[1]; if (y < s) s = y; if (y > n) n = y; if (x < w) w = x; if (x > e) e = x; }); }); }); return (n >= s && e >= w) ? L.latLngBounds([s, w], [n, e]) : null; } // The chips claim to describe what is "in view", so they have to be tallied from the // map's ACTUAL viewport, not from the query result. The alert feed is fetched per STATE // (one request instead of one per county), so it routinely returns warnings hundreds of // miles away — reporting those as "2x Tornado Warning" over a map that shows neither of // them is worse than saying nothing. function visibleCounts() { var view = map.getBounds(), counts = {}; drawn.forEach(function (f) { if (!f.__b || !f.__b.intersects(view)) return; var ev = (f.properties || {}).event; counts[ev] = (counts[ev] || 0) + 1; }); return counts; } function refreshChips() { renderChips(visibleCounts()); } document.getElementById('area').textContent = area; var map = L.map('map', { zoomControl: false, attributionControl: true, fadeAnimation: false }).setView([lat, lon], zoom); // The widest frame the auto-fit may ever produce. Longitude degrees shrink toward the // poles, so scale them by cos(lat) to keep the box square-ish on the ground. var padLat = COUNTY_DEG * maxCounties; var padLon = padLat / Math.max(0.2, Math.cos(lat * Math.PI / 180)); var homeFrame = L.latLngBounds([lat - padLat, lon - padLon], [lat + padLat, lon + padLon]); L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { subdomains: 'abcd', maxZoom: 19, attribution: '© OpenStreetMap © CARTO · Radar: RainViewer · Alerts: NWS/NOAA', }).addTo(map); // ---- animated radar (RainViewer) -------------------------------------------------- var frames = []; // [{time, path}] var frameLayers = {}; // index -> L.tileLayer (lazy) var cur = -1; var animTimer = null; var clockEl = document.getElementById('clock'); function frameUrl(host, path) { return host + path + '/256/{z}/{x}/{y}/4/1_1.png'; } function showFrame(host, i) { if (!frames.length) return; if (!frameLayers[i]) { // RainViewer radar data tops out at native zoom 7; upscale beyond that // instead of requesting unavailable ("zoom level not supported") tiles. frameLayers[i] = L.tileLayer(frameUrl(host, frames[i].path), { opacity: 0, zIndex: 200, maxNativeZoom: 7, maxZoom: 19 }).addTo(map); } var next = frameLayers[i]; next.setOpacity(0.78); if (cur !== -1 && cur !== i && frameLayers[cur]) frameLayers[cur].setOpacity(0); cur = i; var d = new Date(frames[i].time * 1000); clockEl.textContent = 'Radar ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } function animate(host) { if (animTimer) clearInterval(animTimer); var i = frames.length - 1; showFrame(host, i); animTimer = setInterval(function () { i = (i + 1) % frames.length; showFrame(host, i); }, 650); } function loadRadar() { fetch('https://api.rainviewer.com/public/weather-maps.json') .then(function (r) { return r.json(); }) .then(function (d) { var host = d.host; var past = (d.radar && d.radar.past) || []; if (!past.length) return; // drop stale layers if the frame set changed Object.keys(frameLayers).forEach(function (k) { map.removeLayer(frameLayers[k]); }); frameLayers = {}; cur = -1; frames = past; animate(host); }) .catch(function (e) { /* keep the basemap; try again next cycle */ if (window.console) console.warn('radar load failed', e && e.message); }); } // ---- live NWS warning polygons ---------------------------------------------------- var warnLayer = null; var drawn = []; // features actually on the map, each stamped with __b bounds var chipsEl = document.getElementById('chips'); function shortHeadline(h) { h = h || ''; return h.length > 90 ? h.slice(0, 87) + '…' : h; } function renderChips(counts) { chipsEl.innerHTML = ''; var any = false; events.forEach(function (ev) { var n = counts[ev] || 0; if (!n) return; any = true; var c = document.createElement('span'); c.className = 'chip'; c.style.background = colorFor(ev); c.textContent = n + '× ' + ev; chipsEl.appendChild(c); }); if (!any) { var none = document.createElement('span'); none.className = 'chip none'; none.textContent = 'No active warnings in view'; chipsEl.appendChild(none); } } function alertUrls() { if (states.length) return states.map(function (s) { return 'https://api.weather.gov/alerts/active?area=' + encodeURIComponent(s); }); return ['https://api.weather.gov/alerts/active?point=' + encodeURIComponent(lat.toFixed(4) + ',' + lon.toFixed(4))]; } function loadWarnings() { Promise.allSettled(alertUrls().map(function (u) { return fetch(u, { headers: { Accept: 'application/geo+json' } }).then(function (r) { return r.json(); }); })).then(function (results) { // Slightly larger than homeFrame: fitBounds padding can push the viewport a hair // past it, and a polygon popping in blank at the edge looks like a bug. var reachable = homeFrame.pad(0.3); var seen = {}, feats = []; results.forEach(function (res) { if (res.status !== 'fulfilled' || !res.value || !res.value.features) return; res.value.features.forEach(function (f) { var p = f.properties || {}, g = f.geometry; if (!g || (g.type !== 'Polygon' && g.type !== 'MultiPolygon')) return; if (events.indexOf(p.event) === -1) return; var id = p.id || (f.id || JSON.stringify(g).slice(0, 40)); if (seen[id]) return; seen[id] = 1; // The map can never travel outside homeFrame, so a warning that misses it is not // merely off-screen now — it is unreachable. Don't draw it and don't count it. var b = boundsOf(f); if (!b || !b.intersects(reachable)) return; f.__b = b; feats.push(f); }); }); drawn = feats; if (warnLayer) { map.removeLayer(warnLayer); warnLayer = null; } if (feats.length) { warnLayer = L.geoJSON({ type: 'FeatureCollection', features: feats }, { style: function (f) { var ev = (f.properties || {}).event; return { color: colorFor(ev), weight: 3, opacity: 0.95, fillColor: colorFor(ev), fillOpacity: 0.12 }; }, onEachFeature: function (f, layer) { var p = f.properties || {}; layer.bindTooltip('' + (p.event || 'Warning') + '
' + shortHeadline(p.headline), { sticky: true }); }, }).addTo(map); // TV-style auto-framing: fit the view to the warning polygon(s) so the boxes // fill the frame. Only re-fit when the warning set changes (so the 60s refresh // doesn't jitter the view); cap zoom so a single small box stays readable. var fitKey = feats.map(function (f) { return (f.properties || {}).id; }).sort().join('|'); if (fitKey !== loadWarnings._fitKey) { loadWarnings._fitKey = fitKey; // Padding is small on purpose: the frame is already the answer, and 70px of inset // on a PiP-sized overlay throws away a third of the width on each side. try { var frame = frameFor(warnLayer.getBounds()); if (frame) map.fitBounds(frame, { padding: [24, 24], maxZoom: 9 }); else map.setView([lat, lon], zoom); } catch (e) {} } } else { // Warnings cleared: go back to the configured view instead of staying parked on // wherever the last storm happened to be. if (loadWarnings._fitKey) map.setView([lat, lon], zoom); loadWarnings._fitKey = null; } // After framing, not before: fitBounds/setView change what "in view" means, and // moveend fires once the view settles. refreshChips(); }).catch(function (e) { if (window.console) console.warn('warnings load failed', e && e.message); }); } // The zoom set by framing decides what "in view" means, and fitBounds settles // asynchronously — so retally once the map stops moving rather than guessing. map.on('moveend zoomend', refreshChips); // ---- go --------------------------------------------------------------------------- loadRadar(); loadWarnings(); setInterval(loadRadar, 4 * 60 * 1000); setInterval(loadWarnings, 60 * 1000); // legend (function () { var el = document.getElementById('legend'); el.innerHTML = events.map(function (ev) { return '
' + ev + '
'; }).join(''); })(); })();