shadcn.io is not affiliated with official shadcn/ui
Evacuation Routes Map Block for Ark UI
Six evacuation zones on a drawn town with a river; the chosen zone draws its route to a shelter with numbered turns, a bed meter and minutes, and a switch swaps in the longer route that avoids a bridge.
Installation
Overview
Tell people where to go and the way there, with this evacuation routes map for React with Ark UI. Egresswell, a county emergency office, draws an invented town (Cobwell) split by a river with two bridges, six zones (squares A to F) and three shelters (circles 1 to 3) on an SVG street map. A rail of six radios chooses the zone, and on a phone it becomes a scrolling row of chips. The route to the zone's assigned shelter is drawn on the streets as a dashed line, with its turns listed as numbered steps, each with its distance, and the shelter's fill shown as a thin Progress meter and in words ("412 of 600 beds"). A Switch, "Avoid Old Weir Bridge", swaps in the longer typed route for the two zones that cross it, sends one of them to a different shelter and changes the minutes, saying how much longer the trip is. Distances are straight legs over a typed scale at a typed convoy pace. A polite message reads the route in words. It's built from native radios, Switch, Progress and Guides, with a CSS entrance only. For emergency offices, councils and campus safety teams.
FAQ
How do I use my own zones, shelters and routes?
Edit ZONES (a name, a mark, a position, its usual route and its route around the bridge), SHELTERS (a name, beds and beds taken) and the typed routes, which are lists of legs with a short instruction and the next corner. The drawn line, the numbered steps, the distances and the minutes are all worked out from those legs.
How are the minutes worked out?
Each leg's straight length in drawing units over UNITS_PER_KM, added up, divided by a typed convoy pace. The drawing is not to scale, and a real service would use travel times from a routing engine that knows about closures and traffic.
What does the switch do?
It swaps each zone's usual route for its typed route around Old Weir Bridge. Zones that never cross the bridge keep their route, the two that do get a longer one (one to a different shelter), and the line under the title says how many minutes longer the trip is.
Can I use it without a mouse?
Yes. The zones are native radios with the arrow keys, the switch is a real switch, and the turns are a numbered list. A polite message reads the route when the zone or the switch changes.
What stays local in the demo, and how do I wire it up?
All of it. The town, the zones, the shelters and the bed counts are invented samples for a place that does not exist, the caption says they are not for real emergencies, and nothing is sent or ordered. In your app take the zone assignment and the live bed counts from the emergency office's records and never use a demo like this for a real evacuation.