MarkerLabel

Component 109

About

Positioned marker labels for MapLibre marker content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MarkerLabel to your project and fits it to your theme.

Code

How MarkerLabel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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 };