Tuesday, August 20, 2024

How to Make Your Own Map Jigsaw Puzzle

I've been having a lot of fun over the last few days playing the map puzzles created by the Map Puzzle Factory. However I have been a little frustrated by the Japanese place-names used in the puzzles. I therefore decided to try to create my own map jigsaw puzzle using a map in which the place-names are displayed in English.

My Scrambled City game is a simple map of the City of London. Press the 'Scramble' button and all the map-tiles will be scrambled. All you have to do then is re-arrange the map-tiles and put them back in their correct positions.

If you want to create your own version of the map you just need to remix the Glitch page of my Scrambled City game and change the 25 map-tile URLs to the OSM map-tiles for the part of the world which you wish to map.

My map consists of 25 scrambled OpenStreetMap map-tiles. To download the URLs automatically for an area I wrote a little Python script to grab the map-tile image addresses from OpenStreetMap:

def generate_tile_urls(x_start, y_start, z, num_tiles=5):
    base_url = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
    urls = []

    for x in range(x_start, x_start + num_tiles):
        for y in range(y_start, y_start + num_tiles):
            url = base_url.format(z=z, x=x, y=y)
            urls.append(url)

    return urls

x_start = 32748 # starting x-coordinate
y_start = 21787 # starting y-coordinate
z = 16 # zoom level

tile_urls = generate_tile_urls(x_start, y_start, z)
for url in tile_urls:
    print(url)
If you want to create your own map you can adjust the x_start and y-start coordinates in this Python script. This will allow you to download the map-tile URLs for a 5x5 grid starting at your preferred position.

The image URL of an OpenStreetMap map-tile is in the format of:
https://tile.openstreetmap.org/{z}/{x}/{y}.png
You can get the OpenStreetMap x,y coordinates for a location using Geofabrik's Tile Calculator. The map menu of the Tile Calculator has a 'Tile coordinates' option. You need to select this option to view the tile coordinates for each map-tile image overlain on the map. You can then simply select the map-tile where you wish to start your 5x5 map grid (the top-left corner of your map) and change the x,y coordinates in the Python script to the x.y coordinates displayed on Geofabrik's Tile Calculator (you can also adjust the zoom level).

No comments: