shadcn.io is not affiliated with official shadcn/ui
Satellite Imagery Map Block for Radix UI
Two capture dates of one drawn scene side by side as five-tone mosaics, a date toggle and cloud cover for each, a linked zoom to 4 times with pan buttons, a 30, 10 or 3 m resolution select and a count of cells that changed tone.
Installation
Overview
Compare a scene on two dates, with this satellite imagery map for React with Radix UI. Skylattice, an earth-observation service, draws one basin of fields, a lake, a river, woodland, scrub and a growing town as a mosaic of cells in five foreground weights, never as a photo. A Toggle Group over each view picks one of four capture dates and says how much cloud it carries; cloudy cells are hatched and blank. The two views share one zoom up to 4 times and pan with buttons, so moving either moves both. A Native Select changes the resolution, which samples the same scene into 16, 32 or 64 columns for 30 m, 10 m and 3 m. The sentence under the views counts the cells that changed tone between the two dates, "412 of 560 comparable cells changed tone", leaving out any cell either date hides. It's built from Toggle Group, Native Select, Button and Guides, with a CSS entrance only. For earth-observation services, land-change monitoring and agronomy tools.
FAQ
Where does the scene come from?
toneAt computes a tone from a position and a capture: water from a lake and a river, a town that grows with the date, woodland and scrub in fixed places, and fields that follow one of two crop schedules by season. The grids for every date and resolution are built once at load, so changing the date or resolution only picks one.
How are changed cells counted?
changesOf walks the two grids cell by cell and counts those whose tone differs, among the cells that neither date has under cloud. Choosing the same date twice says there is nothing to compare.
How do zoom and pan work, and are they linked?
One view (a zoom from 1 to 4 and an offset) feeds both views through CSS variables, so a zoom or a pan on either control moves both. The buttons are real buttons with names, the pan buttons are disabled at the edge of the scene and Reset returns to the whole scene.
How are clouds drawn?
Cells whose centre falls inside a cloud blob are hatched with a diagonal and left blank in the card tone, and each date's cloud cover is the share of the finest grid they hide. Colour is never the signal: every cell is a foreground weight, and the legend names the five in words.
What stays local in the demo, and how do I wire it up?
All of it. The basin, every mosaic and the dates are invented and typed into the file; nothing is fetched, published or saved. The dates, clouds and tones are generated in the file, nothing is fetched. In your app classify your tiles into five classes, keep the grids per date and resolution and reuse changesOf.