@wral/map-center-lightbox

<wral-map-center-lightbox> — Lit web component that renders the WRAL Map Center tile grid and an interactive per-layer lightbox (region-preset switching plus a frame-animation loop), driven by the api-wxdata maps endpoints.

Replaces the legacy Baron tile widgets. All imagery comes from the wxdata maps catalog / frames endpoints.

Usage

<wral-map-center-lightbox
    base-url="https://api.wral.com/dev/wxdata/v2"
    frame-interval-ms="600"
></wral-map-center-lightbox>

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

Attributes

| Attribute | Default | Description | |---|---|---| | base-url | https://api.wral.com/dev/wxdata/v2 | Base URL for the maps endpoints. Point at the production wxdata base (https://api.wral.com/wxdata/v2) once the maps endpoints are promoted. | | frame-interval-ms | 600 | Animation cadence in milliseconds between frames in the lightbox loop. | | layers | (all) | Optional comma-separated list of layer ids to show, in order (e.g. radar,satellite,forecasts). Omit to render every layer from the catalog. Ids absent from the catalog are dropped. |

By default the component renders every layer returned by maps/catalog, in catalog order, using each layer's first listed location as the tile preview and the lightbox's initial region. Pass layers to show a curated subset (e.g. a teaser grid on a section front).

Slots

| Slot | Description | |---|---| | ad | Optional horizontal ad rail rendered inside the lightbox, below the animation. Omit it and the slot adds no markup or spacing. |

Pass the ad markup as a child with slot="ad" and the component projects it below the loop:

<wral-map-center-lightbox base-url="https://api.wral.com/wxdata/v2">
    <div slot="ad" class="opscoad-Desktop_Leaderboard" data-unit="wral-v4/weather"
         data-sizes="0x0:|767x0:728x90|1024x0:728x90,970x90,970x250" …></div>
</wral-map-center-lightbox>

Slotted content stays in the light DOM (it is not moved into the shadow root), so the ad script can find and fill the container as usual — third-party ad code generally cannot reach inside a shadow root. Because the ad only renders while the lightbox is open, lazy/viewable ad units load when a user opens the lightbox rather than on initial page load.

Builds

• Library: dist/index.mjs + dist/define.mjs. Consumer bundles lit.
• Standalone: dist/define.standalone.js. Single file with lit 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

GET {base}/maps/catalog:

{
    "data": {
        "layer_count": 12,
        "layers": [
            {
                "id": "radar",
                "title": "Radar",
                "locations": [
                    { "headline": "North Carolina", "slug": "radar_nc2d" }
                ]
            }
        ]
    }
}

GET {base}/maps/frames?slug=<slug> (frames newest-first):

{
    "data": {
        "slug": "radar_nc2d",
        "frame_count": 2,
        "frames": [
            { "url": "https://…/radar_nc2d/8220518656123.jpg", "epoch_ms": 1779481343876, "recorded_at": "2026-05-22T20:22:23.876Z" }
        ]
    }
}

A tile's preview is the newest frame of the layer's first location. The lightbox plays a region's frames oldest → newest; a region with zero frames shows a "No imagery available right now" message.