45:["$","title",null,{"children":"The Colours of British Terrain | Tony Griffiths | Observable"}] 4d:T464, import * as maplibregl from "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"; // Load the MapLibre stylesheet if (!document.getElementById("terrain-map-css")) { const css = document.createElement("link"); css.id = "terrain-map-css"; css.rel = "stylesheet"; css.href = "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css"; document.head.appendChild(css); } // Create a container for the map const mapContainer = document.createElement("div"); mapContainer.style.cssText = "width:100%; height:700px; border-radius:10px; overflow:hidden;"; // Put the container into the notebook display(mapContainer); // Create the map const map = new maplibregl.Map({ container: mapContainer, style: "https://tiles.openfreemap.org/styles/liberty", center: [-3.1, 54.5], zoom: 7 }); // Add zoom controls map.addControl( new maplibregl.NavigationControl(), "top-right" ); // Clean up when the cell is rerun invalidation.then(() => map.remove()); const mapReady = new Promise(resolve => { if (map.loaded()) { resolve(map); } else { map.once("load", () => resolve(map)); } });4e:T58c,const terrainBands = [ { name: "Lowland", elevation: 0, daylight: "#A9C49A", twilight: "#284638" }, { name: "Lower hills", elevation: elevationThresholds.hills, daylight: "#C2BB85", twilight: "#455941" }, { name: "Upland", elevation: elevationThresholds.upland, daylight: "#AF936C", twilight: "#675C45" }, { name: "High Upland", elevation: elevationThresholds.moor, daylight: "#776979", twilight: "#78657B" }, { name: "Mountain Heights", elevation: elevationThresholds.summit, daylight: "#DDD8D0", twilight: "#C7C6C5" } ]; // Select the appropriate colour palette const palette = terrainBands.map((band, i) => ({ name: band.name, height: i < terrainBands.length - 1 ? `${band.elevation}–${terrainBands[i + 1].elevation} m` : `${band.elevation} m+`, color: colourMode === "Daylight" ? band.daylight : band.twilight })); display(html`

${palette.map(d => html`

${d.name}

${d.height}

${d.color}

`)}

