Voyage maps

The Maps page lets you see where a vessel actually went. Position records from the consumption log are plotted on a Mapbox GL map, coloured by voyage, with a legend that filters both the map and the table beneath it.

​

What’s on the page

​

Vessel selector + year

A dropdown picks the vessel; the global year selector picks the year. Together they scope the position data shown.

​

Map (Mapbox GL)

Position points are connected into routes, one route per voyage. Five colours rotate from the brand palette (magenta, green, orange, purple, cyan). The map auto-fits to the vessel’s full coverage on selection. A position-count badge tells you how many records are plotted.

​

Voyage legend

The right-hand legend lists every voyage in the data with:

• Colour indicator
• Voyage name / number
• Position count
• “Selected” badge when active

Click an item to isolate that voyage on the map (others fade to 40% opacity) and to filter the table below. Click again or use the Clear button to reset.

​

Voyage table (synced)

A paginated table (10 rows per page) showing voyage number, route, period, distance, CO₂, average CII, EU ETS type, and ETS cost. The colour dot on each row matches the legend; clicking a row highlights it on the legend (and vice versa).

​

What you can do here

• Visually verify that a voyage was sailed where expected
• Trace a high-emissions voyage to its actual route
• Compare voyages by distance, fuel use, or ETS exposure side-by-side
• Use this view in customer/audit conversations as a more accessible alternative to a table

​

Tech note

The map uses Mapbox GL JS via react-map-gl. There’s also a Leaflet-based fallback (VoyageMap) available if Mapbox tiles fail to load.

​

Source

Position data is read from /api/vessels/[imo]/positions. Voyage segmentation comes from VoyageSegmentService.