shadcn.io is not affiliated with official shadcn/ui
Neighborhood Guide Map Block for React
Three neighbourhoods drawn as a lattice of districts with 25 places pinned by category as shapes, category tabs that re-draw the pins, and area cards that count and name the places and say what each area has most of.
Installation
Overview
Help someone choose where to live by what is on the doorstep, with this neighborhood guide map for React with Base UI. Hamletly, a relocation guide, draws three areas of the invented seaside town of Hollinsea as a lattice of districts in SVG, outlined where one area meets the next, with 25 places pinned as shapes (eat a circle, shop a square, green a triangle, culture a diamond). Tabs pick the category and re-draw the pins; under the map one card for each area counts the places of that category with a bar, names them, and says what the area has most of, such as Best for green space, worked out from all four counts. The lattice is jittered by a fixed hash and the shared edges are drawn once, so neighbouring districts always meet. A tab's body is rendered only while it is selected, so the places are listed once. On a phone the three cards stack under the map. For relocation, estate-agent and city-guide sites.
FAQ
How is Best for worked out?
For each area the block counts the places in all four categories and takes the category with the most; the first in the tab order wins a tie. The words come from the CATEGORIES list ("eating out", "shopping", "green space", "culture"). It is the count, not a score: an area with two parks and one shop is best for green space whatever its size.
How is the lattice drawn?
A 5 by 4 grid of vertices, 120 units apart, where the inner ones are shifted by a fixed hash so the districts look hand-drawn but are the same on the server and in the browser. Each district is one quad; a place is placed inside a quad by two fractions, so it always lands in the area it belongs to. Edges between districts are drawn once, thick where two areas meet and thin inside an area.
Why shapes and not colours?
So it reads in any theme and for people who cannot tell colours apart: the category is the shape, the active tab shows only that shape, and every place is also named in its area's card in text. The pins are hidden from assistive technology because the cards say the same things.
Can I use it without a mouse?
Yes. The tabs are a real tab list with the arrow keys, the active panel holds the map and the cards, and a polite message speaks the counts of the category by area when you change tab. Each card lists its places by name, which is the keyboard route to what the pins show.