`); 4f:Td3e,### Data sources, tools and acknowledgements **Elevation data** Elevation data are supplied by [Mapzen Terrain Tiles](https://registry.opendata.aws/terrain-tiles/), accessed through the AWS Open Data programme using Terrarium raster tiles. Mapzen Terrain Tiles combine elevation datasets from several providers, including Environment Agency data for parts of the UK, European Copernicus elevation data and global elevation models. Relevant source acknowledgements include: - UK elevation data: © Environment Agency copyright and/or database right 2015. All rights reserved. - European elevation data: EU-DEM, incorporating Copernicus data and information funded by the European Union. - Global elevation data: contributions from NOAA and the US Geological Survey. The original datasets, their geographical coverage and attribution requirements are documented in the [Mapzen/Tilezen source attribution](https://github.com/tilezen/joerd/blob/master/docs/attribution.md) and [data source inventory](https://github.com/tilezen/joerd/blob/master/docs/data-sources.md). **Basemap and cartographic tools** - [OpenFreeMap](https://openfreemap.org/) — basemap tiles and Liberty map styling. - [OpenMapTiles](https://openmaptiles.org/) — vector tile schema and cartographic styling. © OpenMapTiles. - [OpenStreetMap](https://www.openstreetmap.org/copyright) — geographical features and place names. © OpenStreetMap contributors. - [MapLibre GL JS](https://maplibre.org/) — interactive map rendering, elevation colouring and hillshading. - [Observable](https://observablehq.com/) — interactive notebook, user controls and publishing platform. **Artistic approach and interpretation** The five colour bands are an original cartographic interpretation inspired by British landscape character, progressing from green lowlands through hills and uplands to pale mountain heights. Elevation thresholds, colour palettes, shading and visual treatments were selected through experimentation. They are not an official classification of landscape, land cover or ecological habitats. The map uses actual elevation data, but the colours do not directly identify vegetation, geology, slope or land use. **Inspiration** This project was prompted by the beautifully restrained *Atlas* basemap created for TacTrace by [ORBAT Mapper](https://orbat-mapper.app/), itself inspired by traditional military atlases. The resulting work is an independent experiment in British terrain colouring, rather than a reproduction of that basemap. **AI-assisted development** This notebook was developed with assistance from ChatGPT (OpenAI), which provided guidance on Observable, JavaScript and MapLibre, including code examples, implementation techniques and debugging. The original concept, artistic direction, colour selection, threshold experimentation, visual evaluation and editorial decisions were undertaken by Tony Griffiths. The maps are generated interactively from geographical elevation data. They are not AI-generated illustrations. **Authorship and reuse** Original cartographic composition, colour choices and explanatory material © 2026 Tony Griffiths. Underlying datasets, basemap resources and software remain subject to their respective licences and attribution requirements. Created as a personal creative experiment for **#30DayMapChallenge 2026 — Day 17: Light & Dark**.50:T801,const elevationBreaks = terrainBands.map( band => band.elevation ); // Smooth: gradually blend between colour stops const smoothStops = palette.flatMap((band, i) => [ elevationBreaks[i], band.color ]); // Bands: hold each colour until the next boundary const discreteStops = palette.flatMap((band, i) => { if (i === 0) { return [elevationBreaks[0], band.color]; } const boundary = elevationBreaks[i]; return [ boundary - 0.5, palette[i - 1].color, boundary, band.color ]; }); // Select the required treatment const terrainRamp = [ "interpolate", ["linear"], ["elevation"], ...(elevationStyle === "Bands" ? discreteStops : smoothStops) ]; function showTerrainColours() { // Connect to real elevation data if (!map.getSource("terrain-dem")) { map.addSource("terrain-dem", { type: "raster-dem", tiles: [ "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png" ], tileSize: 256, minzoom: 0, maxzoom: 15, encoding: "terrarium", attribution: 'Elevation: ' + 'Mapzen Terrain Tiles (AWS Open Data) · ' + '' + 'Source credits' }); } // Find the first map label so we don't cover place names const labelLayer = map.getStyle().layers.find( layer => layer.type === "symbol" )?.id; // Apply our terrain colours if (!map.getLayer("terrain-colours")) { map.addLayer({ id: "terrain-colours", type: "color-relief", source: "terrain-dem", paint: { "color-relief-color": terrainRamp, "color-relief-opacity": 0.8 } }, labelLayer); } else { map.setPaintProperty( "terrain-colours", "color-relief-color", terrainRamp ); } } // Wait until MapLibre is ready if (map.isStyleLoaded()) { showTerrainColours(); } else { map.once("load", showTerrainColours); } 51:T628, function addFinishingLayers() { // Wait until our elevation-colour layer exists if (!map.getLayer("terrain-colours")) return; map.off("styledata", addFinishingLayers); // Keep place-name labels above our new layers const layers = map.getStyle().layers; const firstLabel = layers.find( layer => layer.type === "symbol" )?.id; // 1. Add hillshading using our existing DEM if (!map.getLayer("terrain-hillshade")) { map.addLayer({ id: "terrain-hillshade", type: "hillshade", source: "terrain-dem", paint: { "hillshade-exaggeration": 0.25, "hillshade-illumination-anchor": "map", "hillshade-illumination-direction": 315, "hillshade-shadow-color": "#493E50", "hillshade-highlight-color": "#FFF9ED", "hillshade-accent-color": "#746A61" } }, firstLabel); } // 2. Find water polygons in the original basemap const baseWater = layers.find( layer => layer.type === "fill" && layer["source-layer"] === "water" ); // Draw blue water ABOVE the terrain colours if (baseWater && !map.getLayer("terrain-water")) { map.addLayer({ id: "terrain-water", type: "fill", source: baseWater.source, "source-layer": baseWater["source-layer"], paint: { "fill-color": "#D3E6E5", "fill-opacity": 1 } }, firstLabel); } } // Handle both newly loaded and already loaded maps map.on("styledata", addFinishingLayers); addFinishingLayers(); invalidation.then(() => map.off("styledata", addFinishingLayers) ); 52:T57a, // Basemap feature groups we want to remove const unwantedSources = new Set([ "transportation", "transportation_name", "boundary", "landuse", "landcover", "building", "poi", "housenumber", "aeroway" ]); function isMapClutter(layer) { const source = layer.sourceLayer.toLowerCase(); const id = layer.id.toLowerCase(); // Roads, boundaries, buildings and land-cover styling if (unwantedSources.has(source)) { return true; } // Keep place names and water labels const usefulLabel = ["place", "water", "waterway", "water_name"] .includes(source) || /place|city|town|village|country|river|lake/.test(id); // Remove other labels and map symbols if (layer.type === "symbol" && !usefulLabel) { return true; } return false; } // Apply the selected map treatment for (const layer of originalBasemapLayers) { let visibility = layer.visibility; if (basemapDetail === "Minimal" && isMapClutter(layer)) { visibility = "none"; } if (basemapDetail === "Landscape only" && (isMapClutter(layer) || layer.type === "symbol")) { visibility = "none"; } if (map.getLayer(layer.id)) { const current = map.getLayoutProperty(layer.id, "visibility") || "visible"; if (current !== visibility) { map.setLayoutProperty( layer.id, "visibility", visibility ); } } } 53:[] 49:{"id":"266087999f3f082b","slug":"colours-of-british-terrain","title":"The Colours of British Terrain","thumbnail":"3c78151caaeeee9a04a51716901b78487e4edbf245c438a14005f0d7f511b4c4","access_level":"public","create_time":"$D2026-11-06T19:58:38.728Z","update_time":"$D2026-11-07T02:11:25.974Z","view_time":null,"first_public_time":"$D2026-11-07T02:12:39.348Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fa149cb0825f9a52","login":"tony-griffiths","name":"Tony Griffiths","avatar_url":"https://avatars-next.observableusercontent.com/7cf209d7bf7ee1257528bf422fc89bd37776aee216d4c1820dd2be9490133758","tier":"free_2026","bio":"Love exploring ways to make sense of complex data across time and space. This is my personal hobby/ art project space.","followed_by_you":false,"follows_you":false},"version":244,"publish_version":244,"role":null,"authored":false,"authors":[{"type":"individual","id":"3dc53d3e7d693619","login":"tony-griffiths","name":"Tony Griffiths","avatar_url":"https://avatars-next.observableusercontent.com/358880bb167fd88f4c3cb3c7686323bae193a7790ba4719066864c62d40fd668","tier":null,"bio":"Love exploring ways to make sense of complex data across time and space. This is my personal hobby/ art project space.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"fa149cb0825f9a52","login":"tony-griffiths","name":"Tony Griffiths","avatar_url":"https://avatars-next.observableusercontent.com/7cf209d7bf7ee1257528bf422fc89bd37776aee216d4c1820dd2be9490133758","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Colours of British Terrain","cells":[{"id":20,"value":"# The Colours of British Terrain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"\n## An experiment in landscape colour\n\n**30DayMapChallenge 2026 — Light & Dark**\n\nAn exploration of British landscapes through elevation, colour and light.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Explore the Landscape","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"\nconst colourMode = view(\n Inputs.radio([\"Daylight\", \"Twilight\"], {\n label: \"Terrain appearance\",\n value: \"Daylight\"\n })\n);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"\nconst elevationStyle = view(\n Inputs.radio([\"Smooth\", \"Bands\"], {\n label: \"Elevation treatment\",\n value: \"Bands\"\n })\n);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"\nconst basemapDetail = view(\n Inputs.radio(\n [\"Reference\", \"Minimal\", \"Landscape only\"],\n {\n label: \"Basemap detail\",\n value: \"Minimal\"\n }\n )\n);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"\nconst studyArea = view(\n Inputs.select(\n [\n \"Lake District\",\n \"Snowdonia\",\n \"Peak District\",\n \"Scottish Highlands\",\n \"Great Britain\"\n ],\n {\n label: \"Explore an area\",\n value: \"Snowdonia\"\n }\n )\n);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"\nconst shadeStrength = view(\n Inputs.range([0, 1], {\n label: \"Hillshade strength\",\n value: 0.25,\n step: 0.05\n })\n);\n","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$4d","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"\ndisplay(html`\n

