Components
Loading preview...
A standalone MapLibre popup component for controlled overlays at specific coordinates.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-map-popup"use client";
import { useState } from "react";
import { Map, MapPopup } from "@/components/ui/mapcn-map-popup";
function Button({ children, className = "", variant = "default", size = "default", onClick }: { children: React.ReactNode; className?: string; variant?: "default" | "outline"; size?: "default" | "sm"; onClick?: () => void }) {
return (
<button
type="button"
onClick={onClick}
className={[
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
size === "sm" ? "h-8 px-3" : "h-9 px-4",
variant === "outline" ? "border bg-background hover:bg-accent hover:text-accent-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
className,
].join(" ")}
>
{children}
</button>
);
}
export default function DefaultMapPopupDemo() {
const [showPopup, setShowPopup] = useState(true);
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="relative h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
<Map center={[-74.006, 40.7128]} zoom={13}>
{showPopup && (
<MapPopup longitude={-74.006} latitude={40.7128} onClose={() => setShowPopup(false)} closeButton focusAfterOpen={false} closeOnClick={false}>
<div className="space-y-2">
<h3 className="text-foreground font-semibold">New York City</h3>
<p className="text-muted-foreground text-sm">The city that never sleeps. Population: 8.3 million</p>
<Button size="sm" variant="outline" className="w-full" onClick={() => setShowPopup(false)}>Close</Button>
</div>
</MapPopup>
)}
</Map>
{!showPopup && <Button size="sm" className="absolute bottom-4 left-4 z-10" onClick={() => setShowPopup(true)}>Show Popup</Button>}
</div>
</div>
);
}
export { DefaultMapPopupDemo };