Turning a 3D prototype into a cruise-sharing platform

What they needed

For cruise-goers, a voyage is a significant personal experience, and The Cruise Maps had built a business around helping customers commemorate it with custom maps plotted from live shipping data. With a growing customer base, they identified a natural extension: a digital platform where users could archive their cruise history and explore it interactively on the same 3D globe.

The Cruise Maps team had already built a basic prototype that placed shipping data onto a 3D globe visualisation, but lacked the engineering capacity to evolve it into a production application capable of handling user accounts, personalised data, and a consistent experience across desktop and mobile. They also needed the application to draw on the curated, verified tracks produced by Nautical Mapper rather than raw shipping data, so that users' cruise histories would reflect the same quality-controlled routes used in their printed maps.

What we built

Tech Relays built the Cruise Globe as a Next.js application with Mapbox at the heart of both the 2D and 3D globe visualisations. Supabase handled the database and user authentication, with Supabase Auth providing single sign-on (SSO) integration and giving each user a personalised account without requiring a custom identity layer. The application drew voyage data from Supabase, pulling from the curated tracks produced by Nautical Mapper so that routes on the globe matched the quality-controlled data used in The Cruise Maps' printed products. The architecture connected five systems (Next.js, Mapbox, Supabase, AWS, and Nautical Mapper) into an application The Cruise Maps could operate without ongoing engineering involvement.

The centrepiece of the experience was a cinematic 3D globe that animated each voyage as a continuous journey. A camera follows the ship's trajectory along the Mapbox GL JS rendered route, accelerating through open ocean segments and slowing as it approaches each port call, while rotating to keep coastal scenery in view throughout. The result gives users a sense of travelling the route rather than simply viewing it plotted on a map, with the voyage data itself driving the pacing of the animation.

Users could populate their cruise history in two ways. For existing Cruise Maps customers, the application connected to their Shopify account and imported their order history automatically, mapping each purchase to the corresponding curated voyage track from Nautical Mapper. Users who had taken cruises before becoming Cruise Maps customers could search for and claim their voyages manually, selecting from the voyage data held in Nautical Mapper. Both routes populated the same Mapbox-rendered globe, giving users a complete archive regardless of when they became customers.

A key technical challenge was generating the share cruise card feature on demand. Each request ran the Ramer-Douglas-Peucker algorithm to simplify and smooth the voyage track before passing it to Mapbox, which rendered an image of the route on the globe using a custom Cruise Maps style. A Python image processing pipeline then composited that render onto a cruise ticket graphic alongside the relevant voyage details, returning a shareable card in real time.

What we delivered

Tech Relays delivered the Cruise Globe in four months to an initial audience of more than 100,000 users documenting their cruise history. The share card feature generated over 1,000 social media shares, giving The Cruise Maps an organic growth channel their printed map business alone could not have produced.

What began as a product to drive printed map sales has since evolved into the commercial foundation of The Cruise Maps' travel agency, now used to display cruise itineraries and take trip bookings directly alongside their core map business. The scope of what the platform became was not anticipated at the outset; it emerged from customers finding uses for it that the original brief had not considered.