Voyage maps

Interactive map view of vessel routes with voyage-level filtering and table sync.

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.

Voyage maps — Mapbox view with voyage legend on the right and consumption table below.

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)

Map with all voyages drawn. Each voyage gets a unique colour from a 5-colour palette.

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

Voyage legend — click to isolate a voyage on the map and table.

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)

Voyage table beneath the map. Selecting a voyage on the map filters this table; clicking a row here highlights the legend.

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.