Getting Started
Templates
Components
An interactive map picker combining Leaflet maps with a glassmorphism-styled location list panel. Features smooth pan animations, paginated location cards, and a floating selection indicator.
Key Features:
import { MapLocationPicker } from "@/components/ui/map-location-picker"
const locations = [
{
id: "cafe-1",
name: "Central Perk",
description: "Cozy coffee shop with great pastries",
image: "/cafe.jpg",
coordinates: [40.7128, -74.006] as [number, number],
rating: 4.8,
reviews: 342,
hours: "7am - 9pm",
tags: ["Coffee", "WiFi", "Pet-friendly"],
},
{
id: "park-1",
name: "Riverside Park",
description: "Beautiful waterfront views and walking trails",
image: "/park.jpg",
coordinates: [40.8023, -73.9726] as [number, number],
rating: 4.6,
tags: ["Outdoor", "Family"],
},
]
export default function Example() {
return (
<MapLocationPicker
locations={locations}
title="Explore NYC"
defaultCenter={[40.758, -73.9855]}
defaultZoom={12}
itemsPerPage={4}
onLocationSelect={(loc) => console.log("Selected:", loc.name)}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
locations | Location[] | required | Array of locations to display |
onLocationSelect | (location: Location) => void | undefined | Callback when a location is selected |
activeLocation | Location | null | undefined | Controlled active location |
defaultActiveLocation | Location | null | null | Default active location (uncontrolled) |
defaultCenter | [number, number] | [40.758, -73.9855] | Initial map center coordinates |
defaultZoom | number | 12 | Initial map zoom level |
title | string | "Explore Locations" | Title above the location list |
itemsPerPage | number | 4 | Number of cards per page |
height | string | number | 520 | Container height |
emptyMessage | string | "No locations available" | Empty state message |
isLoading | boolean | false | Show loading spinner |
className | string | undefined | Additional CSS classes |
| Property | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique identifier |
name | string | Yes | Location name |
description | string | Yes | Brief description |
image | string | Yes | Image URL for the card |
coordinates | [number, number] | Yes | Latitude and longitude |
rating | number | No | Star rating (0-5) |
reviews | number | No | Number of reviews |
hours | string | No | Operating hours text |
tags | string[] | No | Category tags (max 3 displayed) |
The component supports both controlled and uncontrolled selection patterns:
Uncontrolled (default):
<MapLocationPicker
locations={locations}
defaultActiveLocation={locations[0]}
onLocationSelect={(loc) => console.log(loc)}
/>Controlled:
const [active, setActive] = useState(null)
<MapLocationPicker
locations={locations}
activeLocation={active}
onLocationSelect={setActive}
/>When the location list is focused:
listbox, option, tablist)