MapArc

"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],
}));
const settings = {
  center: [hub.lng, hub.lat],
  zoom: 1,
  interactive: false,
};

export default function DefaultMapArcDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex 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={s.center} zoom={s.zoom} projection={{ type: "globe" }}>
          <MapArc
            data={arcs}
            paint={{ "line-color": "#3b82f6", "line-dasharray": [2, 2] }}
            interactive={s.interactive}
          />
          <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 };