In progress, add global radar support using RainViewer and Leaflet

index.mjs

@@ -5,7 +5,7 @@ import { readFile } from 'fs/promises';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import {
-	weatherProxy, radarProxy, outlookProxy, mesonetProxy, forecastProxy, openMeteoProxy,
+	weatherProxy, radarProxy, outlookProxy, mesonetProxy, forecastProxy, openMeteoProxy, rainViewerProxy,
 } from './proxy/handlers.mjs';
 import playlist from './src/playlist.mjs';
 import OVERRIDES from './src/overrides.mjs';
@@ -254,6 +254,7 @@ if (!process.env?.STATIC) {
 	app.use('/mesonet/', mesonetProxy);
 	app.use('/forecast/', forecastProxy);
 	app.use('/open-meteo/', openMeteoProxy);
+	app.use('/rainviewer/', rainViewerProxy);
 
 	// Playlist route is available in server mode (not in static mode)
 	app.get('/playlist.json', playlist);

proxy/handlers.mjs

@@ -57,3 +57,10 @@ export const openMeteoProxy = async (req, res) => {
 		skipParams: ['u'],
 	});
 };
+
+export const rainViewerProxy = async (req, res) => {
+	await cache.handleRequest(req, res, 'https://api.rainviewer.com', {
+		serviceName: 'RainViewer',
+		skipParams: ['u'],
+	});
+};

server/scripts/modules/radar.mjs

@@ -1,240 +1,193 @@
-// current weather conditions display
 import STATUS from './status.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
-import { safeText } from './utils/fetch.mjs';
+import { safeJson } from './utils/fetch.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
-import { registerDisplay, timeZone } from './navigation.mjs';
+import { registerDisplay } from './navigation.mjs';
-import * as utils from './radar-utils.mjs';
-import setTiles from './radar-tiles.mjs';
-import processRadar from './radar-processor.mjs';
 
