Welcome to the Cosmic Fileserver

Stacks Image 171
I am certainly not an expert on building Open Street Maps using TileMill. I'm just starting out. One day I came across a design called 'Pirate Map' by AJ Ashton. If he ever comes to the UK, I have a fresh pint of his favorite beer waiting for him.

It took me two days and a grand total of six rendering hours to end up with the finished product. It is really eye-catching and sure to be a hit for anyone's personal website.

Let's get busy. Here's the step-by-step way to build it yourself.

For a mac computer (what else would you want to use?) you need the following:

Stacks Image 179
You'll need Open Street Map (or access to one) or a mapnik or mapbox server. This tutorial won't get into setting one up and is not needed to produce the Pirate Map.
Stacks Image 182
Tile Mill! The program that stitches it all together. Click on the icon to the right and download your free copy today.
Stacks Image 187
Click on the skull and crossbones on the left and download the necessary files. There are two handy files to simulate old paper and all of the shapefiles necessary to portray the map.
Spend some time getting used to the interface. You are presented with some pre-built projects.
When you are ready to start hacking away on your Pirate Map, just click, "New Project".

You will be presented with a white window with some text entry boxes.

Make Filename "pirate-map"
For Name, use "Pirate Map"

Select Add.

You now have a blue and white chart on the left and a type of control panel on the right.

First, click the red button on the right labeled, "Disable". This will get rid of the autopilot (which I haven't played with yet).

Click the 'X' on the autopilot tab to get rid of it.

Now look to the bottom left of the application. There is an icon that resembles multiple sheets of paper. Click it. This will create a new layer.


Let's get started with Layers!

Most of the projects that you will build will make use of shapefiles. You should have downloaded all of the shapefiles and images necessary for this project. The first thing we’ll do is delete autopilot.mss from the right hand pane. This defines the country colors from the country shape file that comes default with Tilemill. Now, click on the ‘+’ sign to create a new mss file. The mss file is used to define all of the characteristics for our shapefiles. One is for colors and the other is for fonts and drawing lines. Create a new one called “labels.mss”. The guts for this file is inside the download file you should now have. Cut and paste the contents of labels.mss into the new layer. Here is it below:

@ts: 2;

#countries[TYPE != 'Lease'] {
  text-face-name: "Mutlu  Ornamental";
  text-fill:#363330;
  text-comp-op: color-burn;
  text-size:9;
  text-wrap-width:20;
  text-name:"''"; /* hackish? */
  
  [ScaleRank<2][zoom=2] {
    text-name: "''";
  }
  [ScaleRank<3][zoom=3] {
    text-name: "[ABBREV]";
    text-size:12;
  text-line-spacing:-12;
  }
  [ScaleRank<4][zoom=4] {
    text-name: "[NAME]";
    text-size:14;
    text-line-spacing:-14;
  }
  [ScaleRank<5][zoom=5] {
    text-name: "[NAME]";
    text-size:18;
    text-character-spacing:1;
    text-line-spacing:-18;
  }
  [ScaleRank<9][zoom>5] {
    text-name: "[NAME]";
    text-size:24;
    text-character-spacing:3;
    text-line-spacing:-24;
  }

}

/* ---- CITIES ---- */
#cities[WORLDCITY=1][zoom>4] {
  text-name: "[NAME]";
  text-fill: #363330;
  text-comp-op: color-burn;
  text-face-name: "Mutlu  Ornamental";
  text-size: 11;
}

#cities[ADM0CAP=1][zoom>3] {
  text-name: "[NAME]";
  text-fill: #363330;
  text-comp-op: color-burn;
  text-face-name: "Mutlu  Ornamental";
  text-size: 11;
}

#cities[FEATURECLA="Populated place"][zoom>5] {
text-name: "[NAME]";
  text-fill: #363330;
  text-comp-op: color-burn;
  text-face-name: "Mutlu  Ornamental";
  text-size: 14;
}

// =====================================================================
// OCEAN & MARINE LABELS
// =====================================================================

