MarkerContent

Component 80

About

Custom marker content rendered inside a MapLibre marker.

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

Code

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

Usage.tsx

import { Map, MapMarker, MarkerContent, MarkerTooltip } from "@/components/ui/mapcn-marker-content";

const locations = [
  { id: 1, name: "Empire State Building", lng: -73.9857, lat: 40.7484 },
  { id: 2, name: "Central Park", lng: -73.9654, lat: 40.7829 },
  { id: 3, name: "Times Square", lng: -73.9851, lat: 40.758 },
];

function MarkerContentDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8 text-foreground">
      <div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border shadow-sm">
        <Map center={[-73.9857, 40.7484]} zoom={11}>
          {locations.map((location) => (
            <MapMarker key={location.id} longitude={location.lng} latitude={location.lat}>
              <MarkerContent>
                <div data-mapcn-marker={location.name} className="size-5 rounded-full border-2 border-white bg-blue-500 shadow-lg transition-transform hover:scale-110" />
              </MarkerContent>
              <MarkerTooltip>{location.name}</MarkerTooltip>
            </MapMarker>
          ))}
        </Map>
      </div>
    </div>
  );
}

export default function MarkerContentDefaultDemo() {
  return <MarkerContentDemo />;
}

export { MarkerContentDefaultDemo };