shadcn.io is not affiliated with official shadcn/ui
Meetup Locations Map Block for React Aria
Four friends' homes on a drawn street map with a tick each; six venues are ranked by the longest walk any chosen friend would have, with dashed walks to the best one and the chosen friends' centre marked.
Installation
Overview
Help a group pick a fair place to meet, with this meetup locations map for React with React Aria. Meetwell, a group-plans app, draws the invented town of Hartsbridge as an SVG street map with a canal and a green, four friends' homes as lettered circles and six venues as lettered squares. A tick beside each friend says who is coming, and the venues are ranked by the longest walk any chosen friend would have, so the top row reads "Within 18 min". Dashed lines run from each chosen friend to the best venue, or to the one you press, and a dashed pill marks the centre of the chosen friends. Unticking someone re-ranks the venues; untick everyone and the list shows an empty state in the same box. Walks are the straight line at a typed walking pace. The ticks are native checkboxes drawn as chips. It's built from Empty and Guides, with a CSS entrance only. For event, social and group-travel apps.
FAQ
How are the venues ranked?
For each venue rankOne finds the longest walk among the chosen friends, and rankedOf sorts venues by that number, shortest first, with the venue name breaking a tie. A fair place is one where nobody has a long walk, which is not the same as the shortest total or the middle of the map; the centre pill is shown for reference only.
How is a walk measured?
It is the straight line between a home and a venue in drawing units, divided by UNITS_PER_KM and the walking pace WALK_KMH, rounded to minutes. The drawing is a sketch, so the caption says it is not to scale. In your app, use walking times from your routing service.
Can I use it without a mouse?
Yes. The four ticks are native checkboxes in one fieldset, and every venue is a button in the ranked list that sets the walks on the map to that venue. The pins are a pointer shortcut and are skipped by the Tab key.
How do I use my own friends and venues?
Edit FRIENDS and VENUES (a code, a name and a position in the drawing's 480 by 360 units each). The pins, the lines, the ranking and the list all read those two arrays.
What stays local in the demo, and how do I wire it up?
All of it. The friends, homes and venues are invented, nothing is sent to anyone and nothing asks for a location. In your app, take the homes from your members and the venues from your places search, and call the plan-sharing action from a button in the header.