More on Styling Line features in TileMill

In this post, we will use line feature layers-roads and rail line to design a map project in TileMill.

Download Sample data here- Line features
(attribute data to www.mapsnigeriainitiative.blogspot.com)

Launch TileMill and create a new project.
Click the Layers icon > Add to import the line feature layers that represent the different classes of roads and rail line.


In the Layers window, three classes of roads namely Major, Minor and Secondary roads as well as a rail line were added into the TileMill project- .
A look at the Style.mss window also shows the different default codes assigned to each layer.


In the railine style, an additional line of code- line-dasharray:5,3; is added to style the railline as dashed lines. This will help clearly differentiate the railline from the roads.The screenshot below shows the changes reflected in the style of the railline feature due to this additional line of code.


Next extra lines of code defining which features should appear at certain zoom levels is added to the style layers. With the understanding that a lot lines can crisscross and intersect each other, turning some off at certain zoom levels will give a neater view to the map user when zooming in and out of the map.
The Style.mss codes for each layer indicates the following:
 major roads line width increases from 3 to 5 as the zoom level moves from 8 to 10. The line width stays as 5 anything above or equal to 12.
The  Interesting part is the railline style layer that specifies that it only appears on the map between zoom greater or equal to 13 and less than or equal to 15 with a line width of 5. Look at the screenshot below and one can see that at zoom 12 (reb boxed to the upper left) the railline is not appearing on the map.


But on moving the zoom up to 13 (red boxed to the upper left of the screenshot), the railline appears on the map as instructed in the code.


Another important part of working with line features is to label them with proper names like street names etc.
We insert this layer of code in the style.mss window allocating labels to the roads based on an attribute field that contains this values. Note that in the second line- text-name: [blank];. this blank space will have to be filled with the attribute field name.
For the demo, the attribute field name is ‘Name’, as seen on the screenshot. The Features window can be opened by clicking the features icon beside the layer in the Layers window.



 Note that two extra lines of code have been added to the previous style layer. text-dy is to displace the label upwards 12 pixels while the text-max-char-angle-delta allocated the angle the label will bend towards at the point of placement.
From the screenshot, one can observe that the labels (red boxed on the map canvas) are well aligned with the line features now.



In this brief tutorial, we have been able to show you how to style your lines into dashed or straight lines, hide and/or show different lines at different zoom levels as well as label the line features.