# fleetmap

URL: https://sola.ysz.life/projects/fleetmap

> Van phones stream GPS to an office TV

- Type: Commercial project
- Period: Jun 2026 - Present
- Live: private
- Source: private
- Stack: Next.js App Router, TypeScript, Supabase, PostgreSQL, MapLibre, OSRM, Docker, Tailwind CSS, Base UI, shadcn/ui, Motion, Three.js, Vitest, Bash

I built fleetmap for a delivery company in Switzerland, as the screen its office keeps on the wall. It is a Next.js app on Supabase, with the map drawn by MapLibre and the road routes and arrival times worked out by OSRM.

## A live map of a delivery fleet, made for the office TV

fleetmap is the screen a delivery company in Switzerland keeps on a TV in its office. Every van is on the map and moves as it drives, so anyone in the room can see where each one is, where it's going next and whether it's running late. I built it for the company.

The console itself is internal, so everything on this page comes from a copy running on demo data: three vans driving made-up rounds through Basel, Bern and Zürich.

![The fleetmap console: a sidebar, a list of three vans and a map of northern Switzerland; tapping Van Zürich in the list flies the map into Zürich, where the van's route for the day is drawn with numbered stops and the van moves along it](https://sola.ysz.life/projects/fleetmap/live.webp)
*Picking a van on the live map.*
[Video](https://sola.ysz.life/projects/fleetmap/live.mp4)

### The whole fleet on one screen

Each van on the map points the way it's driving and glides from one reported position to the next. Its colour says how it's doing:

| Colour | The van is…                                                  |
| ------ | ------------------------------------------------------------ |
| Green  | On its round                                                 |
| Amber  | Waiting for its next job                                     |
| Red    | On course to reach its next stop more than five minutes late |
| Grey   | Silent: its phone has stopped reporting                      |

The five-minute margin is there so a little traffic doesn't set the map off.

The list beside the map has a card for every van, with the time to its next stop and how many stops are left. Nobody has to type anything to keep it current: the drivers' phones send their positions, and each van's stops for the day come in automatically.

![The live map of northern Switzerland with vans in Basel, Bern and Zürich, each pointing the way it drives; in the list, Van Bern carries a red Late tag next to On Route, and the legend along the bottom reads On Route, Waiting, Behind schedule and Stale](https://sola.ysz.life/projects/fleetmap/map.webp)
*Three vans, one of them running late.*

### One van at a time

Tap a van and the map flies to it and its route for the day. The stops are numbered in order, the next one shows when the van will get there, the stretch it has already driven turns grey, and the other vans fade back. A card on the map gives the van's speed, its arrival time at the next stop and how many orders it has on board.

![Van Zürich selected: the map zoomed into Zürich with the van's route drawn in teal through eighteen numbered stops, the part already driven in grey, the next stop marked with its arrival time, and a card showing the van's speed, arrival time and load](https://sola.ysz.life/projects/fleetmap/focus.webp)
*Van Zürich and its round.*

The detail view has the rest of the day: the distance driven, the orders collected and delivered, and the itinerary with a scheduled time for every stop. For the stops already done, it shows when the van actually got there and whether that was on time.

![The detail view for Van Zürich: cards for the load with orders collected and delivered, route progress, distance today, current speed, arrival time and stops left, above an itinerary of pickups and dropoffs where the finished stops show their scheduled and actual times with an On time tag](https://sola.ysz.life/projects/fleetmap/tracking.webp)
*The detail view, with the day's itinerary.*

### Replaying a day

Pick a van and a day in the history, and its recorded track is drawn on the map. It plays back at up to 120 times real speed with the map following the van, or you can drag the slider to any moment. The distance, the time on the road and the number of GPS points sit below the map.

![Route Replay for Van Zürich: pressing play at 120x sends the van along its recorded track through Zürich while the clock under the map runs forward, above cards for distance, duration and GPS points](https://sola.ysz.life/projects/fleetmap/replay.webp)
*Van Zürich's day so far, at 120 times speed.*
[Video](https://sola.ysz.life/projects/fleetmap/replay.mp4)

### Built for the TV

The console is laid out for a touchscreen, and both side panels fold away so the map can fill the screen. It has a light and a dark theme, and follows the system unless someone picks one in the settings. When a van falls behind, the rest of its route turns red.

![The console in the dark theme with both panels folded to thin rails: Van Bern selected on a dark map of Bern, its route drawn in red because it is behind schedule, and its card showing On Route and Late](https://sola.ysz.life/projects/fleetmap/dark-full.webp)
*Van Bern behind schedule, with the map to itself.*

The settings cover the people watching the screen:

- **Language.** The console starts in Swiss German and switches to English, with dates and times written the local way in each.
- **Contrast.** A high-contrast mode for a screen across the room.
- **Motion.** A reduced-motion mode that stops the vans gliding.

![The detail view for Van Basel in Swiss German, with the list of stops headed Halte and finished stops marked Pünktlich](https://sola.ysz.life/projects/fleetmap/de-tracking.webp)
*The detail view in Swiss German.*