List map widgetPro

Places as a list and a drawn map side by side, with selection and hover synced between them. Built for full screen; on a phone the list stands alone.

Markdown

On this page

ProSix places for a late dinner with list and drawn map in sync, opening full screen with the same selection.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/list-map-widget

Usage

tsx

import { ListMapWidget } from "@/components/ui/chatcn/pro/list-map-widget"

<ListMapWidget
  places={places}
  base={district}
  you={{ x: 0.22, y: 0.5 }}
  value={selected}
  onValueChange={setSelected}
/>

Places carry a position from 0 to 1 on the map, so a tool can place them without a map provider. The base map is SVG path data in a 600 by 400 box: water, parks, main roads, streets and a few labels, drawn in the theme's quiet tints. No tiles, no keys, no tracking.

The widget sizes to its parent and switches layout on its own width with a container query: from 560 px the map sits beside the list, below it the list stands alone. Put it inside the fullscreen widget for the roomy view and keep the same value for both.

Examples

Loading, empty, error, phone and RTL

ProLoading, nothing found, an error with retry and the list only phone layout.

Props

Prop	Type	Notes
`places`	`MapPlace[]`	`{ id, name, x, y, category?, detail?, rating?, price?, distance? }`
`base`	`MapBase`	`{ water?, parks?, roads?, streets?, labels? }` in a 600 by 400 box
`value`, `defaultValue`, `onValueChange`	`string \| null`	Controlled or not
`you`	`{ x, y }`	You are here
`status`	`"ready" \| "loading" \| "error"`	Default `ready`
`empty`, `error`, `onRetry`		Copy for empty and error
`currency`	`string`	Price level symbol. Default €

Keyboard

Key	Action
`Tab`	Into the list
`ArrowUp`, `ArrowDown`	Previous or next place. Focus lifts its pin
`Enter`, `Space`	Select or clear the place

Accessibility

The list is the accessible surface: each place is a toggle button with its rating, category and price level in words. The map repeats it for sighted pointer users and is hidden from assistive tech.
Selection is announced politely by name.

Motion

Pins scale to 1.1 from their point in 150 ms when their row is hovered or focused. The place card enters in 180 ms.
Reduced motion: the card appears without movement.