Homeland Map

Context

A museum display needs a map people can walk up to and touch. The subject is the Red River Métis homeland, the settlements, wintering camps, and battle sites across what's now Manitoba, Saskatchewan, and Alberta, and how they connected to each other. A flat map with pins wouldn't do it justice. The ask was something that feels like flying over the country.

I built it with Three.js in TypeScript. Right now it's a working prototype with fourteen places loaded and a display-ready build. The content is still being written.

St. Albert selected, one full orbit, with the connections and the write-up in place. Recorded from the app at twice the real speed.

3D relief map of Canada in sepia with labelled Red River Métis places across the prairies — The home view. Canada is extruded and shaded from real elevation data, toned sepia, with each place labelled.

Problem

A kiosk is a different thing from a website.

No keyboard, no mouse, no instructions. Everything has to work with one or two fingers and be obvious.
It runs unattended all day. If it crashes or freezes, nobody's there to reload it.
Staff need to add places and pictures over time without a developer.
It has to look like an artifact, not a web page. Museum lighting, a big screen, and people standing a metre away.

Approach

Three.js
TypeScript
d3-geo
Vite
Express
SQLite
Docker

The terrain. Canada's outline comes from Natural Earth through world-atlas, projected with d3-geo and extruded into a solid slab. Elevation comes from GMTED2010 tiles and Natural Earth's shaded relief, which I pulled into a height map, a mask, and a relief texture with a few scripts. A post-processing pass adds the sepia tone and vignette so it reads like an old map instead of a game.

The camera. Tap a place and the camera flies to it, tilts, and starts a slow orbit. Its connections draw in as great-circle arcs, each labelled with the distance in kilometres, and a panel slides in with the write-up and pictures. Grab the map and the orbit stops. Reset view flies you home.

Batoche selected on the map, with lines to five connected places labelled by distance and an info panel — Batoche selected. Five connections drawn as great-circle arcs with distances, and the write-up on the right.

Touch. One finger pans, pinch zooms toward your fingers, and two fingers rotate. The tricky part was that a two-finger rotate always has a bit of accidental pinch in it, so zoom waits behind a small dead zone until your fingers really spread or squeeze. Markers that would overlap on screen fold into one cluster pin with a count and split apart as you zoom in.

The data. An Express server with SQLite through Node's built-in driver, so there's nothing native to compile on the kiosk. A small admin page behind a password manages places, their connections, and pictures, with thumbnails made on upload.

Admin page listing the places with a form for editing one — The admin. Every place has a write-up, coordinates, connections, and a picture gallery, all editable by staff.

Running it. One Docker image builds the map and runs the server, with the database and uploads mounted as volumes so they survive a redeploy. On the kiosk itself it runs under a process manager that restarts it after a crash or a reboot.

Outcome

The prototype does the whole loop today, fly in, orbit, connections, panel, reset, on both mouse and touch. What's left is content, more places and pictures from the people who know the history, and then the install on the museum floor.