Components
Loading preview...
Interactive map controls for zoom, compass, geolocation, and fullscreen actions.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-map-controls"use client";
import { Map, MapControls } from "@/components/ui/mapcn-map-controls";
export default function MapControlsDemo() {
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={[2.3522, 48.8566]} zoom={10}>
<MapControls
position="top-right"
showZoom
showCompass
showLocate
showFullscreen
/>
</Map>
</div>
</div>
);
}
export { MapControlsDemo };