This project began with selecting an inspirational image, a historic flow map by Charles Joseph Minard, to guide the colour palette and establish the visual tone of the basemap. The result is an interactive web map built with Mapbox GL JS and Mapbox Studio that showcases major ports worldwide while providing key contextual information through an intuitive design.

A key component of the project was popup design. Hovering over a port name displays a condensed popup with quick contextual information, while clicking opens an expanded popup with more detailed information, along with interactive controls to zoom directly to the selected port and return to the previous zoom extent.

Dashed lines connecting the ports, representing global shipping lanes, were added to the map as a custom vector layer created with the Mapbox Tiling Service (MTS) via the Mapbox Command Line Interface (CLI). Unlike with the default Mapbox Studio interface, this approach provided complete control over zoom based generalization.