-// store processed radar as dataURLs to avoid re-processing frames as they slide backwards in time
-// this is cleared upon changing the location displayed
-let processedRadars = [];
-
-const RADAR_HOST = 'mesonet.agron.iastate.edu';
 class Radar extends WeatherDisplay {
+	static metadataUrl = 'https://api.rainviewer.com/public/weather-maps.json';
+
+	static baseMapUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}';
+
 	constructor(navId, elemId) {
 		super(navId, elemId, 'Local Radar');
 
 		this.okToDrawCurrentConditions = false;
 		this.okToDrawCurrentDateTime = false;
 
-		// set max images
+		this.map = null;
-		this.dopplerRadarImageMax = 6;
+		this.baseLayer = null;
-		// update timing
+		this.locationMarker = null;
-		this.timing.baseDelay = 350;
+		this.radarLayers = [];
-		this.timing.delay = [
+		this.mapFrames = [];
-			{ time: 4, si: 5 },
+		this.radarHost = '';
-			{ time: 1, si: 0 },
+
-			{ time: 1, si: 1 },
+		this.timing.baseDelay = 500;
-			{ time: 1, si: 2 },
+		this.timing.delay = 1;
-			{ time: 1, si: 3 },
+		this.maxFrames = 6;
-			{ time: 1, si: 4 },
-			{ time: 4, si: 5 },
-			{ time: 1, si: 0 },
-			{ time: 1, si: 1 },
-			{ time: 1, si: 2 },
-			{ time: 1, si: 3 },
-			{ time: 1, si: 4 },
-			{ time: 4, si: 5 },
-			{ time: 1, si: 0 },
-			{ time: 1, si: 1 },
-			{ time: 1, si: 2 },
-			{ time: 1, si: 3 },
-			{ time: 1, si: 4 },
-			{ time: 12, si: 5 },
-		];
 	}
 
 	async getData(weatherParameters, refresh) {
 		if (!super.getData(weatherParameters, refresh)) return;
-		if (!this.weatherParameters?.supportsNoaaDisplays) {
-			this.timing.totalScreens = 0;
-			this.setStatus(STATUS.loaded);
-			return;
-		}
-		this.timing.totalScreens = 1;
-
-		// ALASKA AND HAWAII AREN'T SUPPORTED!
-		if (this.weatherParameters.state === 'AK' || this.weatherParameters.state === 'HI') {
-			this.setStatus(STATUS.noData);
-			return;
-		}
-
-		const baseUrl = `https://${RADAR_HOST}/archive/data/`;
-		const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png'; // This URL returns an index of .png files for the given date
-
-		// Always get today's data
-		const today = DateTime.utc().startOf('day');
-		const todayStr = today.toFormat('yyyy/LL/dd');
-		const yesterday = today.minus({ days: 1 });
-		const yesterdayStr = yesterday.toFormat('yyyy/LL/dd');
-		const todayUrl = `${baseUrl}${todayStr}${baseUrlEnd}`;
-
-		// Get today's data, then we'll see if we need yesterday's
-		const todayList = await safeText(todayUrl);
-
-		// Count available images from today
-		let todayImageCount = 0;
-		if (todayList) {
-			const parser = new DOMParser();
-			const xmlDoc = parser.parseFromString(todayList, 'text/html');
-			const anchors = xmlDoc.querySelectorAll('a');
-			todayImageCount = Array.from(anchors).filter((elem) => elem.innerHTML?.match(/n0r_\d{12}\.png/)).length;
-		}
-
-		// Only fetch yesterday's data if we don't have enough images from today
-		// or if it's very early in the day when recent images might still be from yesterday
-		const currentTimeUTC = DateTime.utc();
-		const minutesSinceMidnight = currentTimeUTC.hour * 60 + currentTimeUTC.minute;
-		const requiredTimeWindow = this.dopplerRadarImageMax * 5; // 5 minutes per image
-		const needYesterday = todayImageCount < this.dopplerRadarImageMax || minutesSinceMidnight < requiredTimeWindow;
-
-		// Build the final lists array
-		const lists = [];
-		if (needYesterday) {
-			const yesterdayUrl = `${baseUrl}${yesterdayStr}${baseUrlEnd}`;
-			const yesterdayList = await safeText(yesterdayUrl);
-			if (yesterdayList) {
-				lists.push(yesterdayList); // Add yesterday's data first
-			}
-		}
-		if (todayList) {
-			lists.push(todayList); // Add today's data
-		}
-
-		// convert to an array of png urls
-		const pngs = lists.flatMap((html, htmlIdx) => {
-			const parser = new DOMParser();
-			const xmlDoc = parser.parseFromString(html, 'text/html');
-			// add the base url - reconstruct the URL for each list
-			const base = xmlDoc.createElement('base');
-			if (htmlIdx === 0 && needYesterday) {
-				// First item is yesterday's data when we fetched it
-				base.href = `${baseUrl}${yesterdayStr}${baseUrlEnd}`;
-			} else {
-				// This is today's data (or the only data if yesterday wasn't fetched)
-				base.href = `${baseUrl}${todayStr}${baseUrlEnd}`;
-			}
-			xmlDoc.head.append(base);
-			const anchors = xmlDoc.querySelectorAll('a');
-			const urls = [];
-			Array.from(anchors).forEach((elem) => {
-				if (elem.innerHTML?.match(/n0r_\d{12}\.png/)) {
-					urls.push(elem.href);
-				}
-			});
-			return urls;
-		});
-
-		// get the last few images
-		const timestampRegex = /_(\d{12})\.png/;
-		const sortedPngs = pngs.sort((a, b) => (a.match(timestampRegex)[1] < b.match(timestampRegex)[1] ? -1 : 1));
-		const urls = sortedPngs.slice(-(this.dopplerRadarImageMax));
-
-		// calculate offsets and sizes
-		const offsetX = 120 * 2;
-		const offsetY = 69 * 2;
-		const sourceXY = utils.getXYFromLatitudeLongitudeMap(this.weatherParameters);
-		const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters, offsetX, offsetY);
-
-		// set up the base map and overlay tiles
-		setTiles({
-			sourceXY,
-			elemId: this.elemId,
-		});
-
-		const radarKey = `${radarSourceXY.x.toFixed(0)}-${radarSourceXY.y.toFixed(0)}`;
-
-		// reset the "used" flag on pre-processed radars
-		// items that were not used during this process are deleted (either expired via time or change of location)
-		processedRadars.forEach((radar) => { radar.used = false; });
 
 		try {
-			const radarInfo = await Promise.all(urls.map(async (url) => {
+			if (!window.L) {
-				// store the time
+				throw new Error('Leaflet is not available');
-				const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./);
+			}
-				const [, year, month, day, hour, minute] = timeMatch;
 
-				const radarKeyedTimestamp = `${radarKey}:${year}${month}${day}${hour}${minute}`;
+			await this.ensureMap();
+			this.map.invalidateSize();
+			this.map.setView([this.weatherParameters.latitude, this.weatherParameters.longitude], 7);
+			this.updateLocationMarker();
 
-				// check for a pre-processed radar
+			const radarMetadata = await safeJson(Radar.metadataUrl, {
-				const preProcessed = processedRadars.find((radar) => radar.key === radarKeyedTimestamp);
+				retryCount: 2,
+				stillWaiting: () => this.stillWaiting(),
+			});
 
-				// use the pre-processed radar, or get a new one
+			const frames = radarMetadata?.radar?.past?.slice(-this.maxFrames) ?? [];
-				const processedRadar = preProcessed?.dataURL ?? await processRadar({
+			if (!frames.length || !radarMetadata?.host) {
-					url,
+				this.clearRadarLayers();
-					RADAR_HOST,
+				this.timing.totalScreens = 0;
-					OVERRIDES,
+				this.setStatus(STATUS.noData);
-					radarSourceXY,
+				return;
-				});
+			}
 
-				// store the radar
+			this.radarHost = radarMetadata.host;
-				if (!preProcessed) {
+			this.mapFrames = frames;
-					processedRadars.push({
+			this.resetRadarLayers();
-						key: radarKeyedTimestamp,
+			this.timing.delay = this.buildTiming();
-						dataURL: processedRadar,
+			this.calcNavTiming();
-						used: true,
+			this.resetNavBaseCount();
-					});
+			this.showFrame(this.mapFrames.length - 1);
-				} else {
-					// set used flag
-					preProcessed.used = true;
-				}
-
-				const time = DateTime.fromObject({
-					year,
-					month,
-					day,
-					hour,
-					minute,
-				}, {
-					zone: 'UTC',
-				}).setZone(timeZone());
-
-				const elem = this.fillTemplate('frame', { map: { type: 'img', src: processedRadar } });
-				return {
-					time,
-					elem,
-				};
-			}));
-
-			// put the elements in the container
-			const scrollArea = this.elem.querySelector('.scroll-area');
-			scrollArea.innerHTML = '';
-			scrollArea.append(...radarInfo.map((r) => r.elem));
-
-			// set max length
-			this.timing.totalScreens = radarInfo.length;
-
-			this.times = radarInfo.map((radar) => radar.time);
 			this.setStatus(STATUS.loaded);
