shadcn.io is not affiliated with official shadcn/ui
Apartment Finder Map Block for React Aria
A radius search for rentals: a drawn street map with a workplace pin, a slider that draws the circle and filters from 0.5 to 5 km, a bedrooms toggle with counts, rent pills and a nearest-first list.
Installation
Overview
Show renters what is close to the office, with this apartment finder map for React with React Aria. Stoopwell, a rentals site, draws the invented town of Pellmouth as an SVG street map with a river and a park, a workplace pin in the middle and eleven homes as rent pills. A Slider sets the radius from 0.5 to 5 km and draws a hairline circle round the workplace; a bedrooms Toggle Group (Any, Studio, 1, 2 and 3 beds) carries the count of homes inside the circle. A home inside is a solid pill and a row in the list at the side, nearest first, with its rent, size, move-in date and distance; a home outside stays on the map as a dashed pill and leaves the list. Pressing a pin or a row marks the home. The list is a scroll region of its own and the way in for the keyboard; the pins are a shortcut for the pointer. A polite status line speaks the result once the controls settle, and a radius with nothing in it shows an empty state in the same box. On a phone the map comes first and the list sits under it. It's built from Slider, Toggle Group, Empty and Guides, with a CSS entrance only. For rental, real-estate and relocation apps.
FAQ
How do I fill it with my listings?
Edit HOMES. Each home has an id, a name, a beds count as a string ("0" is a studio), the monthly rent in dollars, the floor area in square metres, an ISO moveIn date and an x and y in the drawing's 480 by 360 units. In your app give each listing its latitude and longitude, project them onto the map you use, and keep the distance function: it is the only place the radius is measured.
How is the distance worked out?
It is the straight line between the workplace pin and the home in drawing units, divided by UNITS_PER_KM, which is 36 here. That makes the drawing a sketch, not a measurement, and the caption says it is not to scale. With a real map, replace distanceOf with a haversine distance or, better, a travel time from a routing service, and draw the circle with the map library's own geometry.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and announces its value in kilometres, the toggle group is one tab stop, and the list of homes is a scroll region with a button per home that marks it. The pins are hidden from assistive technology and skipped by the Tab key because the list says the same things in text.
What does the status message say?
Once you stop moving the slider or change the bedrooms, a polite message says how many homes are inside, for example "6 of 11 homes within 2.0 km." It waits a moment so a drag does not read out every step.
What stays local in the demo, and how do I wire it up?
All of it. The homes are typed sample data, the map is a drawing and nothing is searched, saved or sent. Choosing a home only marks it. In your app load the homes from your listings service when the radius or the bedrooms change, and make the row open the listing page.