|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
|
|
|
// NOAA OVATION Aurora Forecast - JSON grid data
|
|
|
// Endpoint: /api/noaa/aurora (proxied from services.swpc.noaa.gov/json/ovation_aurora_latest.json)
|
|
|
// Format: { "Forecast Time": "...", "coordinates": [[lon, lat, probability], ...] }
|
|
|
// Grid: 360 longitudes (0-359) × 181 latitudes (-90 to 90), probability 0-100
|
|
|
|
|
|
export const metadata = {
|
|
|
id: 'aurora',
|
|
|
name: 'Aurora Forecast',
|
|
|
description: 'NOAA OVATION aurora probability forecast (30-min)',
|
|
|
icon: '🌌',
|
|
|
category: 'space-weather',
|
|
|
defaultEnabled: false,
|
|
|
defaultOpacity: 0.6,
|
|
|
version: '2.0.0'
|
|
|
};
|
|
|
|
|
|
// Aurora color ramp: transparent → green → yellow → red
|
|
|
// Matches NOAA's official aurora visualization
|
|
|
function auroraCmap(probability) {
|
|
|
if (probability < 4) return null; // Skip very low values
|
|
|
|
|
|
// Normalize 4-100 to 0-1
|
|
|
const t = Math.min((probability - 4) / 80, 1);
|
|
|
|
|
|
let r, g, b, a;
|
|
|
if (t < 0.25) {
|
|
|
// Dark green to green
|
|
|
const s = t / 0.25;
|
|
|
r = 0;
|
|
|
g = Math.round(80 + s * 175);
|
|
|
b = Math.round(40 * (1 - s));
|
|
|
a = 0.3 + s * 0.3;
|
|
|
} else if (t < 0.5) {
|
|
|
// Green to yellow-green
|
|
|
const s = (t - 0.25) / 0.25;
|
|
|
r = Math.round(s * 200);
|
|
|
g = 255;
|
|
|
b = 0;
|
|
|
a = 0.6 + s * 0.15;
|
|
|
} else if (t < 0.75) {
|
|
|
// Yellow to orange
|
|
|
const s = (t - 0.5) / 0.25;
|
|
|
r = 255;
|
|
|
g = Math.round(255 - s * 120);
|
|
|
b = 0;
|
|
|
a = 0.75 + s * 0.1;
|
|
|
} else {
|
|
|
// Orange to red
|
|
|
const s = (t - 0.75) / 0.25;
|
|
|
r = 255;
|
|
|
g = Math.round(135 - s * 135);
|
|
|
b = Math.round(s * 30);
|
|
|
a = 0.85 + s * 0.15;
|
|
|
}
|
|
|
|
|
|
return { r, g, b, a };
|
|
|
}
|
|
|
|
|
|
function buildAuroraCanvas(coordinates) {
|
|
|
// Create a 360×181 canvas (1° resolution)
|
|
|
const canvas = document.createElement('canvas');
|
|
|
canvas.width = 360;
|
|
|
canvas.height = 181;
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
|
// Clear to transparent
|
|
|
ctx.clearRect(0, 0, 360, 181);
|
|
|
|
|
|
const imageData = ctx.createImageData(360, 181);
|
|
|
const pixels = imageData.data;
|
|
|
|
|
|
// Process all coordinate points
|
|
|
for (let i = 0; i < coordinates.length; i++) {
|
|
|
const [lon, lat, prob] = coordinates[i];
|
|
|
if (prob < 4) continue; // Skip negligible
|
|
|
|
|
|
const color = auroraCmap(prob);
|
|
|
if (!color) continue;
|
|
|
|
|
|
// NOAA grid: lon 0-359, lat -90 to 90
|
|
|
// Canvas: x = lon (0-359), y = 0 is +90 (north), y = 180 is -90 (south)
|
|
|
const x = Math.round(lon) % 360;
|
|
|
const y = 90 - Math.round(lat); // Flip: lat 90 → y 0, lat -90 → y 180
|
|
|
|
|
|
if (x < 0 || x >= 360 || y < 0 || y >= 181) continue;
|
|
|
|
|
|
const idx = (y * 360 + x) * 4;
|
|
|
pixels[idx] = color.r;
|
|
|
pixels[idx + 1] = color.g;
|
|
|
pixels[idx + 2] = color.b;
|
|
|
pixels[idx + 3] = Math.round(color.a * 255);
|
|
|
}
|
|
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
|
|
// Scale up with a larger canvas for smoother rendering
|
|
|
const smoothCanvas = document.createElement('canvas');
|
|
|
smoothCanvas.width = 720;
|
|
|
smoothCanvas.height = 362;
|
|
|
const sctx = smoothCanvas.getContext('2d');
|
|
|
sctx.imageSmoothingEnabled = true;
|
|
|
sctx.imageSmoothingQuality = 'high';
|
|
|
sctx.drawImage(canvas, 0, 0, 720, 362);
|
|
|
|
|
|
return smoothCanvas.toDataURL('image/png');
|
|
|
}
|
|
|
|
|
|
export function useLayer({ enabled = false, opacity = 0.6, map = null }) {
|
|
|
const [overlayLayer, setOverlayLayer] = useState(null);
|
|
|
const [auroraData, setAuroraData] = useState(null);
|
|
|
const [forecastTime, setForecastTime] = useState(null);
|
|
|
const fetchingRef = useRef(false);
|
|
|
|
|
|
// Fetch aurora JSON data
|
|
|
useEffect(() => {
|
|
|
if (!enabled) return;
|
|
|
|
|
|
const fetchAurora = async () => {
|
|
|
if (fetchingRef.current) return;
|
|
|
fetchingRef.current = true;
|
|
|
try {
|
|
|
const res = await fetch('/api/noaa/aurora');
|
|
|
if (res.ok) {
|
|
|
const data = await res.json();
|
|
|
if (data.coordinates && data.coordinates.length > 0) {
|
|
|
setAuroraData(data.coordinates);
|
|
|
setForecastTime(data['Forecast Time'] || null);
|
|
|
}
|
|
|
}
|
|
|
} catch (err) {
|
|
|
console.error('Aurora data fetch error:', err);
|
|
|
} finally {
|
|
|
fetchingRef.current = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
fetchAurora();
|
|
|
// Refresh every 10 minutes
|
|
|
const interval = setInterval(fetchAurora, 600000);
|
|
|
return () => clearInterval(interval);
|
|
|
}, [enabled]);
|
|
|
|
|
|
// Render overlay when data or map changes
|
|
|
useEffect(() => {
|
|
|
if (!map || typeof L === 'undefined') return;
|
|
|
|
|
|
// Remove existing
|
|
|
if (overlayLayer) {
|
|
|
try { map.removeLayer(overlayLayer); } catch (e) {}
|
|
|
setOverlayLayer(null);
|
|
|
}
|
|
|
|
|
|
if (!enabled || !auroraData) return;
|
|
|
|
|
|
try {
|
|
|
const dataUrl = buildAuroraCanvas(auroraData);
|
|
|
|
|
|
// NOAA grid: lon 0-359, lat -90 to 90
|
|
|
// Leaflet bounds: [[south, west], [north, east]]
|
|
|
// Shift by 180° so 0° longitude is centered properly
|
|
|
// The data starts at lon=0 (Greenwich), so the image spans [0, 360) in longitude
|
|
|
// We need two overlays or shift the data. Simplest: overlay from -180 to 180 with shifted image.
|
|
|
// Actually, L.imageOverlay with bounds [[-90, 0], [90, 360]] works because Leaflet wraps.
|
|
|
// But for proper centering, let's use [[-90, -180], [90, 180]] and shift the canvas.
|
|
|
|
|
|
// Build a shifted canvas where lon 0-179 goes to right half, lon 180-359 goes to left half
|
|
|
const shiftedCanvas = document.createElement('canvas');
|
|
|
shiftedCanvas.width = 720;
|
|
|
shiftedCanvas.height = 362;
|
|
|
const sctx = shiftedCanvas.getContext('2d');
|
|
|
sctx.imageSmoothingEnabled = true;
|
|
|
sctx.imageSmoothingQuality = 'high';
|
|
|
|
|
|
// Rebuild from raw data with shifted longitudes
|
|
|
const rawCanvas = document.createElement('canvas');
|
|
|
rawCanvas.width = 360;
|
|
|
rawCanvas.height = 181;
|
|
|
const rctx = rawCanvas.getContext('2d');
|
|
|
rctx.clearRect(0, 0, 360, 181);
|
|
|
const imageData = rctx.createImageData(360, 181);
|
|
|
const pixels = imageData.data;
|
|
|
|
|
|
for (let i = 0; i < auroraData.length; i++) {
|
|
|
const [lon, lat, prob] = auroraData[i];
|
|
|
if (prob < 4) continue;
|
|
|
|
|
|
const color = auroraCmap(prob);
|
|
|
if (!color) continue;
|
|
|
|
|
|
// Shift longitude: NOAA 0-359 → map -180 to 179
|
|
|
let x = Math.round(lon);
|
|
|
x = x >= 180 ? x - 180 : x + 180; // Shift so -180 maps to pixel 0
|
|
|
x = x % 360;
|
|
|
|
|
|
const y = 90 - Math.round(lat);
|
|
|
if (x < 0 || x >= 360 || y < 0 || y >= 181) continue;
|
|
|
|
|
|
const idx = (y * 360 + x) * 4;
|
|
|
pixels[idx] = color.r;
|
|
|
pixels[idx + 1] = color.g;
|
|
|
pixels[idx + 2] = color.b;
|
|
|
pixels[idx + 3] = Math.round(color.a * 255);
|
|
|
}
|
|
|
|
|
|
rctx.putImageData(imageData, 0, 0);
|
|
|
sctx.drawImage(rawCanvas, 0, 0, 720, 362);
|
|
|
|
|
|
const shiftedUrl = shiftedCanvas.toDataURL('image/png');
|
|
|
|
|
|
const overlay = L.imageOverlay(
|
|
|
shiftedUrl,
|
|
|
[[-90, -180], [90, 180]],
|
|
|
{
|
|
|
opacity: opacity,
|
|
|
zIndex: 210,
|
|
|
interactive: false
|
|
|
}
|
|
|
);
|
|
|
|
|
|
overlay.addTo(map);
|
|
|
setOverlayLayer(overlay);
|
|
|
} catch (err) {
|
|
|
console.error('Aurora overlay render error:', err);
|
|
|
}
|
|
|
|
|
|
return () => {
|
|
|
if (overlayLayer && map) {
|
|
|
try { map.removeLayer(overlayLayer); } catch (e) {}
|
|
|
}
|
|
|
};
|
|
|
}, [enabled, auroraData, map]);
|
|
|
|
|
|
// Update opacity
|
|
|
useEffect(() => {
|
|
|
if (overlayLayer) {
|
|
|
overlayLayer.setOpacity(opacity);
|
|
|
}
|
|
|
}, [opacity, overlayLayer]);
|
|
|
|
|
|
return {
|
|
|
layer: overlayLayer,
|
|
|
forecastTime,
|
|
|
refresh: () => {
|
|
|
setAuroraData(null);
|
|
|
fetchingRef.current = false;
|
|
|
}
|
|
|
};
|
|
|
}
|
