Styling Line features in TileMill

The previous post showed us how to style line features using TileMill. This post will further demonstrate how to apply enhanced cartographic styles to line features using a different dataset.

Download sample datasets here- Highways.shp , Rail.shp

Open a new project in TileMill and fill in a Filename, name and description as below on the screenshot.


Click on the Layer icon (red boxed below) and Click on the Add layer to add the first sample data- nigeriahighway.shp


On the screenshot, the sample data is added along with a corresponding default layer in the style.mss window.

Click on the features icon beside the sample data to display the attributes of the dataset. There is an attribute field-TYPE-that classifies the different kind of roads. We will use this different values as we move along.

 The Circular red boxed lines of code is the default style that TileMill allocated to the dataset when it was added. Write the lines of code in red box below it in your style.mss window. The new lines of code are allocating a ::case to the lines which are of type-primary on the attribute table. On the screenshot, the line features which are classified as ‘primary’ have now have width and with different line and fill colour.

Next, we do the same for the class of roads –‘secondary’. This time line-width is smaller and the color of the line and fill are different. Most importantly note the extra line of code line-dasharray: 10,3; is added to make the line feature appear as dashed lines.See the screenshot -the red arrow indicates the line features represented by the new style.

Add the second sample data to the layer window- ngarails. To improve the visibility of the line feature, we edited the default style layer by changing the line-width to 3 and the line-color to .

 Write out this lines of code below the default style. These lines of code will style the railway line with a dashed look which is quite popular as a cartographic style. See screenshot below for what the line feature should look like after saving the style. The red arrow points from the style (red boxed) to the railway line feature on the map.

We hope you enjoyed the post. Feel free to let us have your comments and feedback.