shadcn.io is not affiliated with official shadcn/ui
Forest Coverage Map Block for Ark UI
One forest region drawn as 40 by 30 cell rasters for 2005 and 2025 with a swipe slider across the foot, loss and gain counted from the two bitmaps, and four numbered reforestation projects.
Installation
Overview
See what a forest lost and regained, with this forest coverage map for React with Ark UI. Canopymark, a conservation group, draws one region twice as a raster of 40 by 30 cells in five foreground weights from cleared ground to dense canopy. A Slider laid across the foot of the map moves a divider: 2005 shows on the start side and 2025 on the end side. Under the map the loss and gain are counted from the two bitmaps rather than typed: woodland or denser is forest, loss is forest in 2005 that is not forest in 2025, gain is the reverse, both as a share of the 2005 forest, next to the forest cover for each year. Four reforestation projects are numbered pins on the map and rows in a list with their hectares and year. The legend names the five weights in words. It's built from Slider and Guides, with a CSS entrance only. For conservation groups, land agencies and carbon accounting.
FAQ
How are loss and gain counted?
changeCount compares the two rasters cell by cell. A cell is forest from the third weight up (FOREST_FROM); loss is forest in 2005 and not in 2025, gain is the reverse, and both are divided by the number of forest cells in 2005. The figures under the map are computed, so they always match the drawing.
Is it an image?
No. The two rasters are generated at load from a few typed blobs and a seeded wobble, then drawn as one SVG path per weight with a rectangle for every run of equal cells. There are no photos and nothing to load.
How does the swipe work without a mouse?
The divider is a slider: arrow keys move it by a percent and Home and End send it to either year. Its value text says how much of the width shows 2005, and a polite message repeats that with the loss and gain once it settles.
Is the year only visible on the map?
No. The two year tags are decoration for the pointer; the sentence, the slider's value text and the figures under the map give the same in text.
What stays local in the demo, and how do I wire it up?
All of it. The region, both rasters and the four projects are invented and typed into the file; nothing is fetched, published or saved. In your app classify your imagery into the five weights, keep the two arrays and let the same changeCount do the sums.