Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Glacier Tracking Map Block for Svelte

Three glaciers chosen in a select, each drawn with six nested survey outlines; a year toggle makes one solid and the older ones hairlines, and a card gives the retreat since 1980 and the melt rate per decade from typed terminus positions.

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

Follow a glacier's retreat, with this glacier tracking map for Svelte with Ark UI. Firnline, a glaciology institute, draws the ice outline of six survey years, 1980 to 2025, nested on one terrain for each of three glaciers. A Native Select picks the glacier and a Toggle Group picks the survey year: that year's extent is the solid, shaded one, the older surveys are hairlines, and tags mark the 1980 and chosen termini. Every outline is built from one centreline and the typed terminus position of its year, so the card reads the same numbers the drawing does: kilometres retreated since 1980, the average melt rate per decade and a list of all six termini. The drawing is a fixed view, and the card and list are the way in for the keyboard. It's built from Native Select, Toggle Group and Guides, with a CSS entrance only. For research institutes, climate dashboards and mountain tourism boards.

FAQ

How are the nested outlines drawn?

outlineOf samples the glacier's centreline curve out to the terminus of that year, widens it each way by a width that eases to the terminus, and joins the two sides into one closed path. The same function draws every year, so the outlines nest by construction.

How is the melt rate worked out?

Retreat is the 1980 terminus position minus the chosen year's, and the rate is that retreat divided by the years since 1980, times ten. For 1980 itself there is no rate and the card says so.

Is the solid outline the only way to tell the year?

No. The toggle group shows the pressed year, the year tags sit at the termini, the list marks the chosen row, and the sentence under it states the length and retreat in words.

How do I use my own glaciers?

Add an entry to GLACIERS with four centreline control points, the length of the line in kilometres, a width and six terminus positions in kilometres from the head. In your app derive the outlines from your survey polygons and keep the card's sums.

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

All of it. The three glaciers, the six surveys and every figure are invented and typed into the file; nothing is fetched, published or saved. Load the survey outlines and terminus positions from your glaciology database and keep retreatOf and rateOf.

How does it look on a phone?

The year toggle wraps above the map, the map and its legend keep their width, and the card with the survey list stacks below. Changing the glacier or the year never changes the height of the block.