User:Moresby/Understanding Mapnik/Using CartoCSS

From OpenStreetMap Wiki
Jump to: navigation, search
Understanding Mapnik
A Mapnik tutorial
Starting with Python
Using XML and CSS
CartoCSS and PostGIS
301-carto.png - map generated using CartoCSS

CartoCSS is a tool which allows maps to be designed using CSS-like syntax. It was created by Tom MacWright in 2010 and was influenced by Cascadenik.

For example, the following Cascadenik input files provides a pretty good version of our example map. This is 301-carto.mml:

 1 { 
 2   "Stylesheet": [
 3                   "301-carto.mss"
 4                 ],
 5   "Layer":      [
 6                   { 
 7                     "name":       "line_layer",
 8                     "class":      "road_lines road_labels",
 9                     "Datasource": {
10                                     "file": "data-roads.csv",
11                                     "type": "csv"
12                                   }
13                   },
14                   {
15                     "name":       "point_layer",
16                     "class":      "town_points town_labels city_points city_labels",
17                     "Datasource": {
18                                     "file": "data-places.csv",
19                                     "type": "csv"
20                                   }
21                   }
22                 ]
23 }

And this is 301-carto.mss:

 1 /* Set background colour to 'ghostwhite'. */
 2 Map {
 3   background-color: #f8f8ff;
 4 } 
 5 
 6 /* Specify how to draw the road labels. */
 7 .road_labels [type != 'rail'] {
 8   text-name:        '[name]';
 9   text-face-name:   'DejaVu Sans Book';
10   text-size:        10;
11   text-fill:        #000;
12 
13   text-placement:   line;
14   text-halo-radius: 2;
15 }
16 
17 /* For rail, we have a wide dashed line. */
18 .road_lines [type = 'rail'] {
19   line-color:       #000;
20   line-width:       2;
21   line-dasharray:   6, 2;
22 }
23 
24 /* Roads are narrow, black lines. */
25 .road_lines [type = 'road'] {
26   line-color:       #000;
27   line-width:       1;
28 }
29 
30 /* Main roads are wider, black lines. */
31 .road_lines [type = 'mainroad'] {
32   line-color:       #000;
33   line-width:       2;
34 }
35 
36 /* Main roads are wide, light blue lines. */
37 .road_lines [type = 'motorway'] {
38   line-color:       #add8e6;
39   line-width:       4;
40 }
41 
42 /* Towns are marked with a small circle. */
43 .town_points [type = 'town'] {
44   point-file:       url('circle_red_8x8.png');
45 }
46 
47 /* Towns names are drawn in black. */
48 .town_labels [type = 'town'] {
49   text-name:        '[name]';
50   text-face-name:   'DejaVu Sans Book';
51   text-size:        10;
52   text-fill:        #000;
53 
54   text-halo-radius: 3;
55   text-dy:          7;
56 }
57 
58 /* Cities are marked with a larger circle. */
59 .city_points [type = 'city'] {
60   point-file:       url('circle_red_16x16.png');
61 }
62 
63 /* City names are drawn in red. */
64 .city_labels [type = 'city'] {
65   text-name:        '[name]';
66   text-face-name:   'DejaVu Sans Book';
67   text-size:        12;
68   text-fill:        #f00;
69 
70   text-halo-radius: 3;
71   text-dy:          11;
72 }

You will need

To run this example, you will need:

External links