UK Level

Colour in every part of the UK you have lived in, stayed in, visited, alighted in, or merely passed through. There are 108 regions and the maximum score is 540.

Try it

Open index.html. That one file is the whole thing. The map geometry, the region notes, the styling and the code all sit inside it. There is no server to run and no folder of supporting files to keep with it, so it works from a desktop, from a phone's Downloads folder, or from any static host.

• Pick a level, then click or tap regions to paint them.
• With no level selected, clicking cycles up and right-clicking cycles down.
• Pointing at a region shows its towns, landmarks and roads.
• Your map is stored in the URL after #. Save the link and you keep the map.
• Download PNG exports the map, the score and the legend at 300 dpi, 190 mm wide. A pHYs chunk is written into the file, so print software reads it as 300 dpi rather than simply as a large number of pixels.
• The optional name field is printed under the title in the exported image.

On a phone

Below 880px the layout changes. The map moves to the top at full width. The six levels become a strip along the bottom edge, so changing colour never requires scrolling. The info card slides up above that strip and has a close button. A tooltip that follows your finger is no use on touch, because your hand covers what you are trying to read.

Layout

uk-level/
├── index.html          the built page: open this one
├── src/
│   ├── template.html   the source: HTML, CSS and JS with data placeholders
│   ├── info_data.py    towns, landmarks and roads per region
│   ├── build_single.py template plus map plus notes, giving index.html
│   ├── build_map.py    regenerates the geometry from coastline and county data
│   └── render_preview.py
├── map/
│   ├── uk-map.json     drawing geometry and metadata, reusable elsewhere
│   ├── uk.svg          flat standalone map, one <path id="XXX"> per region
│   ├── uk.geojson      the same regions in real WGS84 lat/lon, for a globe
│   └── preview.png     labelled reference image
├── docs/
│   ├── SPEC.md         which regions, why, and the state format
│   └── places.xlsx     the validated towns, landmarks and roads
└── LICENSE

Three forms of the map

uk-map.json holds the drawing coordinates the page uses. uk.svg is the same shapes as a flat standalone file, with one <path id="XXX"> per region. uk.geojson inverts the drawing projection back to real degrees. The shapes stay stylised, but every region's centroid falls within 0.2° of its true position, so the file can be projected onto a 3D globe without a conversion step.

Rebuilding

Edit src/template.html or src/info_data.py, then:

python3 src/build_single.py        # rebuilds index.html

To change the map itself:

pip install shapely cairosvg
python3 src/build_map.py           # rewrites map/uk-map.json, uk.svg, uk.geojson
python3 src/render_preview.py      # rewrites map/preview.png
python3 src/build_single.py

Localising

Every string a reader sees is in one T object and the LEVELS array, both near the top of the script in src/template.html. Translate those, rebuild, and that is the whole job.

How the map is made

The 108 counties are not drawn by hand. src/build_map.py does four things:

1. rasterises a hand-traced UK coastline onto a grid of roughly 8 km cells;
2. grows each county outward from its real centroid, with a cell budget set in proportion to its real land area;
3. enforces a minimum tile size. Cells are shuffled inland along the region adjacency graph, and where a region is pinned against the sea the coastline is allowed to bulge outward;
4. unions each county's cells and smooths the staircase edges with Chaikin's algorithm, which is symmetric under reversal, so a shared border smooths to the same curve from either side and neighbouring tiles stay welded together.

The behaviour is set by constants at the top of that file: CELL for resolution, MIN_CELLS for the clickability floor, GB, NI and ISLANDS for the coastline, and the C table for regions, centroids and areas.

Crowded areas are deliberately larger than life. The south Wales valleys, the Scottish central belt and Greater London borrow area from bigger neighbours. Cardiff, Newport and the Vale of Glamorgan are boxed in by the Bristol Channel with no room inland, so their shoreline was pushed outward instead.

Road coverage

The info card lists motorways and single-digit A-roads. Great Britain has only nine of the latter, and Northern Ireland numbers its own A1 to A8 separately, so 29 of the 108 regions have neither. Six are in England (Cornwall, Dorset, East Sussex, the Isle of Wight, Norfolk and Suffolk), nine are in Wales, and fourteen are in Scotland, including Aberdeen, Dundee, Orkney and Shetland. Those regions fall back to their main trunk road, shown in grey.

Lists are capped at three entries. Only 22 regions have more than three roads under the current rule, and Greater London has ten.

Licence and attribution

The code, the map geometry and the region data are MIT licensed. See LICENSE.

The concept is not ours. UK Level is a separate implementation of an idea by zhung, published with his permission, and written in response to his open invitation for other people to make maps of their own countries. No code from any of his projects is used here.

• 🇯🇵 Japan Level
• 🇹🇼 Taiwan Level
• 🌏 Globe Level
• Source: github.com/ukyouz/GlobeLevel

If you reuse or modify this work, keep the credit to zhung and at least one of those links. UK Level is not affiliated with zhung and is not endorsed by him.