Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Fire Stations Map Block for Vue

Five fire stations with a response-target slider from 4 to 10 minutes that sets their circles, fourteen past incidents drawn solid or hollow, a count of those reached and the ones that are not.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show how much of a county an engine can reach in time, with this fire stations map for Vue with Ark UI. Cinderwatch, a county fire service's planner, draws five numbered stations on an SVG street map of an invented county seat. A Slider sets the response target from 4 to 10 minutes, and every station gets a hairline circle of that reach. Fourteen past incidents are small diamonds, solid when a circle reaches them and hollow when none does, and the header counts them ("11 of 14 reached (79%)"). The rail lists the stations with the crew on shift as a thin Progress meter and words, plus how many incidents each reaches; pressing one thickens its circle. Under the map a band names the incidents no station reaches, each with its nearest station and its time, and an empty state replaces it when everything is reached. On a phone the rail becomes a row of chips above the map. It's built from Slider, Progress, Empty and Guides, with a CSS entrance only. For emergency planning, public-safety and facilities dashboards.

FAQ

How do I use my own stations and incidents?

Edit STATIONS (name, crew on shift and a position in the drawing's units) and INCIDENTS (a name and a position). The counts, the circles and the list of misses are all worked out from those two lists and the slider, so nothing else is typed twice. CREW is the size of a full shift.

How is reach worked out?

An incident is reached when the straight line to its nearest station is no longer than the target minutes times UNITS_PER_MIN, a typed engine pace in drawing units. It is a simplified model, not a routing result, and the caption says the drawing is not to scale and the data is a sample, not advice. In your app use drive times from a routing service and keep the same "reached or not" comparison.

Why are the pins shapes and not colours?

Shape and fill carry the meaning so it works in any theme and for any eye: squares are stations, a solid diamond is reached and a hollow one is missed. The list of misses and the counts say the same in words.

Can I use it without a mouse?

Yes. The slider takes the arrow keys and speaks its value in minutes, each station is a button in the rail, and the missed incidents are a list. A polite message gives the new count once the slider settles.

What stays local in the demo, and how do I wire it up?

All of it. The stations, the crews and the incidents are typed samples and nothing is dispatched. In your app load past incidents for the chosen period and the live crew counts from your records system.

How does it look on a phone?

The slider sits first, the stations become a scrolling row of chips, and the map follows at a fixed height. The list of misses keeps its own height and scrolls inside, so moving the slider never changes the length of the page.

All 100 map blocks