O yeah! Humanoids has a new website 🎉
Tablet featuring the Navigate app from the Port of Rotterdam.

Port of Rotterdam

Planning and visualizing global ship movements.


Planning and visualizing global ship movements.

Global ship movements

The port of Rotterdam has long been a leader in the maritime logistics sector. While it may no longer be the world's largest, Rotterdam remains the smartest port by fully embracing the digital transition of its harbor. Digital Business Solutions is the department within the Port of Rotterdam that focuses on building digital solutions and products to further optimize the maritime-logistics sector locally and globally.

Port of Rotterdam Digital Business Solutions

One of the products developed within the department is the Navigate application. Navigate serves as a '9292OV for your container,' allowing users to compare travel options from door to door and gain insights into the connectivity of a port.

We compare schedules from various providers and provide users with the option to sort based on their most important parameters.

In May 2019, we initiated development in Team Pathfinder: the development team responsible for Navigate and a variety of supporting applications. Around that time, the team began working on the second version of Navigate, specifically tailored for the Port of Gdansk.

Tablet displaying a world map with various shipping routes.
Global shipping routes visualized.


The application is built in Typescripted React with Redux as the state management. Redux is certainly not overkill for our application; it ensures that we handle large amounts of client-side data as efficiently as possible. With the new useSelector and useDispatch hooks from react-redux, we now significantly reduce the boilerplate of Redux, addressing one of the frustrations of many Redux users.

All information available through a backend service is redirected via a Backend for Frontend (BFF). We write this simple server in NodeJS, utilizing the ExpressJS framework. The Express service calls various backend services, handles all authentication, and ultimately sends all information to the React application.

A video of the Navigate interface


The port of Gdansk plays a crucial role for the Polish hinterland, connecting to container ships through an extensive train network. To effectively deliver the application to the port of Gdansk, we ensured that routes over the railway could also be supported.

For the port of Rotterdam, we added the Barge (inland shipping) modality and became more targeted in navigation. While in the initial versions of Navigate, we settled for 'The Port of Rotterdam' as a destination, we now navigate at the terminal level within ports.

A screenshot of planning a ship route.
Planning a ship route.

Calculate your route

With your current location and destination in mind, you can request a route between two points in Navigate. Calculating the route involves two steps performed by a custom-built routing engine.

  • Gathering different schedules to calculate the optimal journey. We search within the user-specified constraints, displaying only relevant results.
  • Calculating the likely route to be traveled, allowing us to visually present it to the end user.

A screenshot of an individual ship route.
An individual ship route.

What is the best combination of schedules?

From a plethora of schedules, we examine which ones can be combined to create a route from point A to B. For example, Shipping Company A has a schedule from Houston to Rotterdam, and Shipping Company B has a train schedule that passes through Rotterdam and could transport your container to Hamburg. By combining the schedules of Shipping Company A and Shipping Company B, we could offer a journey from Houston to Hamburg.

We currently have three instances of Navigate running in Sohar, Gdansk, and Rotterdam. An important detail is that all calculated journeys must be found through the Navigate port.

What does it look like?

To increase the decision-supporting value of the application and make it more appealing, we also want to visually present different options. If the route is broken down into individual parts, a route is generated for each part using an internally developed graph network for ships, trains, or trucks.

The actual journey of a ship may deviate a bit, but based on the movements of global shipping (AIS data), we can estimate how ships sail and which routes are popular. To smoothly visualize this in the browser, we need some assistance.

Heatmap of the most-traveled ship routes.
Heatmap of the most-traveled ship routes.

A map, some points, some lines

Within our team, there is sometimes joking talk about the applications we create: "Oh yes, just a map, put some points on it, peace of cake!" The core of many of our applications is Mapbox, specifically its React version: react-mapbox-gl.

You can easily and, to a certain extent, cost-effectively use the map features that come from Mapbox. Mapbox, in turn, utilizes data from the open-source OpenStreetMaps project, which, along with its community, ensures that the data worldwide is accurate.

We use Mapbox primarily to display our own data points on the globe.

The route from Houston to Hamburg

The calculated route is broken down into a list of coordinates called waypoints. Using a special geo format, GeoJSON, we can draw our waypoints as a line on a world map. And we draw a round point at each stop.

Mapbox handles all user interactions, such as zooming and moving the map. Even interaction with our drawn data points and lines can be captured with an event listener.

An example of this in Navigate is the selection of your journey. You can scroll through the list of different options, but you can also click on a line to select a journey.

Screenshot of a ship route with detailed information.
A ship route with detailed information.

On a subscription basis

Navigate is made available to ports worldwide through a subscription model. This is how the Port of Rotterdam aims to make its own innovations even more valuable.

What can Humanoids help you with?

Want to find out what we can help you with?Interested?