There are three ways to control draw order in TileMill. You have to keep all three in mind when developing a map because they all work together to determine how the final product is going to look.
- If you have multiple stylesheets, they render in the order in which you put them in the TileMill project.
- Also, just as with regular CSS, the code at the bottom renders over the code at the top of each stylesheet. In cascadenik, if you want to case a road you can put all the code into one code block because cascadenik has outline, inline, and line properties whereas CartoCSS just has the line property. To do the same thing in CartoCSS you’d use multiple symbolizers. So you’d have road_fill::outline {code}, road_fill::line {code}, and road_fill::inline {code}, in that order so that the inline styles are drawn on top of the line styles, which are drawn on top of the outline style. That way you can have your thick outline (the road “casing”), with another color on top (the road line) and another thin color inside and on top (the road centerline, perhaps).
- Don’t forget to also order the data in the layer list at the bottom-left, which I generally keep open during development. You order the layers by moving the mouse to the left of the layer name you want to move, waiting until it turns into a four direction arrow, then dragging it where you want it. The highest layer in the list renders over the layers below it. See below:
#1 by Ken Gross on March 29, 2013 - 7:56 am
I find that TileMill was written by programmers for programmers. The tutorials are confusing and inadequate at best.
Do you know of a good way to learn how to spec out maps with TileMill? In particular, I have trouble with creating cased lines and I could never find documentation on what various effects may be applied to features.
Thanks!
#2 by Gretchen on March 29, 2013 - 8:31 am
@Ken I would recommend watching Tobin Bradley’s Fuzzy Tolerance Screencast #1 (20 min., beginner TileMill tutorial) and his Fuzzy Tolerance Screencast #12 (28 min., more in-depth about what you can do with TileMill). These were instrumental in my being able to get up and going with the software.
Cased lines are a matter of referring to the dataset that you want to case twice: one with a wide width and one with a narrow width. Something like this:
#roads::outside {line-width: 2; line-color: #cfcfbf}
#roads::inside {line-width: 1; line-color: #f4f4e8}
Note: The terms “outside” and “inside” are not absolutely needed. I’ve just made those up to make the code more readable to someone else. Also, this assumes you’ve added a layer with the ID of “roads” to the layers list. You can add a layer by clicking the paper-stack icon in the lower left of the TileMill screen, then clicking on Add Layer.
#3 by Ken Gross on March 29, 2013 - 9:10 am
Thanks!