shadcn.io is not affiliated with official shadcn/ui
Flood Zones Map Block for Ark UI
Four nested flood extents for the 1 in 10, 1 in 50, 1 in 100 and 1 in 500 year events along a drawn river, a period toggle, four assets marked inside or dry, a status table and three past floods.
Installation
Overview
Show which buildings a river can reach and how often, with this flood zones map for React with Ark UI. Rivermark, a flood-risk map, draws an invented town (Ashgate) on the River Ashe as an SVG street map with four nested flood extents. A Toggle Group picks the return period (1 in 10, 1 in 50, 1 in 100 or 1 in 500 years) and the extents up to it are shaded on top of each other, so the shade is densest beside the river and the outline goes from solid to dashed, dotted and long-dashed as the event gets rarer. Four assets (a hospital, two schools and a substation) are solid when the extent holds them and hollow when dry, and a Table beside the map names each with its status and the first period that reaches it. Three past floods sit on the river as years, with the period each came closest to. The count above the map says "3 of 4 assets inside", and a polite message reads the same in words. It's built from Toggle Group, Table and Guides, with a CSS entrance only. For flood-risk, insurance, planning and utilities tools.
FAQ
How do I use my own river and assets?
Edit RIVER (the river's line as one y value every 40 units), SPREAD (how much wider the flood runs beside each sample), PERIODS (the base half-width of each extent) and ASSETS (a name, a kind and a position). The shaded shapes, the inside and dry marks and the table are all worked out from those lists, so nothing is typed twice.
How is an asset counted as inside?
An asset is inside when its distance from the river's line is within the extent's half-width at its place, read straight between the typed samples. That is the same shape the drawing paints, so the table and the map never disagree. It is a simplified model, not a hydraulic one: in your app use the polygons from your flood model and a point-in-polygon test.
Why are the levels not coloured?
The period is in the toggle's words, and the shade and the outline carry the weight so the map reads in any theme and for any eye: denser shade and a solid line are the frequent events, a sparse long-dashed line is the rare one. The status is a word in the table too.
Can I use it without a mouse?
Yes. The toggle group takes the arrow keys and every asset is a row in the table with its status in words. A polite message reads the count and the names once the period changes.
What stays local in the demo, and how do I wire it up?
All of it. The town, the river and the assets are invented samples for a place that does not exist, and the caption says they are not for real emergencies. In your app load the extents from your flood model or the authority that publishes them, and never present a drawing like this as an official flood warning.