Welcome to the Cosmic Fileserver

OK, first we have to do a bit of file management. In the css-like code, there are references to a directory called ‘img’. There are a couple of image files that need to be mandraulically pushed into your project directory.

Surf to the location of your project. It should be:
$HOME/Documents/Mapbox/project/pirate-map

Create a sub-directory under there called ‘img’. Copy your .png files under there. Nothing will have changed until you hit save on your project. We need to tidy a few things up first.
Stacks Image 320
See the bottom-most icon representing the layers? Click on it to bring in a new one.

You’ll have a new, blank window. In the ID field, type in our first category, “countries”.

Click the browse button and surf to your saved shapefiles and select the countries one (the name will be ’10m-admin-0-countries.shp’)
Now hit save.

Our labels.mss file will have entries corresponding to that shape file. You can hit the layer button again, find the countries shape file and select the features button (looks like a spreadsheet). It shows you the guts of the file and how the labels.mss file corresponds to each database entry.

While we’re at it, lets create the styles.mss file on the right hand side by clicking the ‘+’ sign. Cut and paste the entry below (or from the styles.mss file into the pane.

@water: #e6d9b8;

Map { background-color: @water; }


#countries {
  ::outline1, ::outline2, ::outline3 {
    line-color: @water;
    line-width: 1;
    line-join: round;
    line-opacity: 0.5;
    line-comp-op: multiply;
  }
  ::outline1 { line-smooth: 12; }
  ::outline2 { line-smooth: 24; }
  ::outline3 { line-smooth: 48; }
  polygon-fill: lighten(@water,10);
  polygon-opacity: 0.6;
}



#bath {
  ::outline1, ::outline2, ::outline3 {
    line-color: darken(@water,10);
    line-width: 1;
    line-join: round;
    line-opacity: 0.05;
    line-comp-op: multiply;
  }
  ::outline1 { line-smooth: 12; }
  ::outline2 { line-smooth: 24; }
  ::outline3 { line-smooth: 48; }
  polygon-fill: #367;
  polygon-opacity: 0.05;
  polygon-comp-op: color-burn;
}

#grat[zoom>2],#grat10 {
  line-color: #ddd;
  line-comp-op: color-burn;
}

#paper::grain {
  polygon-pattern-file: url(img/noise512.png);
  polygon-pattern-comp-op: soft-light;
}
#paper::folds {
  polygon-pattern-file: url(img/paperfolds_512.png);
  polygon-pattern-comp-op: color-burn;
}