# Route playback
> Replays a recorded track on a map fitted to it.
- React: `import { GeoRoute } from "@/components/lumesec/geo-route"`
- Collection: Location (https://elements.lumesec.ai/components/location)
- Data: takes your data (`data`); shows demo data until you pass it
- Registry item: https://elements.lumesec.ai/r/geo-route.json
- Page: https://elements.lumesec.ai/components/location/route



Live preview: https://elements.lumesec.ai/view/geo-route

Demo source:

```tsx
import { GeoRoute } from "@/components/lumesec/geo-route";

export default function GeoRouteDemo() {
  return (
    <div className="grid w-full max-w-[660px] gap-2">
      <GeoRoute />
      <p className="m-0 px-1 text-[11.5px] leading-4 text-muted-foreground">
        Demo data: an invented container-ship voyage from Rotterdam to Singapore via Suez, with port stops.
      </p>
    </div>
  );
}
```

## Installation

```bash
npx shadcn@latest add @lumesec/geo-route
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/geo-route.json
```

## Usage

React:

```tsx
"use client";

import { GeoRoute, type TrackPoint } from "@/components/lumesec/geo-route";

const track: TrackPoint[] = [
  { time: "2026-05-04T07:00:00Z", lat: 53.545, lon: 9.966, speed: 0, label: "Hamburg" },
  { time: "2026-05-04T08:00:00Z", lat: 53.58, lon: 9.6, speed: 32 },
  { time: "2026-05-04T09:30:00Z", lat: 53.83, lon: 9.05, speed: 34 },
  { time: "2026-05-04T10:30:00Z", lat: 53.95, lon: 8.45, speed: 33 },
  { time: "2026-05-04T11:30:00Z", lat: 54.18, lon: 7.89, speed: 0, label: "Helgoland" },
];

export function Example() {
  return <GeoRoute track={track} unit="km/h" defaultSpeed={600} speeds={[300, 600, 1800]} loop={false} timeZone="Europe/Berlin" />;
}
```

## Behaviour

Replays a recorded track on a map fitted to it. The marker points along its heading and leaves a wake of dots that fades behind it; stops leave a small ring.

Play, pause and scrub at one hour, six hours or a day of track time per second. A speed chart under the map follows the playhead, and the time and speed roll as the marker moves.

## API reference

### Ref

`ref` points at the root `HTMLDivElement`.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).