org.simantics.maps.server/server/tm2/mapbox-studio-osm-bright.tm2/labels.mss

   1 // =====================================================================
   2 // LABELS
   3
   4 // General notes:
   5 // - `text-halo-rasterizer: fast;` gives a noticeable performance
   6 //    boost to render times and is recommended for *all* halos.
   7
   8 // ---------------------------------------------------------------------
   9 // Languages
  10
  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]'
  17 @name: '[name_en]';
  18
  19
  20 // ---------------------------------------------------------------------
  21 // Fonts
  22
  23 // All fontsets should have a good fallback that covers as many glyphs
  24 // as possible.
  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;
  32
  33 @place_halo:        #fff;
  34 @country_text:      @land * 0.2;
  35 @country_halo:      @place_halo;
  36
  37
  38 // ---------------------------------------------------------------------
  39 // Countries
  40
  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-
  43 // labeled areas.
  44 #place[class='country'][zoom>=2][zoom<=10] {
  45   text-name: @name;
  46   text-face-name: @sans_bd;
  47   [zoom=2] { text-face-name: @sans; }
  48   text-placement: point;
  49   text-size: 9;
  50   text-fill: @country_text;
  51   text-halo-fill: @country_halo;
  52   text-halo-radius: 1;
  53   text-halo-rasterizer: fast;
  54   text-wrap-width: 20;
  55   text-wrap-before: true;
  56   text-line-spacing: -3;
  57   [rank=1] {
  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; }
  62   }
  63   [rank=2] {
  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; }
  69   }
  70   [rank=3] {
  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; }
  77   }
  78   [rank=4] {
  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; }
  84   }
  85   [rank=5] {
  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; }
  91   }
  92   [rank>=6] {
  93     [zoom=7] { text-size: 12; }
  94     [zoom=8] { text-size: 14; }
  95     [zoom>=9] { text-size: 16; }
  96   }
  97 }
  98
  99
 100 // ---------------------------------------------------------------------
 101 // Cities, towns, villages, etc
 102
 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;
 110     shield-name: @name;
 111     shield-size: 12;
 112     [zoom=7] { shield-size: 14; }
 113     shield-face-name: @sans;
 114     shield-placement: point;
 115     shield-fill: #333;
 116     shield-halo-fill: fadeout(#fff, 50%);
 117     shield-halo-radius: 1;
 118     shield-halo-rasterizer: fast;
 119 }
 120
 121 #place[zoom>=8] {
 122   text-name: @name;
 123   text-face-name: @sans;
 124   text-wrap-width: 120;
 125   text-wrap-before: true;
 126   text-fill: #333;
 127   text-halo-fill: fadeout(#fff, 50%);
 128   text-halo-radius: 1;
 129   text-halo-rasterizer: fast;
 130   text-size: 10;
 131   [class='city'] {
 132         text-face-name: @sans_md;
 133     text-size: 16;
 134     [zoom>=10] {
 135       text-size: 18;
 136       text-wrap-width: 140;
 137     }
 138     [zoom>=12] {
 139       text-size: 24;
 140       text-wrap-width: 180;
 141     }
 142     // Hide at largest scales:
 143     [zoom>=16] { text-name: "''"; }
 144   }
 145   [class='town'] {
 146     text-size: 14;
 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: "''"; }
 152   }
 153   [class='village'] {
 154     text-size: 12;
 155     [zoom>=12] { text-size: 14; }
 156     [zoom>=14] { text-size: 18; }
 157     [zoom>=16] { text-size: 22; }
 158   }
 159   [class='hamlet'],
 160   [class='suburb'],
 161   [class='neighbourhood'] {
 162     text-fill: #633;
 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; }
 169   }
 170 }
 171
 172
 173 // ---------------------------------------------------------------------
 174 // Points of interest
 175
 176 #poi[zoom=14][rank<=1],
 177 #poi[zoom=15][rank<=2],
 178 #poi[zoom=16][rank<=3],
 179 #poi[zoom=17][rank<=4],
 180 #poi[zoom>=18] {
 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/>
 189     marker-fill:#666;
 190     marker-file:url('icon/[class]-12.svg');
 191   }
 192   ::label {
 193     text-name: '[name]';
 194     text-face-name: @sans_md;
 195     text-size: 12;
 196     text-fill: #666;
 197     text-halo-fill: fadeout(#fff, 50%);
 198     text-halo-radius: 1;
 199     text-halo-rasterizer: fast;
 200     text-wrap-width: 70;
 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; }
 206   }
 207 }
 208
 209
 210 // ---------------------------------------------------------------------
 211 // Roads
 212
 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')";
 217   shield-size: 9;
 218   shield-line-spacing: -4;
 219   shield-file: url('shield/default-[reflen].svg');
 220   shield-face-name: @sans;
 221   shield-fill: #333;
 222   [zoom>=14] {
 223     shield-transform: scale(1.25,1.25);
 224     shield-size: 11;
 225   }
 226 }
 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;
 231 }
 232 #transportation_name::shield-ln[zoom>=11][reflen<=6] {
 233   shield-placement: line;
 234   shield-spacing: 400;
 235   shield-min-distance: 100;
 236   shield-avoid-edges: true;
 237 }
 238
 239 #transportation_name {
 240   text-name: '[name]';
 241   text-placement: line;  // text follows line path
 242   text-face-name: @sans;
 243   text-fill: #765;
 244   text-halo-fill: fadeout(#fff, 50%);
 245   text-halo-radius: 1;
 246   text-halo-rasterizer: fast;
 247   text-size: 12;
 248   text-avoid-edges: true;  // prevents clipped labels at tile edges
 249   [zoom>=15] { text-size: 13; }
 250 }
 251
 252
 253 // ---------------------------------------------------------------------
 254 // Water
 255
 256 #water_name {
 257   [zoom<=13],  // automatic area filtering @ low zooms
 258   [zoom>=14][area>500000],
 259   [zoom>=16][area>10000],
 260   [zoom>=17] {
 261     text-name: @name;
 262     text-face-name: @sans_it;
 263     text-fill: darken(@water, 15);
 264     text-size: 12;
 265     text-wrap-width: 100;
 266     text-wrap-before: true;
 267     text-halo-fill: fadeout(#fff, 75%);
 268     text-halo-radius: 1.5;
 269   }
 270 }
 271
 272
 273 // ---------------------------------------------------------------------
 274 // House numbers
 275
 276 #housenumber[zoom>=18] {
 277   text-name: [housenumber];
 278   text-face-name: @sans_it;
 279   text-fill: #cba;
 280   text-size: 8;
 281   [zoom=19] { text-size: 10; }
 282   [zoom>=20] { text-size: 12; }
 283 }