MapWithSearch

A composite map input pairing a draggable Leaflet marker with an address-search combobox, kept in two-way sync.

Installation

pnpm dlx shadcn@latest add @shadmin/map-with-search

Selecting a search result updates lat/lng/address and recenters the marker.
Dragging the marker triggers a reverse geocode that updates the address field.

Must be rendered inside a React Hook Form context (e.g. <SimpleForm>).

Usage

import { MapWithSearch } from "@/components/leaflet";
 
<SimpleForm>
  <MapWithSearch
    latSource="lat"
    lngSource="lng"
    addressSource="address"
    height={400}
  />
</SimpleForm>;

Props

Prop	Required	Type	Default	Description
`latSource`	Required	`string`	-	RHF field name for latitude.
`lngSource`	Required	`string`	-	RHF field name for longitude.
`addressSource`	Required	`string`	-	RHF field name for the human-readable address (display name).
`height`	Optional	`number \| string`	`400`	Height of the map container.
`defaultZoom`	Optional	`number`	`13`	Initial zoom level.