Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Land Parcels Map Block for Ark UI

Twelve parcels of an invented district with a zoning letter and acres each: press them to assemble a site with a heavy outline, a card for total area, zone mix and whether the site is contiguous, and a switch that dims parcels not for sale.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Put a site together parcel by parcel, with this land parcels map for React with Ark UI. Platline, a land survey office, draws twelve parcels of the invented district of Cullbrook on a lattice whose neighbours share every border, each with a zoning letter (R, C, I or A) and an area in acres. Pressing a parcel on the map, or ticking its row in the list, adds it to the site: a heavy outline runs round the union of the chosen parcels, and a card says the total area, the mix of zones and whether the site is contiguous, which is worked out from the lattice vertices the parcels share, so touching at a corner does not count. A Switch dims the parcels that are not for sale. The list is the way in for the keyboard and the map is a pointer shortcut. It's built from Switch, Button and Guides, with native checkboxes in the list and a CSS entrance only. For land surveys, development briefs and site-selection tools.

FAQ

How is the outline drawn?

Each chosen parcel contributes its four edges, named by the two lattice vertices at their ends. An edge that appears once is on the boundary of the site and an edge that appears twice is shared by two chosen parcels, so only the first kind is drawn. The result is one path made of segments, which is why the outline follows the union exactly even when the parcels are irregular.

How is contiguity decided?

Two parcels are neighbours when they share two lattice vertices, a whole edge. A breadth-first walk starts at the first chosen parcel and follows neighbours inside the chosen set; the site is contiguous when the walk reaches every chosen parcel. Parcels that meet only at a corner share one vertex and are not joined.

How do I use my own parcels?

Edit LINES: a lattice cell, a lot name, a zone letter, the area in tenths of an acre and 1 when the parcel is for sale. Add a zone to ZONES. In your app replace the lattice with your cadastral polygons; keep the idea of counting edges by their end points, which only needs shared vertex ids.

Can I use it without a mouse?

Yes. Every parcel is a native checkbox in the list, which is a scroll region of its own, and the Clear button and the switch are ordinary controls. The parcels on the map are skipped by the Tab key and hidden from assistive technology. A polite message gives the area, the zone mix and the contiguity once the choice settles.

What stays local in the demo?

All of it. The parcels are invented sample data, not a survey, and nothing is bought, filed or saved. In your app send the chosen ids to your parcel or deal service when the site is final.

How does it look on a phone?

The switch sits above the map, which keeps its full width and a fixed height. The site card and the list of parcels stack under it, and the list scrolls in a box of its own so adding parcels never changes the page's height.