shadcn.io is not affiliated with official shadcn/ui
Hotel Finder Map Block for React Aria
A pan-and-zoom street map of hotel prices per night with a Search this area button that lists only the hotels inside the frame, a nights field with a tax-inclusive total and a sort.
Installation
Overview
Let travellers search the part of the city they are looking at with this hotel finder map for React with React Aria. Lodgewell, a hotel search, draws the invented town of Skelbourne as an SVG street map that pans and zooms inside its frame, with ten hotels as pills showing the price of a night. Drag the map with a mouse or pen, focus it and use the arrow keys, plus, minus and 0, or press the zoom in, zoom out and reset buttons; a touch keeps scrolling the page. Once the view differs from the last search a "Search this area" button appears on the map, and pressing it lists the hotels whose pin is inside the frame ("4 hotels in this area") and draws their pills solid while the others turn dashed. A nights Number Input from 1 to 7 turns each night into a total with a typed 12.5 percent tax in integer cents, and a native select sorts the list by price, rating or distance from the centre. A search that finds nothing shows an empty state in the same box. A polite status line says when the map moved and what the search found. It's built from Number Input, Native Select, Button, Empty and Guides, with a CSS entrance and a zoom transition that reduced motion turns off. For hotel search, travel planners and booking sites.
FAQ
How do I fill it with my hotels?
Edit HOTELS. Each hotel has a name, a nightly price in integer cents, a rating in tenths and an x and y in the drawing's 480 by 360 units. In your app project each hotel's latitude and longitude onto your map and replace insideOf, which today tests a pin against the frame, with a bounds query from your map library.
How do the pan and zoom work?
The view is { k, tx, ty }: a zoom of 1, 1.5, 2 or 3 and the offset of the drawing in percent of the frame, clamped so the drawing always covers it. One layer is moved with a CSS transform and the pills are scaled back by 1 / k so they keep their size. The wheel never zooms, so the page keeps scrolling.
Can I use it without a mouse?
Yes. The map takes focus: the arrow keys move it by a tenth of the frame, plus and minus zoom, and 0 resets. The three buttons do the same, and pressing "Search this area" moves focus to the results heading. Each result is a button in the list that marks the hotel; the pills are hidden from assistive technology and skipped by the Tab key.
How is the total worked out?
The nightly price in cents times the nights, plus tax: the subtotal times 125 thousandths, rounded half up to the cent. Everything stays in integer cents until it is formatted, so the totals never drift. Change TAX_PER_MILLE to your rate.