add working vaa ash-polygons map w/ volcano selection capabilities

2026-08-27 12:36:25 -07:00
parent 6eb5e42111
commit 6304db66c2
5 changed files with 274 additions and 13 deletions
@@ -0,0 +1,175 @@
+import React, { useRef, useMemo, useEffect } from "react";
+import {MapContainer, useMap, TileLayer, Polygon, Tooltip} from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import {Flex, Spinner, Text} from "@chakra-ui/react";
+import L from 'leaflet';
+
+export default function VaaMap({ settings, widgetID}) {
+  const mapRef = useRef(null);
+
+  // TEST DATA
+  const mock_data = useMemo( () =>
+    [
+      {
+        "vaa_datetime": "2026-08-18T18:01:00Z",
+        "vnum": 342090,
+        "volc_name": "Fuego",
+        "volc_elev_m": 3763,
+        "vaac_location": "Washington",
+        "obs_va_datetime": "2026-08-18T17:30:00Z",
+        "obs_va_epoch": 1787074200000,
+        "aviation_color_code": null,
+        "obs_fl": "140",
+        "obs_fl_dir": "SW",
+        "obs_h_asl_m": 4267.0,
+        "obs_h_avs_m": 504.0,
+        "projections":
+          {
+            "six": "14/0200Z SFC/FL250 S1532 W07036 - S1552 W07029 - S1613 W07035 - S1546 W07150 - S1532 W07036 ",
+            "twelve": "14/0800Z SFC/FL250 S1513 W07045 - S1527 W07033 - S1551 W07029 - S1544 W07150 - S1513 W07045 ",
+            "eighteen": "14/1400Z SFC/FL250 S1511 W07044 - S1531 W07028 - S1550 W07027 - S1546 W07151 - S1511 W07044 "
+          }
+      },
+      {
+        "vaa_datetime": "2026-08-25T01:01:00Z",
+        "vnum": 282080,
+        "volc_name": "Aira",
+        "volc_elev_m": 1117,
+        "vaac_location": "Tokyo",
+        "obs_va_datetime": "2026-08-25T00:50:00Z",
+        "obs_va_epoch": 1787619000000,
+        "aviation_color_code": null,
+        "obs_fl": "180",
+        "obs_fl_dir": null,
+        "obs_h_asl_m": 5486,
+        "obs_h_avs_m": 4369,
+        "projections":
+          {
+            "six": "25/2030Z SFC/FL160 N1446 W09202 - N1428 W09052 - N1423 W09200 - N1446 W09202",
+            "twelve": "26/0230Z SFC/FL160 N1444 W09203 - N1428 W09052 - N1422 W09201 - N1444 W09203",
+            "eighteen": "26/0830Z SFC/FL160 N1441 W09204 - N1428 W09052 - N1419 W09202 - N1441 W09204"
+          },
+      },
+    ]
+  , []);
+
+  const {data, isLoading, error, selected} = useMemo(() => {
+    const data = settings?.data?.sort((a, b) => new Date(b.vaa_datetime) - new Date(a.vaa_datetime));
+    const isLoading = settings?.isLoading;
+    const error = settings?.error;
+    const selected = settings?.selected;
+    return {data, isLoading, error, selected};
+  }, [settings]);
+
+
+  // convert Degree & Minutes (DM) to Decimal Degrees (DD)
+  const polygons = useMemo(() => {
+    if (!mock_data) return [];
+    return mock_data.map((vaa) => {
+      const six_hrs = convertDMtoDD(vaa.projections.six);
+      const twelve_hrs = convertDMtoDD(vaa.projections.twelve);
+      const eighteen_hrs = convertDMtoDD(vaa.projections.eighteen);
+      return {...vaa, projections: [six_hrs, twelve_hrs, eighteen_hrs]};
+    })
+  }, [mock_data]);
+
+  const lineColors= {
+    0: { color: 'red' },
+    1: { color: 'purple' },
+    2: { fillColor: 'blue' },
+  }
+
+  if (isLoading) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Spinner size="xl" color="blue.400" thickness="4px"/>
+    </Flex>
+  );
+
+  if (error) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Text color="red.400">{error}</Text>
+    </Flex>
+  );
+
+  if (data?.length === 0) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Text textAlign="center" color="gray.400">No flight level data available.</Text>
+    </Flex>
+  );
+
+  return (
+    <MapContainer
+      center={settings?.position}
+      zoom={13}
+      ref={mapRef}
+      style={{height: "100%", width: "100%"}}
+      maxBounds={[[-90, -180], [90, 180]]}
+      minZoom={2} // smallest zoom allowed before empty edges start appearing
+    >
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; OpenStreetMap contributors'
+        noWrap
+      />
+      {polygons?.map((polygon, index) => {
+        return polygon?.projections?.map((coordinates, index) =>
+          <Polygon key={index} pathOptions={lineColors[index]} positions={coordinates}>
+            <Tooltip sticky>{polygon?.volc_name}</Tooltip>
+          </Polygon>
+        )
+      })}
+      <ZoomToPolygon polygons={polygons} selected={selected} settings={settings} />
+    </MapContainer>
+  )
+}
+
+function convertDMtoDD(DMString) {
+  const cleaned_DMString = DMString.trim().replace(/-/g, "").split(/\s+/);
+
+  const datetime = cleaned_DMString[0];
+  const flight_level = Number(String(cleaned_DMString[1]).slice(6)) * 100; // in feet
+
+  const coordinates = cleaned_DMString.slice(2).map((coordinate, index) => {
+    const direction = coordinate[0];
+    if (direction === "N" || direction === "S") { // 4 digits long
+      const lat = Number(coordinate.slice(1, 3)) + Number((Number(coordinate.slice(3, 5)) / 60).toFixed(5));
+      return direction === "S" ? -lat : lat;      // south has negative coordinates
+    } else if (direction === "E" || direction === "W") { // 5 digits long
+      const long = Number(coordinate.slice(1, 4)) + Number((Number(coordinate.slice(4, 6)) / 60).toFixed(5));
+      return direction === "W" ? -long : long;           // west has negative coordinates
+    }
+  });
+
+  // pair up lat and long into their own array pairs
+  let polygon = [];
+  for (let i = 0; i < coordinates.length; i+=2) polygon.push([coordinates[i], coordinates[i+1]]);
+  return polygon;
+}
+
+function ZoomToPolygon({ polygons, selected, settings }) {
+  const map = useMap();
+
+  useEffect(() => {
+    let targetBounds;
+
+    if (!selected && settings?.position) targetBounds = settings.position;
+    else if (selected) {
+      const vaaObject = polygons.find((vaa) => vaa.volc_name === selected);
+      targetBounds = vaaObject?.projections?.[0];
+    }
+
+    if (targetBounds) {
+      try {
+        const bounds = L.latLngBounds(targetBounds);
+        if (bounds.isValid())
+          map.fitBounds(bounds, {
+            padding: [50, 50],
+            animate: true,
+            maxZoom: 8,
+          });
+      } catch (err) {
+        console.warn('Invalid bounds structure passed to fitBounds:', targetBounds, err);
+      }
+    }
+  }, [map, selected, polygons, settings]);
+}