Boundary Map

Site boundary parcels as filled polygons — a translucent brand fill, a brand-600 outline and a hover state that lifts the fill and thickens the line. The camera fit-bounds to all parcels.

$bunx shadcn@latest add @nx-ui/boundary-map
Registry item
Installs withmap-viewutils

Restoration parcels

Three parcels of a Brighton restoration site over satellite imagery. Hover to highlight a parcel; click to select it (shown below the map).

Hover a parcel to highlight it; click to select.

Over the light basemap

The same parcels on the branded light basemap, where the brand fill and outline carry the site extents on their own.

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
parcels*BoundaryParcel[]
classNamestring
onSelectParcel(parcel: BoundaryParcel) => voidFired when a parcel is clicked.

…extends Omit<MapViewProps, "children" | "onClick" | "interactiveLay…