tl;dr

This is a image tile browser based on Konva, specially designed for Jerry's Map-style projects.

This is a passion project at the intersection of coding, geography, and world building.

The map

I've loved maps since I was a child. I tend to doodle geographical forms, which sometimes matured into imaginary places.

At some point, inspired by Jerry's Map, I started a long term project to have these places live in a world to discover.

Building the map

Some map cards assembled in a grid, on a desk, plus a new card with a map in progress.

Some basic rules for the project:

A road map: I wanted to create a world that anybody could relate to.
A unending project: This world will survive me.
Creation over deletion: I find much more interesting to build up a mosaic (hence, the project name) of the places generated throughout the years.
Cheap to build: The physical version is done with pens and markers on 3x5 inch index cards.
Made to last: Everything gets scanned; the map can be rebuilt from the digital backup.
There might be errors: And that is fine. Same happens with real maps.
Not all is represented: Maps are, by definition, editorialized. There is more than meets the eye; it's up to the viewer to imagine it.

Scale

Approximately 1:300000. In the physical version, 5 cm represent 15 km. This is about a zoom level of 10.8 if viewing San Francisco in Google Maps or OpenStreetMap.

For orography, there are level curves every 50 units. Each unit is two meters. This means each curve represents a 100m elevation change.

On a web map, zoom changes with latitude. This is not true of this map: the zoom is constant, as if the planet were a cylinder.

Digitization and compression

When I had around 200 map pieces, I got myself a scanner and started digitizing. The scan process results in .png files of about 1500x900 pixels, around 400kb each.

Out of these, zoomed-out "thumbnail" versions were created using Python's Pillow library; each thumb measures no more than 8kb.

The Mosaic viewer

A series of map cards ordered in a grid on a wooden floor.

The viewer exists to inform about the map as a whole (without having to lay down all cards in the floor) and to show it to the world. Zooming and panning are included; at low zoom levels, the thumb images are used; the image set is swapped when the zoom is high enough.

The first version

This was created with Fabric, chosen for its OOP-style abstractions on top of the canvas API and its powerful utilities.

Fabric worked great, but it has its challenges. Using it with React required a wrapper based on this. Also, swapping between image sets when zooming presented memory issues.

The current version

When rebuilding this website in 2023, Fabric would not play well with Next.js, so I moved to Konva.

Thanks to Konva's React integration, the memory management problem was gone. Each tile is a component, and tilesets are set declaratively; React takes care of the rest.

Future plans

Some map cards on a desk, plus a plastic box that holds the rest of the map cards and some blank cards. A pen and some plastic pen cases are visible.

Some planned features include:

The aforementioned tile switcher, to select different tile &quote;styles&quote;.
Additional metadata per tile, including their date of creation, as well as an interface to explore the metadata on the map.
A slider to explore how the map tiles were created.
If there is demand for it, releasing this as a project of its own, so that it could potentially be used by other hobbyists like me.

Back to the map