Map placeholder

A location card with a monochrome street pattern seeded from the coordinates, so the same place always looks the same and nothing waits on a map provider. Drop in a static map or a live one when you have it.

Markdown

On this page

A street pattern seeded from the coordinates stands in for the map, with directions and copy.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/map-placeholder.json

Usage

tsx

import { MapPlaceholder } from "@/components/ui/chatcn/map-placeholder"

<MapPlaceholder
  name="Moscone Center West"
  address="800 Howard St, San Francisco, CA 94103"
  lat={37.7842}
  lng={-122.4016}
  meta={["Conference venue", "12 min walk"]}
/>

Examples

Loading and address only

A skeleton, and a place without coordinates.

Props

Prop	Type	Notes
`name`, `address`	`string`
`lat`, `lng`	`number`	Seed the pattern and the directions link
`meta`	`string[]`	Short facts
`src`	`string`	A static map image, shown in grayscale over the pattern once loaded
`mapSlot`	`ReactNode`	A live map in the frame
`directionsHref`	`string \| false`	Defaults to OpenStreetMap
`height`	`number`	Map frame height. Default 168

Accessibility

The map frame is an image labelled with the place and its coordinates. Directions open in a new tab.

Motion

A static map image fades in over 200 ms. The pin does not pulse.