Components
Loading preview...
A MapLibre route layer component for drawing paths and selectable route options.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-map-route"use client";
import { Map, MapMarker, MarkerContent, MarkerTooltip, MapRoute } from "@/components/ui/mapcn-map-route";
const route = [[-74.006, 40.7128], [-73.9857, 40.7484], [-73.9772, 40.7527], [-73.9654, 40.7829]] as [number, number][];
const stops = [
{ name: "City Hall", lng: -74.006, lat: 40.7128 },
{ name: "Empire State Building", lng: -73.9857, lat: 40.7484 },
{ name: "Grand Central Terminal", lng: -73.9772, lat: 40.7527 },
{ name: "Central Park", lng: -73.9654, lat: 40.7829 },
];
export default function DefaultMapRouteDemo() {
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={[-73.98, 40.75]} zoom={11.2}>
<MapRoute coordinates={route} color="#3b82f6" width={4} opacity={0.8} />
{stops.map((stop, index) => (
<MapMarker key={stop.name} longitude={stop.lng} latitude={stop.lat}>
<MarkerContent><div className="flex size-4.5 items-center justify-center rounded-full border-2 border-white bg-blue-500 text-xs font-semibold text-white shadow-lg">{index + 1}</div></MarkerContent>
<MarkerTooltip>{stop.name}</MarkerTooltip>
</MapMarker>
))}
</Map>
</div>
</div>
);
}
export { DefaultMapRouteDemo };