Create your own map with OpenStreetMap data on Ubuntu - Phase 2: Importing and introduction to Carto

In my previous blog post, we set up a postgres database with OSM data and we installed TileMill, now it's time to play with it's settings. Remember, to start TileMill, you should execute the tilemill.js script from the directory where you installed TileMill.

TileMill is very GUI centered, so I hope I will include enough screenshots.

Importing

First, we create a new project, let's call it Test.

If everything is right, you see a grey world and a white see.

Now we have to add the layers. I hope you know how OSM data is tagged, if you don't, please look at the features list in the wiki.

Let's try to make a basic map with streets, labels and some POI.

We will begin by adding all data in layers like it is in tables now.

Click on the '+' symbol to add a layer and fill in the details like below:

The database tables that contain all data are called

planet_osm_roads
planet_osm_line
planet_osm_polygon
planet_osm_point

I don't personally like a white see, so let's make it blue.

Map {
    background-color: #aaf;
}

#world {
    polygon-fill: #eee;
    line-color: #ccc;
    line-width: 0.5;
}

As you see, the Carto language they created is css-like. But it has advanced features like nesting.

Ways

Let's draw the motorways.

#line [highway='motorway'] {
    line-color: blue;
    line-width:4;
}

Here you see the selection in action. You don't draw all lines, only those with a tag highway=motorway. But you can also nest selections. Say e.g. that we want a wider way if we zoom in.

#line [highway='motorway'] {
  line-color: blue;
  line-width:4;
  [zoom>15] {
    line-width:10;
  }
}

In that example, you see that previous commands are overwritten. You can also select on a tag being not empty. We can e.g. draw all ways with the following code:

#line [highway!=''] {
  line-color:grey;
}

Polygons and points

Drawing polygons works in a comparable way:

#polygon [landuse='residential'] {
  polygon-fill: #dedede;
  line-color:brown;
}

And for points, you can draw a symbol.

#point [amenity='pub']{
  point-file:url('http://svn.openstreetmap.org/applications/rendering/mapnik/symbols/pint.png');
}

Off coarse, it is best to set up your own local set of map icons.

Labels

Most maps also have labels (streetnames, village names ...). For the names, you have to watch out to always define the font, otherwise it won't be rendered.

#point [place!=''] {
  text-face-name:"Andale Mono Regular" ;
  text-name:'[name]';
}

 In the above example, we render the tag 'name', it is also possible to render another tag, like for house numbers, you should render the tag 'addr:housenumber'.
Predefinitions

If you have to use the same value (like a font or a color) over and over again, it might be good to define "global variables". If you change your mind, that's easy to adapt.

You can create a global variable at the beginning of the mss file like that:

@residential: #dedede;

And you can use it easily as follows:

#polygon [landuse='residential'] {
  polygon-fill: @residential;
  line-color:brown;
}

Reference

All fonts and used colors can be found in a separate part of the screen.

If you need extra commands (like rendering a halo around the text for better visibility), you can also check the Carto reference.

Next post

The osm2pgsql script we used in part 1 is a lossy script. That means it only imports certain tags to the database. As an example, it doesn't load any rcn_ref tags or bicycle routes. The next time, we're going to see how we can get around that.

We will also take a look at SQL selecting instead of selecting with the Carto language.