@marine_text: #678;
#marine_label[LABELRANK=1][zoom>=3][zoom<=5] {
  text-face-name: "Mutlu  Ornamental";
  text-fill: @marine_text;
  text-comp-op: color-burn;
  text-allow-overlap: true;
  text-name: "[NAME]";
  text-wrap-width:20 * @ts;
  [PLACEMENT='point'] { text-placement:point; }
  [PLACEMENT='line'] { text-placement:line; }
  [zoom=3] {
    text-size:20 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 15; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=4] {
    text-size:25 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 20; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=5] {
    text-size:30 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 20; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
}
#marine_label[LABELRANK=2][zoom>=3][zoom<=6] {
  text-face-name: "Mutlu  Ornamental";
  text-fill: @marine_text;
  text-comp-op: color-burn;
  text-allow-overlap: true;
  text-name: "[NAME]";
  text-wrap-width:40 * @ts;
  [PLACEMENT='point'] { text-placement:point; }
  [PLACEMENT='line'] { text-placement:line; }
  [zoom=3] {
    text-size: 14 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 2;
      text-line-spacing: 6; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=4] {
    text-size: 14 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 2;}
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=5] {
    text-size: 20 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 2;}
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=6] {
    text-size: 24 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 3;}
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
}
#marine_label[LABELRANK=3][zoom>=3][zoom<=6] {
  text-face-name: "Mutlu  Ornamental";
  text-fill: @marine_text;
  text-comp-op: color-burn;
  text-allow-overlap: true;
  text-name: "[NAME]";
  [PLACEMENT='point'] { text-placement:point; }
  [PLACEMENT='line'] { text-placement:line; }
  [zoom=3] {
    text-size: 12 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:30 * @ts;
      text-character-spacing: 2; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=4] {
    text-size: 13 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:40 * @ts;
      text-character-spacing: 3; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=5] {
    text-size: 15 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:50 * @ts;
      text-character-spacing: 4; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=6] {
    text-size: 18 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:60 * @ts;
      text-character-spacing: 5; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
}
#marine_label[LABELRANK=4][zoom>=4][zoom<=6] {
  text-face-name: "Mutlu  Ornamental";
  text-fill: @marine_text;
  text-comp-op: color-burn;
  text-allow-overlap: true;
  text-name: "[NAME]";
  text-wrap-width:35 * @ts;
  [PLACEMENT='point'] { text-placement:point; }
  [PLACEMENT='line'] { text-placement:line; }
  [zoom=4] {
    text-size: 12 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 2; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=5] {
    text-size: 14 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 2; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=6] {
    text-size: 16 * @ts;
    [PLACEMENT='point'] {
      text-character-spacing: 4; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
}
#marine_label[LABELRANK=5][zoom>=5][zoom<=7] {
  text-face-name: "Mutlu  Ornamental";
  text-fill: @marine_text;
  text-comp-op: color-burn;
  text-allow-overlap: true;
  text-name: "[NAME]";
  [PLACEMENT='point'] { text-placement:point; }
  [PLACEMENT='line'] { text-placement:line; }
  [zoom=5] {
    text-size: 12 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:40 * @ts;
      text-character-spacing: 2; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=6] {
    text-size: 14 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:60 * @ts;
      text-character-spacing:4; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=7] {
    text-size: 16 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:80 * @ts;
      text-character-spacing:5; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
}
#marine_label[LABELRANK=6][zoom>=6][zoom<=7] {
  text-face-name: "Mutlu  Ornamental";
  text-fill: @marine_text;
  text-comp-op: color-burn;
  text-allow-overlap: true;
  text-name: "[NAME]";
  [PLACEMENT='point'] { text-placement:point; }
  [PLACEMENT='line'] { text-placement:line; }
  [zoom=6] {
    text-size: 12 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:40 * @ts;
      text-character-spacing: 2;}
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } }
  [zoom=7] {
    text-size: 14 * @ts;
    [PLACEMENT='point'] {
      text-wrap-width:60 * @ts;
      text-character-spacing: 3; }
    [PLACEMENT='line'] {
      text-name: "[NAME].replace('(.)','$1 ')"; } } }