LineStringInput

Form input for drawing a GeoJSON.LineString. Optionally snaps drawn lines to the OSM road network via OSRM.

Installation

pnpm dlx shadcn@latest add @shadmin/line-string-input

Usage

import { LineStringInput } from "@/components/leaflet";
 
<Create>
  <SimpleForm>
    <LineStringInput
      source="geom"
      label="Route"
      defaultCenter={[48.85, 2.35]}
      snapToRoads
    />
  </SimpleForm>
</Create>;

When snapToRoads is set, the input watches the form value and replaces it with an OSRM match result whenever the line has two or more points.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	RHF field to write the geometry to.
`snapToRoads`	Optional	`boolean`	`false`	Snap drawn line to OSM roads using OSRM `match`.
`zoom`	Optional	`number`	`13`	Initial zoom level.
`defaultCenter`	Optional	`[number, number]`	`[0, 0]`	Initial map center `[lat, lng]`.
`height`	Optional	`number \| string`	`300`	Height of the map container.
`tileUrl`	Optional	`string`	OpenStreetMap tile URL	Tile layer URL template.
`attribution`	Optional	`string`	OSM attribution	Tile attribution string.
`pathOptions`	Optional	`L.PathOptions`	-	Vector styling for the drawn line.
`snappable`	Optional	`boolean`	`true`	Enable Geoman snap-to-vertex.
`snapDistance`	Optional	`number`	`20`	Snap radius in pixels.
`label`	Optional	`ReactNode`	-	Label rendered above the map.
`helperText`	Optional	`ReactNode`	-	Helper text rendered below the map.
`disabled`	Optional	`boolean`	`false`	Disable editing.
`validate`	Optional	`(v) => string \| undefined`	-	RHF-compatible validator(s).