1 // =====================================================================
5 // - `text-halo-rasterizer: fast;` gives a noticeable performance
6 // boost to render times and is recommended for *all* halos.
8 // ---------------------------------------------------------------------
11 // There are 5 language options in the MapBox Streets vector tiles:
12 // - Local/default: '[name]'
13 // - English: '[name_en]'
14 // - French: '[name_fr]'
15 // - Spanish: '[name_es]'
16 // - German: '[name_de]'
20 // ---------------------------------------------------------------------
23 // All fontsets should have a good fallback that covers as many glyphs
25 @fallback: 'Arial Unicode MS Regular';
26 @sans: 'Open Sans Regular', @fallback;
27 @sans_md: 'Open Sans Semibold', @fallback;
28 @sans_bd: 'Open Sans Bold', 'Arial Unicode MS Bold', @fallback;
29 @sans_it: 'Open Sans Italic', @fallback;
30 @sans_lt_italic: 'Open Sans Light Italic', @fallback;
31 @sans_lt: 'Open Sans Light', @fallback;
34 @country_text: @land * 0.2;
35 @country_halo: @place_halo;
38 // ---------------------------------------------------------------------
41 // The country labels in MapBox Streets vector tiles are placed by hand,
42 // optimizing the arrangement to fit as many as possible in densely-
44 #place[class='country'][zoom>=2][zoom<=10] {
46 text-face-name: @sans_bd;
47 [zoom=2] { text-face-name: @sans; }
48 text-placement: point;
50 text-fill: @country_text;
51 text-halo-fill: @country_halo;
53 text-halo-rasterizer: fast;
55 text-wrap-before: true;
56 text-line-spacing: -3;
58 [zoom=3] { text-size: 12; text-wrap-width: 60; }
59 [zoom=4] { text-size: 14; text-wrap-width: 90; }
60 [zoom=5] { text-size: 20; text-wrap-width: 120; }
61 [zoom>=6] { text-size: 20; text-wrap-width: 120; }
64 [zoom=2] { text-name: [code]; }
65 [zoom=3] { text-size: 11; }
66 [zoom=4] { text-size: 13; }
67 [zoom=5] { text-size: 17; }
68 [zoom>=6] { text-size: 20; }
71 [zoom=3] { text-name: [code]; }
72 [zoom=4] { text-size: 11; }
73 [zoom=5] { text-size: 15; }
74 [zoom=6] { text-size: 17; }
75 [zoom=7] { text-size: 18; text-wrap-width: 60; }
76 [zoom>=8] { text-size: 20; text-wrap-width: 120; }
79 [zoom=5] { text-size: 13; }
80 [zoom=6] { text-size: 15; text-wrap-width: 60 }
81 [zoom=7] { text-size: 16; text-wrap-width: 90; }
82 [zoom=8] { text-size: 18; text-wrap-width: 120; }
83 [zoom>=9] { text-size: 20; text-wrap-width: 120; }
86 [zoom=5] { text-size: 11; }
87 [zoom=6] { text-size: 13; }
88 [zoom=7] { text-size: 14; text-wrap-width: 60; }
89 [zoom=8] { text-size: 16; text-wrap-width: 90; }
90 [zoom>=9] { text-size: 18; text-wrap-width: 120; }
93 [zoom=7] { text-size: 12; }
94 [zoom=8] { text-size: 14; }
95 [zoom>=9] { text-size: 16; }
100 // ---------------------------------------------------------------------
101 // Cities, towns, villages, etc
103 // City labels with dots for low zoom levels.
104 // The separate attachment keeps the size of the XML down.
105 #place::citydots[class='city'][zoom>=4][zoom<=7] {
106 // explicitly defining all the `ldir` values wer'e going
107 // to use shaves a bit off the final project.xml size
108 shield-file: url("shield/dot.svg");
109 shield-unlock-image: true;
112 [zoom=7] { shield-size: 14; }
113 shield-face-name: @sans;
114 shield-placement: point;
116 shield-halo-fill: fadeout(#fff, 50%);
117 shield-halo-radius: 1;
118 shield-halo-rasterizer: fast;
123 text-face-name: @sans;
124 text-wrap-width: 120;
125 text-wrap-before: true;
127 text-halo-fill: fadeout(#fff, 50%);
129 text-halo-rasterizer: fast;
132 text-face-name: @sans_md;
136 text-wrap-width: 140;
140 text-wrap-width: 180;
142 // Hide at largest scales:
143 [zoom>=16] { text-name: "''"; }
147 [zoom>=12] { text-size: 16; }
148 [zoom>=14] { text-size: 20; }
149 [zoom>=16] { text-size: 24; }
150 // Hide at largest scales:
151 [zoom>=18] { text-name: "''"; }
155 [zoom>=12] { text-size: 14; }
156 [zoom>=14] { text-size: 18; }
157 [zoom>=16] { text-size: 22; }
161 [class='neighbourhood'] {
163 text-face-name: @sans_bd;
164 text-transform: uppercase;
165 text-character-spacing: 0.5;
166 [zoom>=14] { text-size: 11; }
167 [zoom>=15] { text-size: 12; text-character-spacing: 1; }
168 [zoom>=16] { text-size: 14; text-character-spacing: 2; }
173 // ---------------------------------------------------------------------
174 // Points of interest
176 #poi[zoom=14][rank<=1],
177 #poi[zoom=15][rank<=2],
178 #poi[zoom=16][rank<=3],
179 #poi[zoom=17][rank<=4],
181 // Separate icon and label attachments are created to ensure that
182 // all icon placement happens first, then labels are placed only
183 // if there is still room.
184 ::icon[class!=null] {
185 // The [maki] field values match a subset of Maki icon names, so we
186 // can use that in our url expression.
187 // Not all POIs have a Maki icon assigned, so we limit this section
188 // to those that do. See also <https://www.mapbox.com/maki/>
190 marker-file:url('icon/[class]-12.svg');
194 text-face-name: @sans_md;
197 text-halo-fill: fadeout(#fff, 50%);
199 text-halo-rasterizer: fast;
201 text-line-spacing: -1;
202 //text-transform: uppercase;
203 //text-character-spacing: 0.25;
204 // POI labels with an icon need to be offset:
205 [class!=null] { text-dy: 8; }
210 // ---------------------------------------------------------------------
213 #transportation_name::shield-pt[class='motorway'][zoom>=7][zoom<=10][ref_length<=6],
214 #transportation_name::shield-pt[class='motorway'][zoom>=9][zoom<=10][ref_length<=6],
215 #transportation_name::shield-ln[zoom>=11][reflen<=6] {
216 shield-name: "[ref].replace('ยท', '\n')";
218 shield-line-spacing: -4;
219 shield-file: url('shield/default-[reflen].svg');
220 shield-face-name: @sans;
223 shield-transform: scale(1.25,1.25);
227 #transportation_name::shield-pt[class='motorway'][zoom>=7][zoom<=10][ref_length<=6],
228 #transportation_name::shield-pt[class='motorway'][zoom>=9][zoom<=10][ref_length<=6] {
229 shield-placement: point;
230 shield-avoid-edges: false;
232 #transportation_name::shield-ln[zoom>=11][reflen<=6] {
233 shield-placement: line;
235 shield-min-distance: 100;
236 shield-avoid-edges: true;
239 #transportation_name {
241 text-placement: line; // text follows line path
242 text-face-name: @sans;
244 text-halo-fill: fadeout(#fff, 50%);
246 text-halo-rasterizer: fast;
248 text-avoid-edges: true; // prevents clipped labels at tile edges
249 [zoom>=15] { text-size: 13; }
253 // ---------------------------------------------------------------------
257 [zoom<=13], // automatic area filtering @ low zooms
258 [zoom>=14][area>500000],
259 [zoom>=16][area>10000],
262 text-face-name: @sans_it;
263 text-fill: darken(@water, 15);
265 text-wrap-width: 100;
266 text-wrap-before: true;
267 text-halo-fill: fadeout(#fff, 75%);
268 text-halo-radius: 1.5;
273 // ---------------------------------------------------------------------
276 #housenumber[zoom>=18] {
277 text-name: [housenumber];
278 text-face-name: @sans_it;
281 [zoom=19] { text-size: 10; }
282 [zoom>=20] { text-size: 12; }