shadcn.io is not affiliated with official shadcn/ui
Hiking Trail Elevation Map Block for Vue
Four trails on a drawn massif with a position slider that moves a dot on the map and a cursor on the elevation profile, reading the kilometre, the height and the slope.
Installation
Overview
Read a climb before you lace up, with this hiking trail map for Vue with Ark UI. Cairnpath, a trail guide, draws four invented trails over a massif with contour lines, a tarn and a beck. Each trail is a typed list of points with a height in metres, and its length, its total climb, its high point and the elevation profile under the map are all derived from them. A Slider named "Position on trail" moves a dot along the chosen trail and a cursor along the profile, and reads the place in kilometres, the height and the slope, for example "Km 3.6, 540 m, 11 percent uphill". Difficulty is a shape rather than a colour: circle easy, square moderate, diamond hard. A Table lists the trails with their level, length and climb, and choosing a row draws that trail. The profile has its text equivalent in the caption. It's built from Slider, Table and Guides, with a CSS entrance only. For hiking guides, national parks, running clubs and any route with a height profile.
FAQ
How are the length, the climb and the slope worked out?
A trail is a list of x|y|metres strings parsed once. The length is the sum of the straight legs between points times KM_PER_UNIT, the climb is the sum of the rises only, and the reading at a position finds the leg that holds it and interpolates the height along it. The slope is the rise over the run of that leg, rounded to a whole percent, so it changes at each point.
How do I use my own trails?
Replace the lines in SPECS with your points, in the drawing's 480 by 360 units, with a height in metres and a level for each trail. The profile, the table and the sentences follow. In your app, project GPS tracks into the drawing's units or draw the route on your own map layer, and keep the reading function.
Are the distances and heights real?
No. The drawing is not to scale: a distance is drawing units times a typed scale, the massif is invented and the heights are sample data, which the caption says. Do not plan a day from this block.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and its spoken value is the full reading in words. The trail table is the way in: the first cell of each row is a button that marks the trail. The trailhead pins and the position dot are decoration hidden from assistive technology.