User:Ika-chan!/British road colours

This page is a work in progress and not ready for use! The content is likely incomplete, inaccurate or empty.
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.

• 

  Standard road shields

• 

  British road shields

Expand

- Standard road shields

---

cd /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

Expand

- British road shields

---

cd /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

Expand

Technical information

---

Comparison between the sea (193.6° hue) and the motorway (210° hue) in tunnel and bridge form.

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

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/*