User:Ika-chan!/British road colours
Please use Template:WIP
This article will be renamed to "user:ika-chan!/Stylesheet tricks" when I am ready, due to my improving knowledge reducing the number of steps for the British road colours changes to one. This page will then contain tricks for adding alternative station symbols, hill contours and perhaps hillshading.
This article shows you how to adapt the Standard tile layer stylesheet (officially OpenStreetMap Carto) to use road colours (commonly known as the British road colours) that commonly appear on maps in the Republic of Ireland and the United Kingdom.
The tutorial only requires the standard clone of OpenStreetMap Carto because the simple act of changing road colours does not require a complete fork (and ika-chan! is wary of having too many internet accounts).
The tutorial is correct as of 20 January 2018.
Before you start
- The file and folder locations that I used in this tutorial came from the tutorial on how to create a map server for fantasy worlds, developed in the hope of reducing vandalism on OpenStreetMap.
- If you have not cloned OpenStreetMap Carto via GitHub already, follow Part 4 of the Fantasy map server tutorial until just before compiling the stylesheet.
Heritage (British) road colours
On 1 May 2020, I reworked the heritage road colour scheme using GIMP’s LCh colour model, which the current road colours of the standard tile layer actually came from. The revised hues come from the Department for Transport’s official palette for traffic signs.[1]
Standard road shields
British road shields
- Standard road shieldscd /srv/styles/standard && \
sed -i -e 's/eccdd1/c8d6ea/g' -e 's/d39da5/92aed2/g' symbols/shields/motorway*.svg && \
sed -i -e 's/f2d7ce/c9e1cf/g' -e 's/d7a899/91bc9d/g' symbols/shields/trunk*.svg && \
sed -i -e 's/f3e3cf/fcdbd7/g' -e 's/d1b795/e2aba5/g' symbols/shields/primary*.svg && \
sed -i -e 's/eeefd7/fae6d1/g' -e 's/c4c69c/dab997/g' symbols/shields/secondary*.svg && \
sed -i -e 's/f1f1f1/fbefd6/g' -e 's/c6c6c6/d6c49a/g' symbols/shields/tertiary*.svg && sed -i \
-e 's/dc2a67/0081ee/g' -e 's/c84e2f/008d3c/g' -e 's/a06b00/ce4647/g' -e 's/707d05/a6680a/g' \
-e 's/e892a2/7db0ea/g' -e 's/f9b29c/89cd9e/g' -e 's/fcd6a4/ffbcb4/g' -e 's/f7fabf/ffdbad/g' \
-e 's/e66e89/3d9ded/g' -e 's/f6967a/58bd7e/g' -e 's/f4c37d/ffa098/g' -e 's/e7ed9d/ffc888/g' \
-e 's/c24e6b/007ecb/g' -e 's/d1684a/079754/g' -e 's/d1684a/e66762/g' -e 's/d1684a/d38e31/g' \
-e 's/620728/00356b/g' -e 's/5f1c0c/003f13/g' -e 's/503000/66171a/g' -e 's/364000/552f00/g' \
style/road-colors-generated.mss && sed -i \
-e 's/tertiary-fill: #ffffff/tertiary-fill: #fff4be/g' \
-e 's/tertiary-casing: #8f8f8f/tertiary-casing: #8e7402/g' \
-e 's/tertiary-shield: #3b3b3b/tertiary-shield: #4a3900/g' \
-e 's/junction-text-color:\ *#960000/junction-text-color: #005f96/g' style/roads.mss
- British road shieldscd /srv/styles/standard && \
sed -i -e 's/eccdd1/0079c1/g' -e 's/d39da5/ffffff/g' symbols/shields/motorway*.svg && \
sed -i -e 's/f2d7ce/00703c/g' -e 's/d7a899/ffffff/g' symbols/shields/trunk*.svg && \
sed -i -e 's/f3e3cf/ffffff/g' -e 's/d1b795/000000/g' symbols/shields/primary*.svg && \
sed -i -e 's/eeefd7/ffffff/g' -e 's/c4c69c/000000/g' symbols/shields/secondary*.svg && \
sed -i -e 's/f1f1f1/ffffff/g' -e 's/c6c6c6/000000/g' symbols/shields/tertiary*.svg && sed -i \
-e 's/dc2a67/0081ee/g' -e 's/c84e2f/008d3c/g' -e 's/a06b00/ce4647/g' -e 's/707d05/a6680a/g' \
-e 's/e892a2/7db0ea/g' -e 's/f9b29c/89cd9e/g' -e 's/fcd6a4/ffbcb4/g' -e 's/f7fabf/ffdbad/g' \
-e 's/e66e89/3d9ded/g' -e 's/f6967a/58bd7e/g' -e 's/f4c37d/ffa098/g' -e 's/e7ed9d/ffc888/g' \
-e 's/c24e6b/007ecb/g' -e 's/d1684a/079754/g' -e 's/d1684a/e66762/g' -e 's/d1684a/d38e31/g' \
-e 's/620728/ffffff/g' -e 's/5f1c0c/ffd200/g' -e 's/503000/000000/g' -e 's/364000/000000/g' \
style/road-colors-generated.mss && sed -i \
-e 's/tertiary-fill: #ffffff/tertiary-fill: #fff4be/g' \
-e 's/tertiary-casing: #8f8f8f/tertiary-casing: #8e7402/g' \
-e 's/tertiary-shield: #3b3b3b/tertiary-shield: #000000/g' \
-e 's/junction-text-color:\ *#960000/junction-text-color: #005f96/g' \
-e '/shield-fill: @motorway-shield/i \
shield-halo-radius: 0.25;\
shield-halo-fill: @motorway-shield;\
shield-halo-opacity: 1.0;' -e '/shield-fill: @trunk-shield/i \
shield-halo-radius: 0.25;\
shield-halo-fill: @trunk-shield;\
shield-halo-opacity: 1.0;' style/roads.mss
The revised road colours are not direct copies from the pre-2015 Standard tile layer, because the old colours were dull and inconsistent.
| Class | Element | Motorway | Trunk | Primary | Secondary | Tertiary |
|---|---|---|---|---|---|---|
| Base hue (h) | 260.5° | 151.5° | 29.3° | 69.3° | 86.4° | |
| Road (0-12) | Fill | #3d9ded | #58bd7e | #ffa098 | #ffc888 | N/A |
| Casing | #007ecb | #079754 | #e66762 | #d38e31 | ||
| Road (13+) | Fill | #7db0ea | #89cd9e | #ffbcb4 | #ffdbad | #fff4be |
| Casing | #0081ee | #008d3c | #ce4647 | #a6680a | #8e7402 | |
| Shield (OSM) |
Fill | #c8d6ea | #c9e1cf | #fcdbd7 | #fae6d1 | #fbefd6 |
| Casing | #92aed2 | #91bc9d | #e2aba5 | #dab997 | #d6c49a | |
| Text | #00356b | #003f13 | #66171a | #552f00 | #4a3900 | |
| Junction text | #004b96 | N/A | ||||
| References | ||||||
| Shield (DfT) |
Fill | #0079c1 | #00703c | #ffffff | #ffffff | #ffffff |
| Casing | #ffffff | #ffffff | #000000 | #000000 | #000000 | |
| Text | #ffffff | #ffd200 | #000000 | #000000 | #000000 | |
| References | [1] | [1] | ||||
Contours and hillshading
High speed railways
Transport symbols
Commit the changes
Once you have made edits to the stylesheet, run the following commands in Terminal to commit the changes and flush the old tiles:
cd /srv/styles/standard && \
carto project.mml > style.xml && \
sudo service renderd restart && \
rm -rf /srv/www/tiles/standard/*
Notes
- ↑ 1.0 1.1 1.2 “Traffic-sign images”. London: Department for Transport. 1 May 2020. Archived from the original on 8 February 2017. Retrieved 1 May 2020.