shadcn.io is not affiliated with official shadcn/ui
Bike Lanes Map Block for Radix UI
Eight lanes on a drawn street map filtered by type, protected solid, painted dashed and shared dotted, with kilometres per type, lane lengths and bike-share docks showing free bikes.
Installation
Overview
See which streets have a lane you can trust, with this bike lane map for React with Radix UI. Cogwell, a city bike-share, lays eight lanes along the streets of an invented town and eight docks across it. The type of a lane is its line style rather than a colour: protected lanes are solid, painted lanes dashed and shared lanes dotted. A multiple Toggle Group shows or hides each type, and a hidden lane stays where it is, invisible, so neither the map nor the list under it moves. A foot of three cells sums the kilometres of each type from the lanes themselves and shows its share of the network with a Progress bar. Docks are squares carrying the count of free bikes, and the lists of lanes and docks give the same facts in words and are the way in for the keyboard. It's built from Toggle Group, Progress and Guides, with a CSS entrance only. For bike-share operators, city planners, cycling campaigns and any network with more than one kind of line.
FAQ
Where do the kilometres come from?
Each lane is a typed list of corners and its length is the sum of the legs between them divided by UNITS_PER_KM, so the cells, the list and the toggle labels read the same numbers and cannot disagree. The share of a type is its kilometres over the whole network, rounded to a whole percent.
How do I use my own lanes and docks?
Edit SPECS (a name, a type and the corners of the lane) and DOCKS (a place, the free bikes and the capacity). To add a type, add a line style to KINDS. In your app, feed the lanes from your road centre lines and the docks from your station status feed, and keep the summing functions.
Are the places and distances real?
No. The town and its streets are invented, the drawing is not to scale and the figures are sample data, which the caption says. Free-bike counts are typed, not live.
Can I use it without a mouse?
Yes. The toggle group takes the arrow keys and Space, each lane and dock has a row in a list, and a polite message says how many lane types and kilometres are showing once the toggles settle. The pins and lines on the map are decoration hidden from assistive technology.