Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Bird Sightings Map Block for Vue

A field log over a drawn wetland: move a crosshair, choose one of six species, log a numbered sighting whose shape shows how rare the bird is, and keep a removable list with counts per species.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let birdwatchers keep a field log without leaving the map, with this bird sightings map for Vue with Ark UI. Wrenlog, a birdwatching diary, draws Hollin Mere as an SVG wetland with a mere, shallows, an island, reed beds and a boardwalk. A crosshair moves by pointer drag (mouse, pen or finger) or by the arrow keys, six units a step and thirty with Shift, and Escape puts it back. A native Select chooses one of six species and the header's one primary, a Shine Button, logs a sighting: a numbered mark drops at the crosshair, and its shape says how rare the bird is (a circle is common, a square uncommon, a diamond rare). The side list is the day's log with each sighting's place, time and a Remove button, over a count per species, and it shows an empty state when it is cleared. It's built from Select, Shine Button, Button, Empty and Guides, with a CSS entrance only. For nature, conservation and outdoors apps.

FAQ

How do I place a sighting without a mouse?

Focus the crosshair with Tab, move it with the arrow keys (Shift moves it five times as far, Escape puts it back), then press Log sighting in the header. The crosshair is named by the area it is over, such as "Crosshair over South hide", and the polite message repeats the area once it rests and the species and number once a sighting is logged.

What do the shapes mean?

Shape carries rarity, so no colour is needed: a circle is common, a square uncommon and a diamond rare, from rarity in SPECIES. The same shape is drawn in the log rows and in the counts, and the select's options say the rarity in words.

How do I use my own species and map?

Edit SPECIES (an id, a name and a rarity of common, uncommon or rare), AREAS (nine named areas, three by three) and the ground at the top of the file. SEEDED holds the sightings already in the log and LOG_MAX caps the list, which keeps its height.

What does Remove do?

It deletes that sighting from the list and the map and the polite message says which one went. The numbers of the others do not change, so a log stays referable. When the log is empty the list shows an empty state in the same box.

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

Everything: the sightings live in this tab, the times come from a typed list, and nothing is submitted or stored. In your app send the species, the position and the time to your API from logIt, and keep the optimistic row.

How does it look on a phone?

The primary and the species select come first, then the map at a fixed height, then the log and the species counts. The log is a scroll region with a fixed height, so adding a sighting never moves the page.

All 100 map blocks