Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Agricultural Fields Map Block for Svelte

Ten fields of an invented farm shaded by soil moisture with crop codes, a slider that sets an irrigation threshold from 30 to 70 percent and rings the fields under it, with their acres and litres, and a table of moisture and harvest dates.

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

Decide what to water, with this agricultural fields map for Svelte with Ark UI. Furrowmark, a farm management app, draws ten fields as plots on a lattice where neighbours share every hedge. Each plot carries a two-letter crop code and its soil moisture, shaded in one of five foreground steps, darker for wetter. A Slider sets the line from 30 to 70 percent: the fields under it get a thick dashed ring and a drop, and the band under the map totals their fields, acres and litres, worked from each crop's litres per acre for every point of shortfall. A Table beside the map lists every field with its crop, acres, moisture and harvest date, and says in words which need water. The table is the way in for the keyboard; the map is hidden from assistive technology. It's built from Slider, Table and Guides, with a CSS entrance only. For farm managers, agronomists and irrigation planners.

FAQ

How are the litres worked out?

For each field under the line, acres times the points of shortfall times that crop's litres per acre per point, from the LINES data. The totals add every field under the line; a field at or above it adds nothing. The rates are invented for this demo.

How are the five shades chosen?

Moisture is cut at 30, 40, 50 and 60 percent into five steps, and the legend names each range. The steps are fixed rather than relative to the farm, so a field keeps its shade as the slider moves.

Is the ring the only signal?

No. A field under the line also shows a drop beside its reading in the pill, and in the table its row carries a drop and a hidden "Irrigate" for screen readers.

How do I use my own fields?

Edit LINES: a lattice cell, a name, a crop code and name, acres, moisture, a harvest date and litres per acre per point. In your app replace the lattice with your own field boundaries and read the moisture from your probes.

What stays local in the demo, and how do I wire it up?

All of it. The farm, the fields, the probe readings and the water rates are invented and typed into the file; nothing is fetched, published or saved. Nothing is scheduled and no valve is opened. In your app send the chosen fields to your irrigation controller and keep thirstyAt, which decides who is under the line.

How does it look on a phone?

The map comes first at full width with the legend under it, the table stacks below, and the slider and the three totals sit at the end. The block's height does not change as the slider moves.