Components
Loading preview...
DOM-based map markers with custom content, tooltips, popups, and draggable marker support.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-map-marker"use client";
import { useState } from "react";
import { Map, MapMarker, MarkerContent, MarkerPopup } from "@/components/ui/mapcn-map-marker";
import { MapPin } from "lucide-react";
export default function DraggableMarkerDemo() {
const [draggableMarker, setDraggableMarker] = useState({
lng: -73.98,
lat: 40.75,
});
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={12}>
<MapMarker
draggable
longitude={draggableMarker.lng}
latitude={draggableMarker.lat}
onDrag={(lngLat) => {
setDraggableMarker({ lng: lngLat.lng, lat: lngLat.lat });
}}
>
<MarkerContent>
<div data-mapcn-draggable-marker className="cursor-move">
<MapPin className="fill-black stroke-white dark:fill-white" size={28} />
</div>
</MarkerContent>
<MarkerPopup>
<div className="space-y-1">
<p className="text-foreground font-medium">Coordinates</p>
<p className="text-muted-foreground text-xs tabular-nums">
{draggableMarker.lat.toFixed(4)},{" "}
{draggableMarker.lng.toFixed(4)}
</p>
</div>
</MarkerPopup>
</MapMarker>
</Map>
</div>
</div>
);
}
export { DraggableMarkerDemo };