shadcn.io is not affiliated with official shadcn/ui
Weather Alerts Map Block for Solid
Six alerts as polygons over a drawn county, severity as a dotted, dashed or solid step with a glyph, a type filter, and a 48-hour strip of bars that select an alert and show its advice.
Installation
Overview
Show what is in force over a county and for how long, with this weather alerts map for Solid with Ark UI. Skywarden, a weather service, draws six sample alerts as polygons over an SVG county (Yarrowick). Severity is a step and a glyph, never a colour: an advisory is a dotted outline and a circle, a watch a dashed outline and a diamond, a warning a solid outline and a square, and the fill gets heavier at each step. A Toggle Group filters the alerts by type (rain, wind, storm, cold or fog). Under the map a 48-hour strip draws one row per alert, with a bar from its start to its end against a "now" line at a fixed time; the bar is a real button, and pressing it (or the numbered mark on the map) outlines its polygon and fills the card under the map with when it was issued, when it starts and ends, in hours from now, and the advice. Alerts that the filter hides keep their rows, so nothing moves. A polite message reads the chosen alert in words. It's built from Toggle Group and Guides, with a CSS entrance only. For weather services, local councils, farms and travel apps.
FAQ
How do I use my own alerts?
Edit ALERTS: a name, a type, a severity step (1 to 3), an issued, start and end time as ISO strings, a polygon in the drawing's units, a place for its mark and the advice. The polygons, the strip, the card and the counts are all worked out from that list, and AS_OF is the fixed "now" every hour count is measured from.
Why is severity not coloured?
Warnings that depend on red and amber fail for some eyes and in some themes. Here the step is a glyph and an outline you can feel (dotted, dashed, solid), the fill gets heavier, and the word (Advisory, Watch, Warning) is written in the strip and the card.
How are the times shown?
They are typed ISO strings read with Date.parse and printed from their UTC parts, so the page prints the same text on the server and in the browser. In your app show them in the visitor's time zone after mount.
Can I use it without a mouse?
Yes. The bars in the strip are buttons in a list, each named with its alert, severity and times, and the toggle group takes the arrow keys. The numbered marks on the map are a mouse and touch shortcut to the same choice.
What stays local in the demo, and how do I wire it up?
All of it. The county and the alerts are invented samples, the caption says they are not for real warnings, and nothing is sent. In your app take alerts from the national weather service's feed in its own format and always link to the official source.