This morning a post went by on X from jakub: a little 3D Warsaw, tilted like a model railroad on a table, with autumn trees, trams and buses rolling through it. People in the replies kept asking the same thing I was thinking. How do you make something like that?
By this afternoon I had my own. Not Warsaw, of course, but the part of Seattle I know best: the Space Needle, the Monorail, and the twin round towers of the Westin on 5th Avenue, where I spent twenty-one and a half years. Before that I lived in a basement studio at the Arkona, on 1st Avenue North right where Lower Queen Anne turns into Belltown, a short walk from Seattle Center. So this little city is a map of my own Seattle.
The fly-through, morning to night Β· OpenStreetMap data Β· built in Three.js Β· rendered frame by frame on 20 of GitHub’s free computers, no graphics card
OpenStreetMap
October color
Red and Blue
downloaded
Try it first
The best part isn’t the movie, it’s that you can fly it yourself. Drag to spin it, scroll to zoom, and tilt it all the way from a map view down to street level. Slide the clock from morning to night and the windows come on one by one. Turn on the rain if you’re feeling homesick. Ride along with either train, or turn on Live sun and the light matches wherever the real sun is over Seattle right now.
Loads the live 3D city right in this page (about 1 MB of map data) Β· or open it full screen
The Westin, the way it really stands
I had to start with the Westin. The hotel is two round towers that everybody in Seattle knows, the ones that look a little like corn cobs. The South Tower opened in 1969 with 40 floors, and the North Tower followed in 1982 with 47. They were designed by John Graham’s firm, the same one behind the Space Needle, which makes it feel right that they share this little table.
The Westin’s twin towers, with the Monorail running right past them on 5th Avenue.
Here’s a detail only somebody who worked there would catch. On my first try, the code went looking for anything named “Westin” and found three round-ish buildings, and one of them was the Westin Building across the way on 6th. That one isn’t round at all. The fix was to use the names OpenStreetMap volunteers had already given the hotel’s towers, “North Tower” and “South Tower.” Now the two round towers are the real ones, the Westin Building has its proper square-shouldered footprint, and the Monorail glides past the front of the hotel just like it always did on my way to work.
The Needle, built by hand
Nothing in the map data looks like the Space Needle, so it’s the one thing here that’s built entirely in code. It has three pairs of legs that pinch in at the waist and flare out under the saucer, a gold ring around the legs, the sunburst under the top house, a restaurant band that glows at night, and a blinking light on the spire. Two little gold elevators ride up and down the core, taking about 41 seconds each way, like the real ones.
Seattle Center in late October, with the Needle and the Monorail beams heading off toward downtown.
The Monorail, still running
The Seattle Center Monorail opened on March 24, 1962, just ahead of the World’s Fair, on a German Alweg design. It runs about 0.9 miles between Seattle Center and Westlake Center and makes the trip in about two minutes. It’s still the same two trains, Red and Blue.
In the diorama they run on the actual beams, traced from OpenStreetMap, each on its own track. They wait at the station, speed up, cruise down 5th Avenue, slow down and stop, then do it all again in the other direction. The Ride along buttons let you follow a train the whole way.
Riding along with the Red train.
The Spheres, and a sculpture park by the water
A few blocks up from the Westin are Amazon’s Spheres, three glass domes 80 to 95 feet tall that opened in January 2018. They hold about 40,000 plants from 50 countries, including Rubi, a 55-foot fig. Here they’re glass over a steel lattice, with a little cloud forest inside that glows after dark.
The Spheres from above, tucked in among the Amazon towers.
Down at the water, the Olympic Sculpture Park opened in 2007 on about nine acres for the Seattle Art Museum. It zig-zags from Belltown down to Elliott Bay, and the shoreline in front of it was rebuilt to give young salmon somewhere to rest. I kept it mostly open meadow, the way it feels when you walk it. Public art from all over the map, about a hundred pieces in OpenStreetMap, shows up as simple markers on little plinths. They mark where each piece stands without trying to copy anyone’s artwork.
Out on the bay, a green-and-white Washington State Ferry crosses back and forth, with open car decks, a pilothouse at each end, twin stacks and a foamy wake behind it.
A ferry on Elliott Bay off the Sculpture Park and the piers.
The mountain is out
Every Seattleite knows the phrase. Turn the city to face south-east and Mount Rainier rises up behind downtown, glowing pink as the sun goes down. The Olympics stand across the Sound to the west and Mount Baker sits off to the north. It’s a painted backdrop that turns with you, like the scenery at the back of a museum diorama. Switch on the rain, though, and the mountain goes away, just like it does here most of the winter.
After dark: lit windows, streetlights along the grid, and the Needle’s top house glowing.
And because it’s Seattle, there’s a rain button.
How it’s made
Everything starts with OpenStreetMap, the free map that volunteers keep up by hand. A short Python script asks the Overpass API for every building, street, park, tree and piece of public art between Seattle Center and Westlake. Then it does the GIS work: it puts everything on a flat grid in meters, gives each building its mapped height (or works one out from its number of floors), and rebuilds Elliott Bay from the coastline. It also widens each street to its proper width and plants trees along the sidewalks. The result is a single 1 MB file.
The browser does the rest, with Three.js. All 1,480 buildings are drawn as one mesh, so it stays smooth, and the trees, cars and buses are copies of a handful of shapes. The windows aren’t modelled at all. A small shader draws them onto every wall from its width and the floor height, and at night it switches on a random scatter of them. The camera has no perspective, which is what gives it that tabletop, toy-train look, and a touch of tilt-shift blur finishes the effect.
GitHub Actions keeps it up to date. Every Monday it pulls the map again, rebuilds the city and publishes it. The movie was rendered there too, frame by frame, split across 20 of GitHub’s free computers with no graphics card in sight.
Like jakub, I had help. I built this with Claude, and the split between us felt just like his: I brought the creative direction and the local knowledge (that one about the Westin Building, for example), and Claude wrote the code and tracked down the data. The whole thing is on GitHub. If you want your own town, change the box in one file and run it again.
Go deeper
The live diorama — fly it yourself: weather, live sun, trains, a 4K photo button, and links that save your exact view.
jakub’s little Warsaw — the post on X that started all this, built from OpenStreetMap and Polish public data.
Seattle Monorail: About the Monorail · HistoryLink: Monorail (Seattle) · Wikipedia: Seattle Center Monorail
Wikipedia: Westin Seattle · Skyscraper Center: Westin Seattle North Tower · South Tower
Wikipedia: Amazon Spheres · Wikipedia: Olympic Sculpture Park · The Cultural Landscape Foundation: Olympic Sculpture Park
OpenStreetMap — every building, street, tree and artwork, © OpenStreetMap contributors (ODbL). · Three.js — the 3D engine. · Shapely — the geometry. · pixi — one command to set it all up. · seattle-diorama — this project’s code.
