A location list beside a stylized map. Choosing a store pans and zooms the map to its pin, and clicking a pin selects the store. Stacks into a map with a swipeable card row below 520px.
npx shadcn@latest add https://hyperblur.dev/r/map-store-locator.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-store-locator.tsx.
import { MapStoreLocator } from "@/components/hyperblur/map-store-locator"
<MapStoreLocator onChange={(id) => console.log(id)} style={{ height: 420 }} />| Prop | Type | Default | Description |
|---|---|---|---|
| locations | StoreLocation[] | defaultStoreLocations | Stores with id, name, address, hours, status, distance, and x and y in percent of the map. |
| value | string | Controlled selected store id. Pair with onChange. | |
| defaultValue | string | Initially selected store id when uncontrolled. Defaults to the first store. | |
| onChange | (id: string, location: StoreLocation) => void | Called when a store is chosen from the list or the map. | |
| accent | string | "#2f7bff" | Selected pin, route and list highlight color. |
| zoom | number | 2 | Zoom factor used when the map focuses a store. |
| title | string | "Brightwater Coffee" | Brand name above the list. |