-
+		} catch (error) {
-			// clean up any unused stored radars
+			console.error(`Failed to initialize radar: ${error.message}`);
-			processedRadars = processedRadars.filter((radar) => radar.used);
+			this.clearRadarLayers();
-		} catch (_error) {
-			// Radar fetch failed - skip this display in animation by setting totalScreens = 0
 			this.timing.totalScreens = 0;
 			if (this.isEnabled) this.setStatus(STATUS.failed);
 		}
 	}
 
+	async ensureMap() {
+		if (this.map) return;
+
+		const mapElement = this.elem.querySelector('.leaflet-map');
+		if (!mapElement) {
+			throw new Error('Radar map container not found');
+		}
+
+		this.map = window.L.map(mapElement, {
+			zoomControl: false,
+			dragging: false,
+			touchZoom: false,
+			scrollWheelZoom: false,
+			doubleClickZoom: false,
+			boxZoom: false,
+			keyboard: false,
+			tap: false,
+			attributionControl: false,
+			preferCanvas: true,
+		});
+
+		this.baseLayer = window.L.tileLayer(Radar.baseMapUrl, {
+			maxZoom: 10,
+			minZoom: 1,
+			crossOrigin: true,
+		});
+
+		this.baseLayer.addTo(this.map);
+	}
+
+	resetRadarLayers() {
+		this.clearRadarLayers();
+		this.radarLayers = this.mapFrames.map((frame) => this.createRadarLayer(frame));
+	}
+
+	clearRadarLayers() {
+		if (!this.map || !this.radarLayers.length) {
+			this.radarLayers = [];
+			return;
+		}
+
+		this.radarLayers.forEach((layer) => {
+			if (this.map.hasLayer(layer)) {
+				this.map.removeLayer(layer);
+			}
+		});
+		this.radarLayers = [];
+	}
+
+	createRadarLayer(frame) {
+		const tileUrl = `${this.radarHost}${frame.path}/256/{z}/{x}/{y}/4/1_1.png`;
+		const layer = window.L.tileLayer(tileUrl, {
+			tileSize: 256,
+			opacity: 0,
+			zIndex: frame.time,
+			crossOrigin: true,
+			updateWhenIdle: false,
+			keepBuffer: 2,
+		});
+
+		layer.addTo(this.map);
+		return layer;
+	}
+
+	buildTiming() {
+		const latestFrameIndex = this.mapFrames.length - 1;
+		const sequence = [latestFrameIndex, ...this.mapFrames.map((_, index) => index), latestFrameIndex];
+		return sequence.map((screenIndex, index) => {
+			let time = 1;
+			if (screenIndex === latestFrameIndex) {
+				time = index === sequence.length - 1 ? 12 : 4;
+			}
+			return { si: screenIndex, time };
+		});
+	}
+
+	updateLocationMarker() {
+		if (!this.map) return;
+
+		if (this.locationMarker && this.map.hasLayer(this.locationMarker)) {
+			this.map.removeLayer(this.locationMarker);
+		}
+
+		this.locationMarker = window.L.circleMarker([
+			this.weatherParameters.latitude,
+			this.weatherParameters.longitude,
+		], {
+			radius: 5,
+			color: '#000',
+			weight: 2,
+			fillColor: '#ff0',
+			fillOpacity: 1,
+			interactive: false,
+			className: 'location-marker',
+		}).addTo(this.map);
+	}
+
+	showFrame(screenIndex) {
+		if (!this.radarLayers.length || !this.mapFrames.length) return;
+
+		const frameIndex = Math.max(0, Math.min(screenIndex, this.radarLayers.length - 1));
+		this.radarLayers.forEach((layer, index) => {
+			layer.setOpacity(index === frameIndex ? 0.8 : 0);
+		});
+
+		const time = DateTime.fromSeconds(this.mapFrames[frameIndex].time)
+			.setZone(this.weatherParameters.timeZone)
+			.toLocaleString(DateTime.TIME_SIMPLE);
+		this.elem.querySelector('.header .right .time').innerHTML = time.length >= 8 ? time : `&nbsp;${time} `;
+	}
+
 	async drawCanvas() {
 		super.drawCanvas();
-		const time = this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE);
+		if (this.map) {
-		const timePadded = time.length >= 8 ? time : `&nbsp;${time} `;
+			this.map.invalidateSize(false);
-		this.elem.querySelector('.header .right .time').innerHTML = timePadded;
+			this.showFrame(this.screenIndex);
-
+		}
-		// get image offset calculation
-		// is slides slightly because of scaling so we have to take a measurement from the rendered page
-		const actualFrameHeight = this.elem.querySelector('.frame').scrollHeight;
-
-		// scroll to image
-		this.elem.querySelector('.scroll-area').style.top = `${-this.screenIndex * actualFrameHeight}px`;
-
 		this.finishDraw();
 	}
 }
 
