BUILD LOG · MAPS · THREE.JS

Isometric Kraków: building a live 3D map of the whole city in the browser

How I built Tiny Kraków, an isometric 3D map of the whole city that runs live in your browser from open data (OpenStreetMap and GUGiK terrain), inspired by Isometric Warsaw and Isometric NYC.

By Sergio Carcamo · 4 November 2026 · 5 min read

Tiny Kraków is an isometric 3D map of the whole city, drawn live in your browser from open data. Drag to explore, scroll to zoom, rotate with Q and E, and switch between day, dusk, night and winter. Open the map →

Try it: zoom in on Wawel Hill or the Main Market Square, switch to night to see the windows light up, and look for the trams on the Vistula bridges. There are a few secrets too: tap things.

Why an isometric map of Kraków?

I live in Kraków, and I kept seeing the same idea done beautifully for other cities. Bedirhan Yıldırım’s Isometric Warsaw is a pixel-art map of the whole of Warsaw, rendered in three.js with a limited palette and open data. Isometric NYC takes a different route: an enormous isometric pixel-art map of New York generated with fine-tuned image models. Both made me want a version of my own city, so I built one.

Mine is not pixel art. It leans cute and soft instead: pastel ground, rounded rooftops, little cars and trams, and carefully built landmarks.

Where the data comes from

OpenStreetMap for buildings, roads, rail, parks, water and tram lines.
GUGiK (Poland’s national mapping agency) for terrain heights, so Wawel Hill and the river valley actually have shape.
three.js for rendering with an orthographic camera, which gives the isometric look.

Map data © OpenStreetMap contributors. Terrain © GUGiK.

How the whole city fits in a browser tab

The expensive work happens once, offline. A bake script turns the raw data into 1 km tiles: buildings at two levels of detail in a compact gzip binary, a ground image per tile with roads, parks and water and soft baked shadows, tree positions, and an overview image for the far view.

In the browser, the map streams only the tiles in view for the current zoom. Far out you see the overview; closer in you get simplified buildings, then full buildings, trees and detailed ground. Tiles are decoded in a web worker so panning stays smooth, and old tiles are evicted to keep memory bounded. Windows, night lights and snow are shader effects rather than extra geometry, and there are no real-time shadows.

The Warsaw map takes a similar one-kilometre-square approach, which is a good sign that it suits this kind of city-scale 3D.

The details that make it feel alive

Carefully built landmarks, including Wawel, replace the plain OpenStreetMap footprints.
Cars and MPK-style trams move along real road and tram data.
Four moods: day, dusk, night and winter.
A Share button that copies a link to exactly what you are looking at: position, zoom, rotation and time of day.
A few easter eggs for people who poke around.
The edge of the map dissolves into the sky with a dithered fade instead of ending in a hard cut.

What I would improve next

The map loads quickly and covers the whole city at every zoom level, but it is far from finished:

Places just outside the map. Tyniec Abbey sits a few hundred metres past the western edge, so it is represented by a different church for now.
More accurate landmarks. They are stylised from known proportions and OpenStreetMap footprints and checked by eye, not against photographs.
Phones. It is built to stay light on memory, but I have not benchmarked it on a range of older phones.