Components
Loading preview...
A MapLibre arc layer component for curved origin-destination connections with hover details.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-map-arc"use client";
import { Map, MapArc, MapMarker, MarkerContent, MarkerLabel } from "@/components/ui/mapcn-map-arc";
const hub = { name: "London", lng: -0.1276, lat: 51.5074 };
const destinations = [
{ name: "New York", lng: -74.006, lat: 40.7128 }, { name: "São Paulo", lng: -46.6333, lat: -23.5505 }, { name: "Cape Town", lng: 18.4241, lat: -33.9249 }, { name: "Dubai", lng: 55.2708, lat: 25.2048 }, { name: "Mumbai", lng: 72.8777, lat: 19.076 }, { name: "Singapore", lng: 103.8198, lat: 1.3521 }, { name: "Tokyo", lng: 139.6917, lat: 35.6895 }, { name: "Sydney", lng: 151.2093, lat: -33.8688 },
];
const arcs = destinations.map((dest) => ({ id: dest.name, from: [hub.lng, hub.lat] as [number, number], to: [dest.lng, dest.lat] as [number, number] }));
export default function DefaultMapArcDemo() {
return <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8"><div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm"><Map center={[hub.lng, hub.lat]} zoom={1} projection={{ type: "globe" }}><MapArc data={arcs} paint={{ "line-color": "#3b82f6", "line-dasharray": [2, 2] }} interactive={false} /><MapMarker longitude={hub.lng} latitude={hub.lat}><MarkerContent><div className="size-3 rounded-full border-2 border-white bg-blue-500 shadow-md" /><MarkerLabel position="top" className="bg-background/80 rounded-sm px-1.5 py-0.5 text-[11px] font-semibold backdrop-blur">{hub.name}</MarkerLabel></MarkerContent></MapMarker>{destinations.map((dest) => <MapMarker key={dest.name} longitude={dest.lng} latitude={dest.lat}><MarkerContent><div className="size-2 rounded-full border-2 border-white bg-emerald-500 shadow" /><MarkerLabel position="top">{dest.name}</MarkerLabel></MarkerContent></MapMarker>)}</Map></div></div>;
}
export { DefaultMapArcDemo };