\n Current view:\n ${colourMode} ·\n ${elevationStyle} elevation ·\n ${basemapDetail} ·\n Hillshade ${shadeStrength.toFixed(2)} ·\n NW illumination (315°)\n

\n`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## Terrain colour palettes\n\nFive illustrative elevation bands inspired by\nBritish landscape character.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"\nconst elevationThresholds = view(\n Inputs.form({\n hills: Inputs.range([30, 150], {\n label: \"Lower hills begin (m)\",\n value: 100,\n step: 10\n }),\n\n upland: Inputs.range([150, 400], {\n label: \"Upland begins (m)\",\n value: 250,\n step: 10\n }),\n\n moor: Inputs.range([400, 650], {\n label: \"High upland begins (m)\",\n value: 500,\n step: 10\n }),\n\n summit: Inputs.range([700, 1200], {\n label: \"Mountain heights begins (m)\",\n value: 850,\n step: 10\n })\n })\n);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$4e","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"\n## Reading the landscape\n\nThis map explores how elevation, colour and light can\nshape our perception of British landscapes.\n\nFive colour bands progress from green lowlands,\nthrough hills and uplands, to exposed mountain heights.\n\n**Smooth** mode blends the colours to suggest the\ncontinuity of natural landscapes.\n\n**Bands** mode reveals distinct elevation zones,\nmaking the geographical distribution of higher\nand lower ground more apparent.\n\nThe elevation thresholds can be adjusted to explore\ndifferent interpretations of the terrain.\n\n### A cartographic interpretation\n\nThe colours are inspired by British landscape character,\nbut represent elevation rather than measured land cover.\nThey do not directly identify vegetation, geology,\nslope or land use.\n\nNorth-west illumination (315°) follows a traditional\ncartographic convention for shaded relief.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$50","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$51","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"\nconst isTwilight = colourMode === \"Twilight\";\n\n// Water colours\nif (map.getLayer(\"terrain-water\")) {\n map.setPaintProperty(\n \"terrain-water\",\n \"fill-color\",\n isTwilight ? \"#122D37\" : \"#D3E6E5\"\n );\n}\n\n// Terrain colour opacity\nif (map.getLayer(\"terrain-colours\")) {\n map.setPaintProperty(\n \"terrain-colours\",\n \"color-relief-opacity\",\n isTwilight ? 1.0 : 0.8\n );\n}\n\n// Different illumination colours\nif (map.getLayer(\"terrain-hillshade\")) {\n\n map.setPaintProperty(\n \"terrain-hillshade\",\n \"hillshade-shadow-color\",\n isTwilight ? \"#19202D\" : \"#493E50\"\n );\n\n map.setPaintProperty(\n \"terrain-hillshade\",\n \"hillshade-highlight-color\",\n isTwilight ? \"#B8BAC8\" : \"#FFF9ED\"\n );\n\n map.setPaintProperty(\n \"terrain-hillshade\",\n \"hillshade-accent-color\",\n isTwilight ? \"#2F3846\" : \"#746A61\"\n );\n}\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"\nif (map.getLayer(\"terrain-hillshade\")) {\n map.setPaintProperty(\n \"terrain-hillshade\",\n \"hillshade-exaggeration\",\n shadeStrength\n );\n}\n","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"await mapReady;\n\nconst roadLabelIds = map.getStyle().layers\n .filter(layer =>\n layer.type === \"symbol\" &&\n /road|highway|motorway|shield|route|transportation/i.test(layer.id)\n )\n .map(layer => layer.id);\n\n// Hide the matching road labels and shields\nroadLabelIds.forEach(id => {\n map.setLayoutProperty(id, \"visibility\", \"none\");\n});\n","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"await mapReady;\n\nconst bridgeLayers = map.getStyle().layers\n .filter(layer =>\n (layer.type === \"line\" || layer.type === \"fill\") &&\n /bridge/i.test(layer.id)\n );\n\nbridgeLayers.forEach(layer => {\n map.setLayoutProperty(\n layer.id,\n \"visibility\",\n \"none\"\n );\n});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"await mapReady;\n\n// Ensure our earlier road and bridge edits have run\nconst earlierEdits = [\n roadLabelIds.length,\n bridgeLayers.length\n];\n\n// Capture the current Liberty basemap layers\nconst originalBasemapLayers = map.getStyle().layers\n .filter(layer => !layer.id.startsWith(\"terrain-\"))\n .map(layer => ({\n id: layer.id,\n type: layer.type,\n sourceLayer: layer[\"source-layer\"] || \"\",\n visibility:\n map.getLayoutProperty(layer.id, \"visibility\")\n || \"visible\"\n }));\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$52","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"\nconst locations = {\n \"Lake District\": {\n center: [-3.1, 54.5], zoom: 8\n },\n \"Snowdonia\": {\n center: [-4.1, 53.06], zoom: 8\n },\n \"Peak District\": {\n center: [-1.85, 53.37], zoom: 8\n },\n \"Scottish Highlands\": {\n center: [-4.8, 57.3], zoom: 7\n },\n \"Great Britain\": {\n center: [-3.3, 54.7], zoom: 5.3\n }\n};\n\nmap.flyTo({\n ...locations[studyArea],\n duration: 900,\n essential: true\n});\n","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"2"}} 44:null