Journey Map Pins Gallery Block for React

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.

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.

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.

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.

The map fills the width, the status line between the buttons is hidden (the list says the same) and each stop's note is left to the popover; nothing scrolls sideways at 320 pixels.

The map is a drawing, so it keeps its own direction; the chevrons on the buttons turn, and the list and header follow the page.