shadcn.io is not affiliated with official shadcn/ui
Park Finder Map Block for Vue
Eight parks drawn at their real size on a street map, with a multiple toggle of five activities that keeps only the parks having all of them, a held-height list and an empty state naming the request.
Installation
Overview
Find the park that has everything you asked for, with this park finder map for Vue with Ark UI. Commonfield, a parks department, draws eight parks of an invented town as polygons on a street map, all on one scale, with the area in acres derived from each outline. A multiple Toggle Group of five activities, Playground, Dog run, Trails, Courts and Picnic, is an all-of filter: a park must have every activity that is on. A park that does not match stays where it is on the map, invisible, and the list under the map packs the matches, largest first, over an invisible copy of the full list so the panel keeps its height. When nothing matches, an Empty state says exactly what was asked, for example "Nothing here has a dog run, courts and picnic tables". It's built from Toggle Group, Empty and Guides, with a CSS entrance only. For parks departments, councils, family guides and any place directory with amenities.
FAQ
How is the size of a park worked out?
Each park is a typed list of corners. parkOf applies the shoelace formula to them and multiplies by ACRES_PER_SQUARE_UNIT, so a park drawn twice as large reads twice the acres, and the pill on the map and the row in the list show the same number.
Why all of the activities and not any?
A family looking for a playground and a picnic area wants both in one park, so every toggle narrows the result. The count on each toggle is the number of parks with that activity on its own. Turn a toggle off to widen the result again.
How do I use my own parks?
Edit SPECS with a name, the corners of the outline in the drawing's 480 by 360 units, and the activities the park has. Add an activity by adding a line to ACTIVITIES with its label and the phrase the status line uses. In your app, project real boundaries into the drawing's units.
Can I use it without a mouse?
Yes. The toggle group takes the arrow keys and Space, the list is the way in and marks a park on the map, and a polite message gives the number of matches once the toggles settle. The polygons and pills are decoration hidden from assistive technology.