@wral/hurricane-tracker

<wral-hurricane-tracker> — Lit web component that renders an active Atlantic hurricane tracker using api-wxdata v2 storm data, drawn on a Leaflet map with a MapLibre GL vector-tile basemap.

Replaces the legacy iframe at webapi.wral.com/api/html/30 (which wrapped Baron's mapv2 widget). All data comes from https://api.wral.com/wxdata/v2/hurricanes/active.

Usage

<wral-hurricane-tracker
    basin="atlantic"
    refresh-seconds="0"
    wxdata-base="https://api.wral.com/wxdata/v2"
    style-url="https://demotiles.maplibre.org/style.json"
></wral-hurricane-tracker>

<script type="module" src=".../define.standalone.js"></script>

Attributes

| Attribute | Default | Description | |---|---|---| | basin | atlantic | Storm basin to track. Passes through to wxdata. | | wxdata-base | https://api.wral.com/wxdata/v2 | Base URL for the wxdata endpoint. | | refresh-seconds | 0 | Auto-refetch cadence in seconds. 0 disables auto-refresh. | | style-url | WRAL's MapTiler style (matches wral.com/dashboard) | MapLibre style URL. Defaults to WRAL's custom MapTiler style for visual consistency across surfaces. Override for local dev / alternate environments. |

Builds

• Library: dist/index.mjs + dist/define.mjs. Consumer bundles lit, leaflet, maplibre-gl, and @maplibre/maplibre-gl-leaflet.
• Standalone: dist/define.standalone.js. Single file with all deps inlined; drop into any page via <script type="module" src="…">.

Development

npm install
npm run dev      # Vite playground at http://localhost:5173/
npm run lint
npm run build    # both lib + standalone outputs in dist/

Data shape

The component reads /hurricanes/active?basin=<basin> and expects:

{
    "data": {
        "basin": "atlantic",
        "count": 0,
        "storms": [
            {
                "name": "Erin",
                "classification": "TS",
                "position": {"lat": 25.1, "lon": -74.8},
                "max_winds": 55,
                "min_pressure": 1002,
                "movement": {"direction_deg": 320, "speed": 18},
                "track": [{"lat": ..., "lon": ...}, ...],
                "forecast": [{"lat": ..., "lon": ..., "time": "…"}, ...],
                "cone": [[lat, lon], ...]
            }
        ],
        "season": {"year": 2026, "named_storms": 0, "hurricanes": 0}
    }
}

If the live shape differs (e.g. cone as GeoJSON), the parsing in src/map.mjs is the single place to adjust.