Route playback

Replays a recorded track on a map fitted to it.

<GeoRoute />· loading

Tryscrub the speed chart back to the slow Suez passage after Port Said and press Play.

Installation

pnpm dlx shadcn@latest add @lumesec/geo-route

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/geo-route.json

Usage

geo-route-example.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.