GeoJSONInput

Polymorphic form input for drawing any GeoJSON geometry. Renders a Geoman toolbar with one button per allowed shape kind. Defaults to allowing Point, LineString, and Polygon.

Installation

pnpm dlx shadcn@latest add @shadmin/geojson-input

Usage

import { GeoJsonInput } from "@/components/leaflet";
 
<Create>
  <SimpleForm>
    <GeoJsonInput
      source="geom"
      shapes={["Polygon"]}
      label="Polygons only"
      defaultCenter={[48.85, 2.35]}
    />
  </SimpleForm>
</Create>;

When collection is true, persists as a GeometryCollection of every shape on the map; otherwise keeps only the most recently drawn shape.

Props

PropRequiredTypeDefaultDescription
sourceRequiredstring-RHF field to write the geometry to.
shapesOptionalShapeKind[]["Point","LineString","Polygon"]Allowed GeoJSON shape kinds. Each maps to a Geoman draw button; duplicate Geoman targets are deduped.
collectionOptionalbooleanfalseWhen true, writes a GeometryCollection; otherwise keeps the most recent shape.
zoomOptionalnumber13Initial zoom level.
defaultCenterOptional[number, number][0, 0]Initial map center [lat, lng].
heightOptionalnumber | string300Height of the map container.
tileUrlOptionalstringOpenStreetMap tile URLTile layer URL template.
attributionOptionalstringOSM attributionTile attribution string.
pathOptionsOptionalL.PathOptions-Vector styling for drawn shapes.
snappableOptionalbooleantrueEnable Geoman snap-to-vertex.
snapDistanceOptionalnumber20Snap radius in pixels.
labelOptionalReactNode-Label rendered above the map.
helperTextOptionalReactNode-Helper text rendered below the map.
disabledOptionalbooleanfalseDisable editing.
validateOptional(v) => string | undefined-RHF-compatible validator(s).