Route map

"use client";
import { RouteMap } from "@/components/ui/notchset/route-map";

/* a loop through a park on the page's paper (pass `tiles` for any XYZ provider, or `basemap` for your own vector map) */
const loop: [number, number][] = Array.from({ length: 121 }, (_, i) => {
  const t = (i / 120) * 2 * Math.PI;
  const r = 1 + 0.2 * Math.sin(2 * t + 1) + 0.09 * Math.sin(3 * t + 2);
  return [51.5262 + (Math.sin(t) * r * 0.65 * 650) / 111320, -0.1527 + (Math.cos(t) * r * 1.25 * 650) / 69300];
});

export default function RouteMapDemo() {
  return (
    <div className="w-full max-w-[560px] overflow-hidden rounded-[var(--ns-radius-card)] shadow-[var(--ns-tile-shadow)]">
      <RouteMap label="Walk route, about 3 km, a loop, fastest 1 km on the north side" points={loop} record={{ from: 20, to: 50, label: "Fastest 1 km" }} height={300} />
    </div>
  );
}