shadcn.io is not affiliated with official shadcn/ui
Land Parcels Map Block for Svelte
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.
Installation
Overview
Put a site together parcel by parcel, with this land parcels map for Svelte 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.