-// register display
 registerDisplay(new Radar(11, 'radar'));

server/scripts/modules/utils/url-rewrite.mjs

@@ -46,6 +46,10 @@ const rewriteUrl = (_url) => {
 		url.protocol = window.location.protocol;
 		url.host = window.location.host;
 		url.pathname = `/open-meteo${url.pathname}`;
+	} else if (url.origin === 'https://api.rainviewer.com') {
+		url.protocol = window.location.protocol;
+		url.host = window.location.host;
+		url.pathname = `/rainviewer${url.pathname}`;
 	} else if (typeof OVERRIDES !== 'undefined' && OVERRIDES?.RADAR_HOST && url.origin === `https://${OVERRIDES.RADAR_HOST}`) {
 		// Handle override radar host
 		url.protocol = window.location.protocol;

server/styles/scss/_radar.scss

@@ -106,22 +106,48 @@
 	height: 367px;
 
 	.container {
-
+		position: relative;
-		.tiles {
+		height: 100%;
-			position: absolute;
-			width: 1400px;
-
-			img {
-				vertical-align: middle;
-			}
-		}
 
 		.scroll-area {
 			position: relative;
+			height: 100%;
+		}
+
+		.frame {
+			height: 100%;
+		}
+
+		.map {
+			height: 100%;
+			width: 100%;
+		}
+
+		.leaflet-map {
+			height: 100%;
+			width: 100%;
+			background: #061f3e;
+		}
+
+		.leaflet-container {
+			background: #061f3e;
+			font-family: inherit;
+		}
+
+		.leaflet-control-container,
+		.leaflet-control-attribution,
+		.leaflet-control-zoom {
+			display: none;
+		}
+
+		.location-marker {
+			background: #ff0;
+			border: 2px solid #000;
+			border-radius: 50%;
 		}
 	}
 }
 
 .wide.radar #container {
 	background: url(../images/backgrounds/4-wide.png);
-}
+}

views/index.ejs

@@ -22,6 +22,10 @@
   <link rel="prefetch" href="fonts/Star4000 Extended.woff" as="font" type="font/woff" crossorigin>
   <link rel="prefetch" href="fonts/Star4000 Large.woff" as="font" type="font/woff" crossorigin>
   <link rel="prefetch" href="fonts/Star4000 Small.woff" as="font" type="font/woff" crossorigin>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
   <% if (typeof serverAvailable !== 'undefined' && serverAvailable) { %>
   <script>
     window.WS4KP_SERVER_AVAILABLE = true;

views/partials/radar.ejs

@@ -32,14 +32,12 @@
 
 <div class="main radar">
 	<div class="container">
-		<div class="map-tiles tiles"><img/><img/><img/><img/></div>
 		<div class="scroll-area">
-			<div class="frame template">
+			<div class="frame">
 				<div class="map">
-					<img/>
+					<div class="leaflet-map"></div>
 				</div>
 			</div>
 		</div>
-		<div class="overlay-tiles tiles"><img/><img/><img/><img/></div>
 	</div>
-</div>
+</div>