shadcn.io is not affiliated with official shadcn/ui
Maritime Traffic Map Block for Vue
Ten vessels as heading triangles in an invented harbour approach, a vessel-type filter, a Follow switch that zooms to 2x and keeps the chosen vessel centred, and a foot with its speed, heading and port ETA.
Installation
Overview
Follow a ship into harbour, with this maritime traffic map for Vue with Ark UI. Bellbuoy, a harbour authority, draws an invented approach channel with a coast, an island, an anchorage and a dashed traffic-separation line, and ten vessels as triangles that point along their heading: cargo, tanker, ferry (hollow) and tug differ by size and fill. A Toggle Group keeps the vessel types you want, and a Switch named Follow zooms the view to 2x and keeps the chosen vessel centred. Choosing a vessel, on the map or in the list under it, fills the foot with its speed in knots, its heading in degrees with a compass word and the port ETA, worked out from the straight distance to the berth over its speed. The list is the keyboard route and the triangles are a pointer shortcut. It's built from Toggle Group, Switch, Empty and Guides, with a CSS entrance only. For harbour authorities, shipping agents and port apps.
FAQ
How is the port ETA worked out?
For a vessel that is inbound and under way: the straight distance to the berth in drawing units, over UNITS_PER_NM to get nautical miles, divided by its speed in knots, added to the time of the picture (08:40). Outbound vessels, tugs holding and the ship at anchor say so instead. It is a sketch, not a navigation aid.
How does Follow work?
The map layer is scaled to 2x about its top corner and shifted so the chosen vessel sits in the middle, with the shift clamped so the ground always covers the stage. The pins counter-scale, so triangles keep their size as the view zooms, and the strokes use a non-scaling width. With Follow off the view returns to the whole approach.
Can I use it without a mouse?
Yes. The types are a multiple toggle group, Follow is a labelled switch and each vessel in the list is a button with aria-pressed. The map is hidden from assistive technology because the list and the foot say the same things, and a polite message speaks the choice.
How do I use my own vessels?
Edit VESSELS (a name, a type, a position in the 480 by 360 units, a heading in degrees clockwise from north, a speed in knots and whether it is inbound), BERTH, CHANNEL and COAST. The triangles, the list, the foot and the ETA are all computed from them.