Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
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:
| 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)