shadcn.io is not affiliated with official shadcn/ui
Wildlife Tracker Map Block for Svelte
Three collared animals followed for a sample year over a drawn reserve, with a season toggle, a species radio list, the kilometres covered each season and a bounded week-by-week replay with a pause.
Installation
Overview
Follow a season of movement, with this wildlife tracker map for Svelte with Ark UI. Collarline, a conservation biology project, follows three collared animals through a sample year of 52 weekly positions over a drawn reserve with a boundary, ridges, a river and waterholes. A Toggle Group picks Spring, Summer, Autumn or Winter: that season's weeks are drawn as a solid line, the rest of the year as a faint one, and the distance is the sum of the weekly legs, shown in kilometres with the weekly average and the dates. A list of radio rows at the side chooses the animal and shows its kilometres for the season. A "Replay season" button redraws the season one week at a time, in thirteen steps, and stops by itself; the same button pauses it, and it stays off when the visitor asks for reduced motion. It's built from Toggle Group, Button and Guides, with a CSS entrance only. For conservation projects, field research, ranger teams and any movement data over time.
FAQ
Where do the weekly positions come from?
Each animal has a typed centre for each season and a radius. positionOf moves the animal from the previous season's centre to the new one over its first weeks and adds a circular wander with a seeded wobble, so the same week always gives the same point and nothing is random at run time. The first leg of a season is the move into its range, so it counts for that season.
How do I use my own tracks?
Replace positionOf with your fixes: ANIMALS needs 52 points for each animal, one for each week, in the drawing's 480 by 360 units. The season split is 13 weeks each, set by SEASON_WEEKS, and the dates come from the first Monday in isoOf.
Are the distances real?
No. A distance is drawing units times KM_PER_UNIT, the reserve and the animals are invented and the data is a sample, which the caption says. Positions are weekly, so a real animal travels further than the line shows.
How does the replay work?
One timer adds a week every 700 ms, stops at 13, and is cleared when you pause, change the season or the animal, or leave the page. Under reduced motion the button does not start it and says so. The week reached is shown in words, and a polite message announces when it starts, pauses and ends.