Route Map
A movement route from origin to destination: branded pins at each end, a brand-navy line and a dashed yellow progress overlay clipped to the completed portion. The camera fit-bounds to the whole route.
$
Registry itembunx shadcn@latest add @nx-ui/route-mapRoute with progress
A muck-away movement from Winchester to a Brighton restoration site. Drag the slider to advance the dashed progress overlay along the route.
Progress 60%
Plain route
Just the route line and endpoint pins, no progress overlay.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
route* | [number, number][] | — | Ordered [longitude, latitude] points making up the route line. |
originLabel | string | — | Origin label shown under the start pin. |
destinationLabel | string | — | Destination label shown under the end pin. |
progress | number | — | 0–1 fraction of the route completed; drives the dashed progress overlay. |
className | string | — | — |
…extends Omit<MapViewProps, "children" | "initialViewState">