shadcn.io is not affiliated with official shadcn/ui
Transit Routes Map Block for Radix UI
A schematic transit map with three solid metro lines and two dashed bus lines; two selects pick a start and an end station, and the quickest route with at most one change is drawn and listed stop by stop.
Installation
Overview
Plan a trip on a schematic network, with this transit routes map for React with Radix UI. Tramhollow, a city transit agency, draws three metro lines (A, B and C, solid) and two bus lines (D and E, dashed) as a diagram with octilinear lines, a letter tile at each line's end and a ring at every interchange. Two native selects, From and To, sit above the map and list twenty stations. The route is the one with the fewest changes, then the quickest: a ride on one line if any serves both stations, else a ride, a change and a ride, tried over the typed lines, with a minute for roughly every 30 drawing units and three minutes for a change. The route is drawn over the map with a halo, tagged at both ends, and listed stop by stop under it with a tile for each line and "Change here" at the interchange. When two changes would be needed the list says "No route with one change" in an empty state of the same height. It's built from Native Select, Empty and Guides, with a CSS entrance only. For transit agencies, city guides and travel apps.
FAQ
How is the route found?
bestTrip first looks for a line that serves both stations. If there is none it tries every pair of lines that share an interchange, riding the first to it and the second from it, and keeps the quickest. A route needing two changes is not searched, which is why some pairs, such as Cider Gate to Harbour Steps, answer "No route with one change".
Where do the minutes come from?
Each hop between neighbouring stations takes the distance between them in drawing units over UNITS_PER_MINUTE, at least one minute, and a change adds CHANGE_MINUTES. They are sample figures; in your app use timetable data.
How do I use my own lines?
Edit STATIONS (a name and a position in the 480 by 360 units) and LINES (the station ids in order, whether the line is a bus line, and where its tile goes). Keep lines meeting only at stations, and the interchange rings, the selects and the search follow.
Can I use it without a mouse?
Yes. The two selects are native controls, the route is an ordered list read stop by stop with each stop's line, and a polite message says the result when either select changes. The map is decoration and is hidden from assistive technology.