shadcn.io is not affiliated with official shadcn/ui
Journey Map Pins Gallery Block for Vue
A walk round a drawn island: six numbered stops on a map that open a picture, Previous and Next buttons that move along the trail, and a list of the stops with their days and kilometres.
Installation
Overview
A map gallery for Vue with Ark UI. A split: at the start, a drawn island in a hairline frame, with its coast, shallows, contours and trail as paths and six numbered stops on it. Each stop is a button that opens a popover with its picture; Previous stop and Next stop under the map move the active stop along the trail, which is ringed on the map and marked in the list, with a line that says where you are. At the end, the list of stops is the real content: each has a day and the kilometres from the start (worked out from the legs), and its name is a button that sets it active. On a phone the map comes first and the list under it. The island and every picture are drawn in the theme's greys, and the map is not to scale. It's built from Guides, Popover and Button, with CSS transitions for the entrance. For travel journals, route guides, walking holidays and trails.
FAQ
How is the island drawn?
The coastline is fourteen points around a centre with seeded wobble, joined into one smooth closed path; the shallows, the land and the contours are the same shape at different sizes, and the trail is a smooth path through the stops' own coordinates. Edit STOPS and the trail follows; with a real map, replace Island with your own image and keep the pins.
What do Previous and Next do?
They move the active stop one step along the trail (the first and last are disabled at the ends), ringing its pin, highlighting its row and announcing "Stop 3 of 6, Wrenfold Wood, day 2, 17 km from the quay". They do not open the popover; pressing a pin does.
Where do the kilometres come from?
Each stop has the length of the leg that leads to it. The kilometres from the start are the legs added up, and the total and the number of days in the caption are worked out from the same list.
Which keys work?
Tab goes through the pins in trail order, then the two buttons and the list. Enter or Space on a pin opens its popover and Escape closes it, returning focus to the pin; a stop's name in the list is a button that sets it active.