LatLngInput

Form input that renders a draggable Leaflet marker. Clicking the map or dragging the marker writes to two React Hook Form fields (latSource and lngSource).

Installation

pnpm dlx shadcn@latest add @shadmin/lat-lng-input

Usage

import { LatLngInput } from "@/components/leaflet";
 
<Create>
  <SimpleForm>
    <LatLngInput
      latSource="lat"
      lngSource="lng"
      defaultPosition={[48.85, 2.35]}
      height={300}
      label="Location"
      helperText="Click or drag the marker to set a location."
    />
  </SimpleForm>
</Create>;

Both latSource and lngSource must exist as fields in your form (add them as hidden inputs or populate them via defaultValues if needed).

Props

Prop	Required	Type	Default	Description
`latSource`	Required	`string`	-	RHF field name for latitude.
`lngSource`	Required	`string`	-	RHF field name for longitude.
`defaultPosition`	Optional	`[number, number]`	`[0, 0]`	Initial map center `[lat, lng]` when no form value is present.
`zoom`	Optional	`number`	`13`	Initial zoom level.
`height`	Optional	`number \| string`	`300`	Height of the map container (px or CSS unit).
`tileUrl`	Optional	`string`	OpenStreetMap tile URL	Tile layer URL template.
`attribution`	Optional	`string`	OpenStreetMap attribution	HTML attribution string.
`label`	Optional	`ReactNode`	-	Label rendered above the map.
`helperText`	Optional	`ReactNode`	-	Helper text rendered below the map.