Product design · 3D · Full-stack · 2026
Elbe LiveThe Port of Hamburg, live.
A live view of one of Europe's largest ports — Hamburg drawn from its official 3D city model, with every commercial ship on the Elbe moving in real time.
I designed and built the whole product — the visual language, the 3D scene, a control tower on my own server that listens to the ships, and the interface on top.
Hamburg traced edge by edge from the city’s own 3D model. Coloured hulls are real ships, right now.
Why a port
Hamburg lives from its port, yet most people only ever see it from the shore. Every large ship broadcasts its position, speed and destination by radio, and the city publishes a detailed 3D model of every building. The data is open. What was missing was a view that makes it readable at a glance — something closer to an architect’s drawing than a map.
What it shows
| Layer | What you see |
|---|---|
| The city | Every building drawn only with its edges. Near the camera, full detail — roofs, towers, dormers; further away, a lighter model. |
| 13 landmarks | Elbphilharmonie, Millerntor, Volksparkstadion, Rathaus, Michel, Chilehaus and more. They light up on hover and each has its own button. |
| Ships | Real-scale 3D hulls by type, a ten-minute wake, names, and a card with speed, course, size and destination. |
| The port at a glance | Ships under way by type, the ship arriving now with its time to the city, the biggest and the fastest in port. |
| The river | Water level at St. Pauli over the last twelve hours; wind, gusts and visibility. Water, piers, bridges, parks and street edges complete the plan. |
Tap a ship and its card appears beside it — translucent, so the map stays visible.
Each landmark is loaded in the city’s most detailed model. The Elbphilharmonie keeps its wave roof, line by line.
Design decisions
Outlines, not photographs. I first built a photographic version from the city’s aerial mesh. Up close it looked pixelated, so I drew the city as lines instead: sharp at any distance and far lighter to load.
Real scale, colour by type. A 400-metre container ship looks 400 metres long. Colour carries one meaning only — cargo, tanker, passenger, service — and the legend in the panel counts them live.
The panel answers a port’s questions. It doesn’t list data sources: it shows what is moving, what is arriving and how high the water is.
Calm by default. Ship names fade in only when you come close and hide when a building stands in front of them. No zoom jumps when you tap a button: the camera glides and keeps your angle.
Engineering: the hard parts
| Problem | How I solved it |
|---|---|
| Ships can’t be read from a browser | A small control tower on my server holds the single connection to the AIS stream, keeps each ship in memory (saved every minute) and serves a light JSON every few seconds. |
| A whole city, in a browser | Hamburg is streamed in tiles: detailed near the camera, simple further away, nothing beyond the fog. My server compresses the city’s tiles on the way — 160 MB down to 48 MB. |
| Smooth while it loads | The heavy work for each new piece of the city runs in background workers. The scene draws on demand and lowers its resolution slightly while the camera moves. |
| Ships between signals | Each ship glides along its course and speed until the next signal arrives, so nothing jumps. |
| The ground isn’t flat | Streets, parks and piers sit at the height of the nearest building bases, measured from the model itself. |
Up close: the Landungsbrücken pontoons, street edges and the ferries docking.
Open data, used responsibly
| Data | Source |
|---|---|
| 3D buildings and bridges | Freie und Hansestadt Hamburg, LGV (dl-de/by-2-0) |
| Ships (AIS) | aisstream.io |
| Water, piers, streets, parks | OpenStreetMap contributors (ODbL) |
| Water level · Weather | PEGELONLINE (WSV) · Deutscher Wetterdienst |
Only commercial vessels are shown; private sailing and pleasure boats are filtered out on the server. The access key never reaches the browser, and nothing is stored about visitors.
On a phone, the panel moves to the bottom and the city keeps the screen.