Components
Loading preview...
A MapLibre custom layer control that toggles interactive GeoJSON park polygons over a themed map.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-custom-layer"use client";
import { CustomLayer, Map, MapControls } from "@/components/ui/mapcn-custom-layer";
export default function CustomLayerDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8 overflow-hidden">
<div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-xl border shadow-sm">
<Map center={[-73.97, 40.78]} zoom={11.8}>
<MapControls />
<CustomLayer />
</Map>
</div>
</div>
);
}
export { CustomLayerDemo };