Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Emergency Services Map Block for Radix UI

Six incident places as a row of choices on a drawn street map; the choice draws solid, dashed and dotted connectors to the nearest hospital, fire station and police station, with distance and minutes in a card.

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

Answer "what is nearest" for any address, with this emergency services map for React with Radix UI. Sirenwick, a county dispatch planner, draws three hospitals (squares), three fire stations (triangles) and three police stations (circles) on an SVG street map of an invented town. Six invented incident places are a row of radio chips; choosing one draws three straight connectors from it to its nearest hospital, fire station and police station, in solid, dashed and dotted lines so the services stay apart without colour. An inset card inside the map lists the three with the distance and the minutes (the distance over a typed speed for each service); below the large breakpoint the card docks under the map. The row of chips is the way in for the keyboard and scrolls sideways on a phone. A polite message reads the result in words, and the caption says the data is a sample, not advice. It's built from native radio chips and Guides, with a CSS entrance only. For dispatch, public-safety, insurance and facilities tools.

FAQ

How is nearest worked out?

For each service, the place with the smallest straight-line distance in drawing units to the incident wins, and the distance in kilometres is that number over UNITS_PER_KM. Minutes are the kilometres over the service's typed speed (speed, in km an hour), never under one. It is not a route: in your app use a routing service's travel time and keep the choice of the smallest.

How do I use my own places and facilities?

Edit SERVICES (each has a label, a dash pattern, a speed and its places with a position in the drawing's 480 by 360 units) and INCIDENTS. The pins, connectors and the card all read these lists, and a fourth service only needs a new entry and a pin shape.

Is this advice for a real emergency?

No. The facilities are invented, the town is a drawing and the caption says the data is a sample, not advice. In a real emergency call your local emergency number.

Can I use it without a mouse?

Yes. The chips are real radio buttons in a group named Where it happened: the arrow keys move between them and choose, and the result is written out in the card and spoken by a polite message. The pins and connectors are decoration for assistive technology.

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

All of it. Nothing is dispatched, called or sent. In your app replace the typed incident places with the address a call-taker enters, geocode it on your server, and rank facilities by live availability as well as distance.

How does it look on a phone?

The chips become one sideways row at the top, the map follows at a fixed height and the card docks under it as a band, so the three lines are never hidden behind the drawing.

All 100 map blocks