Utopian London

Today's #30DayMapChallenge is Utopia.

There have been lots of pixel-art maps appearing online recently. I covered several of these projects in my recent Pixelate the World post. For today's challenge I thought it might be interesting to create a pixelated map of London – not as it is, but as it might look in an ideal world.

Greater London covers approximately 1,591 square kilometres. If each zoomed-in map tile covers roughly 0.15 square kilometres, I would need in the region of 10,600 images to create enough tiles to cover the entire capital. That's a few too many for a simple map challenge, so I decided to create a much smaller map - using just one tile - of Trafalgar Square.

My Utopian London map reimagines Trafalgar Square as a greener, more cycle-friendly urban landscape. To create the map I started by feeding an aerial image of Trafalgar Square into Gemini and asking it to transform the scene into pixel art. I also asked it to grass over the roads, plant more trees and introduce dedicated cycle lanes.

The result is a more appealing alternative vision of central London. The traffic has disappeared, roads have become green spaces, and cyclists and pedestrians have been given more room to enjoy the city.

Turning an image into a map

Having created my Utopian London image, I wanted to see if I could turn it into an interactive map. For this I used MapLibre GL JS, but without using any conventional map tiles or basemap.

MapLibre has an image source type which allows you to use an ordinary JPEG or PNG as a map layer. All you need to do is specify the four geographical coordinates corresponding to the corners of the image. MapLibre then positions the image within its map canvas, allowing you to zoom and pan around it just as you would with a conventional online map.

Because my image isn't geographically referenced, I simply assigned it an arbitrary set of coordinates. I also preserved the original image's aspect ratio (1355 × 768 pixels) to ensure that the finished map wasn't stretched.

The result is a map made from a single image. There are no OpenStreetMap tiles, no satellite imagery and no external basemap. Just my AI-generated vision of a greener Trafalgar Square, displayed using MapLibre.

For now, this is just one small block of Utopia rather than an attempt to map the whole of Thomas More's imaginary island.