shadcn.io is not affiliated with official shadcn/ui
Walkability Score Map Block for React Aria
A home pin with 5, 10 and 15 minute walking rings on a drawn district; the places inside the chosen ring are counted by category into a walk index out of 100, shown with five bars and a list of every place's walk.
Installation
Overview
Score a neighbourhood by what you can reach on foot with this walkability map for React with React Aria. Pacestone, a neighbourhood index, draws an invented district with a home pin and fourteen places in five categories: groceries, transit, parks, cafes and schools, each its own shape. A ToggleGroup picks a walk of 5, 10 or 15 minutes and the map draws that ring round the home. A place's walk is its straight-line distance in drawing units times a typed metres per unit, over a typed pace of 80 metres a minute. A place inside the ring counts, worth a full point at the door and half at the edge; each category scores what it gathers over a typed target, up to one, and the index is the five scores times their shares of 100. An inset card shows the index, "Walk index 76 of 100", with the five categories as bars, and a list gives every place with its walk in minutes. For rental sites, estate agents, relocation guides and city planners.
FAQ
How is the index worked out?
weightOf gives a place inside the ring 1 - 0.5 * (walk / ring) and nothing outside it. scoreOf adds a category's weights and divides by that category's target, capped at 1, and indexOf multiplies each score by the category's share of 100 and rounds. It is this demo's formula, not a published one, and the block says so wherever it shows the number.
Are the distances real?
No. A distance is the straight line from the home in drawing units times METRES_PER_UNIT, so a walk ignores streets, crossings and hills, and the caption says the drawing is not to scale. In your app use a walking-route service for the walk and keep the scoring functions.
Is anything told by colour alone?
No. Categories are shapes with a two-letter code, a counted place is solid and a far one is dashed, the rings differ by line style, and the list says "Counted" or "Too far" in words next to each walk.
Can I use it without a mouse?
Yes. The walk time is a toggle group that takes the arrow keys, and every place is a row button in the list that marks it on the map. The pins are hidden from assistive technology because the list says the same things, and a polite message gives the new index when the ring changes.
What stays local in the demo, and how do I wire it up?
All of it. The district, the places and the home are sample data, and nothing is looked up or sent. In your app move the home with an address search, feed PLACES from a places service, and tune CATEGORIES for the weights and targets that suit your market.