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

   1 // ---------------------------------------------------------------------
   2 // Common Colors
   3
   4 // You don't need to set up @variables for every color, but it's a good
   5 // idea for colors you might be using in multiple places or as a base
   6 // color for a variety of tints.
   7 // Eg. @water is used in the #water and #waterway layers directly, but
   8 // also in the #water_label and #waterway_label layers inside a color
   9 // manipulation function to get a darker shade of the same hue.
  10 @land: #f8f4f0;
  11 @water: #a0c8f0;
  12
  13 @state_text:        #765;
  14 @state_halo:        @place_halo;
  15
  16 Map {
  17   background-color:@land;
  18 }
  19
  20 // ---------------------------------------------------------------------
  21 // Political boundaries
  22
  23 #boundary {
  24   opacity: 0.5;
  25   line-join: round;
  26   line-color: #446;
  27   // Countries
  28   [admin_level=2] {
  29     line-width: 0.8;
  30     line-cap: round;
  31     [zoom>=4] { line-width: 1.2; }
  32     [zoom>=6] { line-width: 2; }
  33     [zoom>=8] { line-width: 4; }
  34     [disputed=1] { line-dasharray: 4,4; }
  35   }
  36 }
  37   // States / Provices / Subregions
  38 #place[class='state'][zoom>=4][zoom<=10] {
  39   text-name: @name;
  40   text-face-name: @sans_lt;
  41   text-placement: point;
  42   text-fill: @state_text;
  43   text-halo-fill: fadeout(lighten(@land,5%),50%);
  44   text-halo-radius: 1;
  45   text-halo-rasterizer: fast;
  46   text-size: 9;
  47   [zoom>=5][zoom<=6] {
  48     text-size: 12;
  49     text-wrap-width: 40;
  50   }
  51   [zoom>=7][zoom<=8] {
  52     text-size: 14;
  53     text-wrap-width: 60;
  54   }
  55   [zoom>=9][zoom<=10] {
  56     text-halo-radius: 2;
  57     text-size: 16;
  58     text-character-spacing: 2;
  59     text-wrap-width: 100;
  60   }
  61 }
  62
  63 // ---------------------------------------------------------------------
  64 // Water Features
  65
  66 #water {
  67   polygon-fill: @water - #111;
  68   // Map tiles are 256 pixels by 256 pixels wide, so the height
  69   // and width of tiling pattern images must be factors of 256.
  70   polygon-pattern-file: url(pattern/wave.png);
  71   [zoom<=5] {
  72     // Below zoom level 5 we use Natural Earth data for water,
  73     // which has more obvious seams that need to be hidden.
  74     polygon-gamma: 0.4;
  75   }
  76   ::blur {
  77     // This attachment creates a shadow effect by creating a
  78     // light overlay that is offset slightly south. It also
  79     // create a slight highlight of the land along the
  80     // southern edge of any water body.
  81     polygon-fill: #f0f0ff;
  82     comp-op: soft-light;
  83     image-filters: agg-stack-blur(1,1);
  84     image-filters-inflate: true;
  85     polygon-geometry-transform: translate(0,1);
  86     polygon-clip: false;
  87   }
  88 }
  89
  90 #waterway {
  91   line-color: @water * 0.9;
  92   line-cap: round;
  93   line-width: 0.5;
  94   [class='river'] {
  95     [zoom>=12] { line-width: 1; }
  96     [zoom>=14] { line-width: 2; }
  97     [zoom>=16] { line-width: 3; }
  98   }
  99   [class='stream'],
 100   [class='stream_intermittent'],
 101   [class='canal'] {
 102     [zoom>=14] { line-width: 1; }
 103     [zoom>=16] { line-width: 2; }
 104     [zoom>=18] { line-width: 3; }
 105   }
 106   [class='stream_intermittent'] { line-dasharray: 6,2,2,2; }
 107 }
 108
 109 // ---------------------------------------------------------------------
 110 // Landuse areas
 111
 112 #landcover {
 113   [class='grass'] { polygon-fill: #d8e8c8; }
 114   ::overlay {
 115     // Landuse classes look better as a transparent overlay.
 116     opacity: 0.1;
 117     [class='wood'] { polygon-fill: #6a4; polygon-gamma: 0.5; }
 118   }
 119 }
 120
 121 #landuse {
 122   // Land-use and land-cover are not well-separated concepts in
 123   // OpenStreetMap, so this layer includes both. The 'class' field
 124   // is a highly opinionated simplification of the myriad LULC
 125   // tag combinations into a limited set of general classes.
 126   [class='cemetery'] { polygon-fill: mix(#d8e8c8, #ddd, 25%); }
 127   [class='hospital'] { polygon-fill: #fde; }
 128   [class='school'] { polygon-fill: #f0e8f8; }
 129 }
 130
 131 // ---------------------------------------------------------------------
 132 // Buildings
 133
 134 #building [zoom<=17]{
 135   // At zoom level 13, only large buildings are included in the
 136   // vector tiles. At zoom level 14+, all buildings are included.
 137   polygon-fill: darken(@land, 50%);
 138   opacity: 0.1;
 139 }
 140 // Seperate attachments are used to draw buildings with depth
 141 // to make them more prominent at high zoom levels
 142 #building [zoom>=18]{
 143 ::wall { polygon-fill:mix(@land, #000, 85); }
 144 ::roof {
 145   polygon-fill: darken(@land, 5%);
 146   polygon-geometry-transform:translate(-1,-1.5);
 147   polygon-clip:false;
 148   line-width: 0.5;
 149   line-color: mix(@land, #000, 85);
 150   line-geometry-transform:translate(-1,-1.5);
 151   line-clip:false;
 152  }
 153 }
 154
 155 // ---------------------------------------------------------------------
 156 // Aeroways
 157
 158 #aeroway [zoom>=12] {
 159   ['mapnik::geometry_type'=2] {
 160     line-color: @land * 0.96;
 161     [class='runway'] { line-width: 5; }
 162     [class='taxiway'] {
 163       line-width: 1;
 164       [zoom>=15] { line-width: 2; }
 165     }
 166   }
 167   ['mapnik::geometry_type'=3] {
 168     polygon-fill: @land * 0.96;
 169     [class='apron'] {
 170       polygon-fill: @land * 0.98;
 171     }
 172   }
 173 }
 174