Components
Loading preview...
Positioned marker labels for MapLibre marker content.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-marker-labelimport { Map, MapMarker, MarkerContent, MarkerLabel } from "@/components/ui/mapcn-marker-label";
const places = [
{ id: 1, name: "The Metropolitan Museum of Art", label: "Museum", lng: -73.9632, lat: 40.7794 },
{ id: 2, name: "Brooklyn Bridge", label: "Landmark", lng: -73.9969, lat: 40.7061 },
{ id: 3, name: "Grand Central Terminal", label: "Transit", lng: -73.9772, lat: 40.7527 },
];
function MarkerLabelDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8 text-foreground">
<div className="h-[500px] w-full max-w-4xl overflow-hidden rounded-lg border shadow-sm">
<Map center={[-73.9851, 40.758]} zoom={10.5}>
{places.map((place) => (
<MapMarker key={place.id} longitude={place.lng} latitude={place.lat}>
<MarkerContent>
<div data-mapcn-rich-marker={place.name} className="size-5 cursor-pointer rounded-full border-2 border-white bg-rose-500 shadow-lg transition-transform hover:scale-110" />
<MarkerLabel position="bottom">{place.label}</MarkerLabel>
</MarkerContent>
</MapMarker>
))}
</Map>
</div>
</div>
);
}
export default function MarkerLabelDefaultDemo() {
return <MarkerLabelDemo />;
}
export { MarkerLabelDefaultDemo };