User:Ika-chan!/British road colours

From OpenStreetMap Wiki
Jump to: navigation, search

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

Step 1: Choose a style

Follow the left-hand column if you just want to change the road colours, or follow the right-hand column if you want to change the road colours and use British-style shields.

Standard Shields British Shields
British colours with standard shields for the Standard tile layer.png British colours with official shields for the Standard tile layer.png

Step 2: Recolour the shields

Navigate to /mapserver/styles/standard/symbols/shields and run the following commands to mass-recolour the shields:

Standard Shields British Shields
cd /mapserver/styles/standard/symbols/shields

sed -i -e 's/eccdd1/CDDDEC/g' -e 's/d39da5/9DB8D3/g' motorway*.svg && \
sed -i -e 's/f2d7ce/CFEDCF/g' -e 's/d7a899/AAC3B0/g' trunk*.svg && \
sed -i -e 's/f3e3cf/EED2D2/g' -e 's/d1b795/CD9C9C/g' primary*.svg && \
sed -i -e 's/eeefd7/EEE1D5/g' -e 's/c4c69c/C9B39C/g' secondary*.svg && \
sed -i -e 's/f1f1f1/EFEFD7/g' -e 's/c6c6c6/C6C69C/g' tertiary*.svg
cd /mapserver/styles/standard/symbols/shields

sed -i -e 's/eccdd1/0079C1/g' -e 's/d39da5/FFFFFF/g' motorway*.svg && \
sed -i -e 's/f2d7ce/00703C/g' -e 's/d7a899/FFFFFF/g' trunk*.svg && \
sed -i -e 's/f3e3cf/FFFFFF/g' -e 's/d1b795/000000/g' primary*.svg && \
sed -i -e 's/eeefd7/FFFFFF/g' -e 's/c4c69c/000000/g' secondary*.svg && \
sed -i -e 's/f1f1f1/FFFFFF/g' -e 's/c6c6c6/000000/g' tertiary*.svg

Step 3: Recolour the main roads

Open road-colors-generated.mss and replace the contents with the following:

Standard Shields British Shields
@motorway-low-zoom-casing: #4E88C2;
@trunk-low-zoom-casing: #5EA26F;
@primary-low-zoom-casing: #BE3333;
@secondary-low-zoom-casing: #B6702B;
@motorway-casing: #2A83DC;
@trunk-casing: #469F5C;
@primary-casing: #B31212;
@secondary-casing: #99520A;
@motorway-shield: #073562;
@trunk-shield: #1A4424;
@primary-shield: #4F0303;
@secondary-shield: #462301;
@motorway-low-zoom: #6EAAE6;
@trunk-low-zoom: #96CCA4;
@primary-low-zoom: #E98787;
@secondary-low-zoom: #EBBF93;
@motorway-fill: #92BDE8;
@trunk-fill: #B0D9BB;
@primary-fill: #F3A7A7;
@secondary-fill: #F7D5B3;
@motorway-low-zoom-casing: #4E88C2;
@trunk-low-zoom-casing: #5EA26F;
@primary-low-zoom-casing: #BE3333;
@secondary-low-zoom-casing: #B6702B;
@motorway-casing: #2A83DC;
@trunk-casing: #469F5C;
@primary-casing: #B31212;
@secondary-casing: #99520A;
@motorway-shield: #FFFFFF;
@trunk-shield: #FFD200;
@primary-shield: #000000;
@secondary-shield: #000000;
@motorway-low-zoom: #6EAAE6;
@trunk-low-zoom: #96CCA4;
@primary-low-zoom: #E98787;
@secondary-low-zoom: #EBBF93;
@motorway-fill: #92BDE8;
@trunk-fill: #B0D9BB;
@primary-fill: #F3A7A7;
@secondary-fill: #F7D5B3;

Step 4: Recolour the tertiary roads and junction names

Open roads.mss and change the following values:

Standard Shields British Shields
@tertiary-fill: #FAFABF;
@tertiary-casing: #7D7D05;
@tertiary-shield: #3B3B00;
@junction-text-color: #004B96;
@tertiary-fill: #FAFABF;
@tertiary-casing: #7D7D05;
@tertiary-shield: #000000;
@junction-text-color: #004B96;

Step 4½: Improve legibility of shields (British Shields only)

Due to a problem with the legibility of the shield text when placed against a dark background, add the following lines under both the #roads-text-ref-low-zoom and #roads-text-ref sections, where the motorway and primary road shields are defined:

/* Legibility fix for motorway shields */

[highway = 'motorway'] {
  shield-halo-radius: 0.25;
  shield-halo-fill: @motorway-shield;
  shield-halo-opacity: 1.0;
  ...
}

/* Legibility fix for primary road (trunk) shields */

[highway = 'trunk'] {
  shield-halo-radius: 0.25;
  shield-halo-fill: @trunk-shield;
  shield-halo-opacity: 1.0;
  ...
}

Step 5: Commit the changes

Navigate to the main folder of the Standard style and compile the stylesheet:

cd /mapserver/styles/standard
carto -a "3.0.0" project.mml > style.xml

If you are already running a tile server, restart Renderd and expire all the tiles:

sudo service renderd restart && rm -rf /mapserver/website/tiles/standard/*

Appendix: Road colour chart

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

The road colours that the tutorial uses are not direct copies from the pre-2015 versions of the Standard tile layer, because the old road colours would have appeared too dark and too dull.

Class Motorway Primary road Main road Secondary road Tertiary road
Base hue 210°[1] 135° 000° 030° 060°
Fill #92BDE8 #B0D9BB #F3A7A7 #F7D5B3 #FAFABF
Casing #2A83DC #469F5C #B31212 #99520A #7D7D05
Low-zoom fill #6EAAE6 #96CCA4 #E98787 #EBBF93 #EDEDA0
Low-zoom casing #4E88C2 #5EA26F #BE3333 #B6702B #AEAE23
Shield text #073562 #1A4424 #4F0303 #462301 #3B3B00
Shield fill #CDDDEC #D7E5DA #EED2D2 #EEE1D5 #EFEFD7
Shield border #9DB8D3 #AAC3B0 #CD9C9C #C9B39C #C6C69C
Junction text #004B96 Not applicable

Notes

  1. For comparison, the colour of the water has a hue of about 193.6°.