-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
492 lines (386 loc) · 26.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<meta charset=utf-8 />
<title>The Carto Manual</title>
<!-- <link rel='shortcut icon' href='path/to/favicon.ico' type='image/x-icon' />
--> <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
</head>
<body>
<p>The Carto Manual <p>
More information at: <a href="https://github.com/skorasaurus/carto-manual">https://github.com/skorasaurus/carto-manual</a>
<div class="col9 pad4 doc-content keyline-left prose">
<p><strong>===So what is Carto ?===</strong></p>
<p>Mapnik is a popular tool to render, <em>that is to display</em>, geographical information into images.</p>
<p>Mapnik's code instructs what features (roads, rivers, buildings) to display and what these features should look like (this is known as rendering), is in XML. This XML is very difficult to read. In 2009(ish?), cascadenik was made to help simplify this.</p>
<p>Then, Carto (also known as CartoCSS, but for the rest of this manual, it will be referred to as Carto) was set out to provide an easier way to write these instructions while taking full advantage of mapnik's rendering capabilities and superceded cascadenik.</p>
<p>It's like the CSS language (and less.js), it's used to style maps in the application, Tilemill and its successor, Mapbox-Studio</p>
<p>Before going any further, be sure that you have read these guides made by MapBox. https://www.mapbox.com/Tilemill/docs/guides and <a href="https://github.com/mapbox/carto/blob/master/docs/latest.md"> MapBox's carto documentation</p>
<p>The Carto-Manual is for more advanced uses of Tilemill that are not already explained in MapBox guides and gives a general overview of things for Tilemill and Carto that I've learned outside of those guides.</p>
<p><strong>== Organizing your data ==</strong></p> Before you even start making your map, ensure your geospatial data is organized and in formats supported by Tilemill. Tilemill supports postgis, SHP, geojson, CSV (<a href="http://www.mapbox.com/Tilemill/docs/guides/google-docs/">must be formatted correctly </a>, gpx, and maybe something else. Make sure that data is in the same projection used in Tilemill, EPSG:4326.</p>
<p>If you're focused on performance or want to render large amount of data (like entire countries), go with postgis and SHP instead of geojson or CSV.</p>
<ul>
<li>If you are using shapefiles, you'll want run Shapeindex, a tool that improves performance for shapefiles in Tilemill, on each shapefile. Mac and Linux users already have Shapeindex installed through Mapnik but Windows users will need to download <a href="http://mapnik.s3.amazonaws.com/dist/archive/shapeindex-2.2.0-win-x86_32.zip">Shapeindex for Windows</a> before continuing.</li>
</ul>
<p>To run Shapeindex on Mac and Linux, go to the terminal, move to directory containing the shp file and run shapeindex like:</p>
<p><pre>shapeindex land-polygons-split-3857.shp</pre></p>
<hr />
<p><strong>PostgreSQL Queries:</strong></p>
<p>If you're using a postgis DB, you want your layers to be as specific as possible. Just as using <pre>select * FROM yourtablename</pre> is inefficient in your postgresql queries because you're selecting everything, using select * queries in Tilemill will increase the time needed to load your map. Your layer's query should only select the data that you will want to display on your map.</p>
<p>The syntax for the following SQL queries may be different because of the program that you use to generated your geographical data into Postgresql. If you are using Openstreetmap Data that was converted to Postgresql via osm2pgsql, these queries will be applicable. If you didn't, many changes will apply to these queries.</p>
<p>Here's a very simple query for a layer:</p>
<pre> (select shop,way from planet_osm_point where shop is not null) as points</pre>
<p>(if you're importing data from osm2pgsql see http://wiki.openstreetmap.org/wiki/Osm2pgsql/schema for the names of tables)</p>
<p>Let's show what this means:</p>
<p>Shop is your column name, planet_osm_point is your table name and points is an arbitrary name at this time. You can name it whatever you want. If you used osm2pgsql to import your data, the column names in your postgis database are in most instances, the 'key' part of an OSM tag. (remember for osm tags, a tag is key=value ... e.g. highway=residential) One exception to this is the 'way' column. The way column represents all the geographic coordinates. You will want to include the way column every time in your query regardless if you are selecting points, linestrings, or polygons.</p>
<p>If you are interested in only selecting restaurants,bars, and pubs for a layer, then your layer should only include points that are restaurants, bars, and pubs!</p>
<p>This query would be:</p>
<p><pre>(select way, name, amenity FROM planet_osm_point WHERE amenity IN ('restaurant','pub','bar')) AS grub</pre></p>
<p><strong>First things First</strong><em> Unwritten guidelines and things that I really wish knew when I started using Tilemill, you should know by now if you're reading this, and what inspired me to write this guide.</a> </em>
</p>
<p>
<em>What data should go in each layer? Should I make one layer for all roads? One for railways? Labels?</em></p>
<p> This question really confused me as a newbie Tilemill user and it is difficult to answer because it depends on the map that you're making and the sources of your data.
</p> Generally, the more features that your map will include, the more layers that you'll want.
<!-- <p>Making a simple map with only one do not put everything in one layer, even if all of your data is in one file. (
</p> -->
<p>If you're making a map that will feature distinct styling for bridges, tunnels and multiple types of highways, you'll likely have multiple layers there (one for bridges, one for highways, one for tunnels, etc). (And you're likely using postGIS data sources). Many popular stylesheets have 3 separate road stylesheets, one for lower zoom levels (like 10-13ish), medium (14-17ish), and more detailed (18+), plus separate ones for all tunnels and bridges.
</p>
<p>One applicable rule that is applicable for nearly every Tilemill map is that you should have a layer solely dedicated to labels :)
</p>
<p>Deciding whether to create a layer or specifying in your MSS file for your specfic feature is something that you'll learn more as you work with Tilemill. But: If you are unsure, just create its own layer for it.
</p>
<p><em>What programs do I use to edit my stylesheets (.mss) and my project file (.mml)?</em></p><p> You can edit them within Tilemill itself. You can also use your own preferred text editor (sublime, notepad, vim, emacs). Editing them within your own preferred text editor is especially useful when you have many MSS files. If you edit and save your file in your text editor, Tilemill will automatically detect the changes, refresh, and display the changes.
</p>
<p>For writing selectors like <pre>highway='specifictypeofstreetforexample'</pre> use single quotes. Double quotes also work in Tilemill, it's just a standard practice by other Tilemill users to use single quotes. The exception to this is when the field (correct term?) is an integer, like a zoom level.
</p>
<p>The order of the MSS files' tabs (from left to right) within Tilemill does not matter. Neither do the names of the MSS files; they do not have to match the name of your layers. Use whatever names that are easy for you to remember.
</p>
<p>You can access Tilemill through your web browser. In the terminal, go to the directory where Tilemill install is located (/usr/share/Tilemill for ubuntu users). In this directory, type in: <pre>./index.js --server=true</pre>. Now, you can go to your web browser and type in localhost:20009 and Tilemill will be there. This is a very handy tool. You can now work on multiple projects at one time. If you want to test out a snippet of code real quick in a new project or context, and don't want to make a branch in git for whatever reason, you can now do so.
</p>
<hr />
<p><strong>Inheritance</strong></p>
<p>CSS saves you time by inheritance, so very basic:</p>
<p><pre>
#place[type='neighbourhood'][zoom>=13][zoom<=20] {
text-name:'[name]';
text-face-name:@sans;
text-placement:point;
text-fill:@other_text;
text-size:10;
text-halo-fill:@other_halo;
text-halo-radius:1;
text-wrap-width: 30;
text-min-distance: 100;
text-avoid-edges: true;
text-label-position-tolerance: 10;
[zoom>=13] {
text-min-distance: 50;
}
[zoom>=14] {
text-size:11;
}
}
</pre> Here, for zoom 13 and higher, the text-min-distance is now 50 and the rest of the characteristics that are included in first selection, for zoom 14 and higher, it will have ALL of those characteristics that are included in first selection, except for the text-size is now 11.<br /> Also note that it's standard practice to use <pre>>=</pre> when you write out your zoom queries and keep it consistent. Wish I knew why, but I haven't had any problems result from adapting this.</p>
<hr />
<p>==== Styling ===</p>
<p>ohh, ahh, so how do I Make stuff look purdy?</p>
<ul>
<li>Check out Mapbox's <a href="http://www.mapbox.com/tilemill/docs/guides/comp-op/"> comp-op page</a> if you haven't already </li>
<li>Also check out the <a href"https://www.mapbox.com/blog/colorize-alpha-image-filter"> image filters </a> (will add more on this)</li>
</ul>
<hr />
<p>===Reading the API===</p>
<p>So, the api can be difficult to read if you're not familiar with reading APIs.</p>
<p>For example, see <a href="https://www.mapbox.com/carto/api/2.1.0/#polygon-pattern">The polygon-pattern-file,</a></p>
<p><pre>#processed_p[zoom>=10] {
polygon-pattern-file:url('img/imagename.png');
}
</pre></p>
<p>This url path assumes that imagename.png is located in a subfolder of your project, named img.</p>
<p>Tip: For images, images that you use for polygon-pattern-file or map-background should be "seamless." They should be 256x256 or 512x512 in size. If they aren't seemless, you will notice where one tile ends and the other begins (add ugly example)</p>
<p> <strong>Attachments</strong> </p>
<p> When you see the :: being used, they're called attachments. These are pretty damn dope: they extend the capabilities of Tilemill, and wish I learned these earlier.
</p>
<pre>#layername[yourfilter-isthatwhatthisiscalled]::selector
{ your code here.
}</pre> You can name your selector whatever you want, it's arbitrary.
</p>
<p>Also repeated in http://www.mapbox.com/Tilemill/docs/manual/carto/ (include?)
<p>Note that newsymbol is not a special keyword but an arbitrary name chosen by the user. To help keep track of different symbolizers you can name additional symbolizers whatever makes sense for the situation. Some examples: <pre> #road::casing, #coastline::glow_inner, #building::shadow. </pre>
<p>To recap what was written there, the second rule will add a blue glow on top of the red line instead of replacing it:
<pre> #layer {
line-color: red;
line-width: 4;
}
#layer::glow {
line-color: blue;
line-opacity: 0.5;
line-width: 8;
} </pre>
<img src="https://github.com/skorasaurus/carto-manual/raw/master/img/example_001.png" alt="Example 001" />
</p>
<p>This glow is only possible because of the line-opacity rule. Try removing that and then click save. You'll now only see a blue line, as shown in the image below:
</p>
<p><img src="https://github.com/skorasaurus/carto-manual/raw/master/img/example_002.png" alt="Example 002" />
</p>
<p>Important! <strong> Remember the painter's algorithm:</strong> One of the most important concepts that helped me understand Tilemill.
</p>
<p>Let's explain how this works with attachments and the previous example. As you saw in the most recent example, you only saw a blue line.
</p>
<p>but if we reverse the two colors, like the following :
</p>
<p><pre>
#layer {
line-color: red;
line-width: 8;
}
#layer::glow {
line-color: blue;
line-width: 4;
}</pre>
</p>
<p><img src="https://github.com/skorasaurus/carto-manual/raw/master/img/example_003.png" alt="Example 003" />
</p>
<p>In this case, you will see a blue line with a red outline or a red glow! Why? the red line with a width of 8, was drawn first, and then the blue line, with a width of 4, was drawn above the red line.
</p>
<p>With attachments, the line is drawn over the previous object! This is the painter's algorithm!
</p>
<p>However, if you do not use attachments you'll only end up with a blue line that is 4 pixels wide. Without attachments, the code in the second selector only will be used. <pre>
#countries {
line-color: red;
line-width: 8;
}
#countries {
line-color: blue;
line-width: 4;
} </pre> </p>
<p>If you use attachments consecutively, like: <pre>
#layer::first {
line-color: red;
line-width: 4;
}
#layer::glow {
line-color: blue;
line-width: 2;
}</pre> They will have the same action as the early image (not immediately before, but the 2nd one before this example)... the blue glow will be atop the red line. For simplicity's sake, you shouldn't need to do this, just remove the attachment from the first layer.
</p>
<p>(http://www.mapbox.com/Tilemill/docs/guides/symbol-drawing-order/ explains pretty well, as well, wish this was there when I started)
</p>
<p>And you already know, In addition to attachments, the painter's algorithm also applies to the entire mss file. Lines, points, and polygons that are written first in the MSS file will be drawn first. Any lines, polygons, and points that are written later in the file will be drawn over the earlier ones.
</p>
<p>There's also one last affect on the drawing order of features in Tilemill which controlled by the order that the layers appear.
<p>You can change the order of the layers, Drag the tiny icon that is to the left of each layers' name in the layers' window, that is located in the lower left hand corner of your screen.
(credit Yohan Boniface) FIXME, add picture </p>
</p>
<p>Now, Attachment style:
</p>
<p>there's no difference between: <pre>
#layer {
::outline {
line-width: 6;
line-color: black;
}
::inline {
line-width: 2;
line-color: white;
}
}</pre> and
<pre>#layer::outline {
line-width: 6;
line-color: black;
}
#layer::inline {
line-width: 2;
line-color: white;
}</pre>
The first version is a little easier to read and has been adopted by openstreetmap-carto, osm's standard stylesheet
</p>
<p>AJ Ashton - I don't really have a preference and will do either or both depending on the project and the data. But for OSM-Carto I think the no-repeat approach is a good fit, and it's good to have that kind of consistency on a collaborative project.
</p>
<p>(What's the diff between: <pre>#place::small[type='neighbourhood'][zoom>=13][zoom<=20]
and
#place [type='neighbourhood'][zoom>=13][zoom<=20] ::small </pre>
</p>
<p> As shown in the examples, attachments are useful to style features (roads, land, etc).
multiple textures, casings for lines (if you want a road to be outside with a different color than what the inside of it is...), and so much more can be done with attachments..
</p>
<p>Like this example for a railroad.
</p>
<pre>#rail [zoom>=12][zoom<=21]::perpendicular-dashes {
line-cap: butt;
line-color: black;
[zoom>=12] { line-width: 5.25;
line-dasharray: 0.45,10; }
[zoom>=14] { line-width: 5.75;
line-dasharray: 0.75,15;}
[zoom>=16] { line-width: 6.75;
line-dasharray: 1.25,20; }
[zoom>=18] { line-width: 7;
line-dasharray: 1.5,25; }
[zoom>=20] { line-width: 7;
line-dasharray: 1.75,35; }
}
#rail [zoom>=12][zoom<=21]::base-line {
line-cap: butt;
line-color: black;
[zoom>=12] { line-width: 1; }
[zoom>=14] { line-width: 1.25; }
[zoom>=16] { line-width: 1.75; }
[zoom>=18] { line-width: 2; }
[zoom>=20] { line-width: 2.25; }
}</pre>
<p>In the above rail instance, the perpendicular-dashes are drawn first, then the base-line are drawn. (ADD IMAGE)
</p>
<p>Selections/selectors within the Layer:
</p>
<p>There are times when even if you filter the objects that you want in your layer, you want to customize styling based on certain properties within your layer.
</p>
<p>- Adding a comma starts a whole new selector - meaning aspects of your previous selector (like the layer and zoom level) are not considered. So you need to repeat yourself a bit.
</p>
<p>For example, if you want to add a style to display for only 2 types of parks at only level 10, and you want the style to apply to either park, you would repeat the zoom level and the park_type twice.
</p>
<p>Like the following:
</p>
<p><pre>
#parkpoint[zoom=10][park_type = 'National Park'],
#parkpoint[zoom=10][park_type = 'National Park & Preserve'] {
} </pre>
</p>
<p>As you notice, I started a new line following the first parkpoint in the example and it's helps yourself to be consistent and organized by using a new line after a comma.</p>
<p><bFlood> ajashton: is there a way to perform boolean ops between filters? so instead of #layer [field=foo][field=bar] we could do [field1=foo] AND [field2=bar]? <ajashton> #layer[field1=foo][field2=bar] is an AND operation <ajashton> #layer[field1=foo], #layer[field2=bar] is an OR operation <ajashton> you can also use nesting, like <pre>#layer { [field1=foo],[field2=bar] { /* style */ } }</pre>
</p>
<p><bFlood> one more, for complex expressions can you use parens to separate the logic: #layer {[field3=baa],( [field1=foo][field2=bar]) <ajashton> bFlood, no parens. Everything between commas is totally separate <ajashton> down side is that <pre>x AND (y OR z)</pre> has to instead be <pre>(x AND Y) OR (x AND z)</pre> <ajashton> (not in that syntax, tho)
</p>
<p>You can also use negatives as a selector in carto, by using: <pre>!=</pre> For example, the following code will select all items(?) that DO NOT have a value of National Park OR National Park & Preserve by:
</p>
<p><pre>[display_designation != 'National Park'][display_designation != 'National Park & Preserve']</pre>
</p>
<p>(display_designation is the name of a row in your data )
</p>
<p>(Note: This selection could also be done through a POSTGRESQL layer if you're using it). If you are using POSTGRESQL, writing a query (query, may not be the correct term), is preferred because it will be quicker in rendering speed.
</p>
<p>As stated earlier, you want your layers to only include the data that you want to select.
</p>
<p>In the following example, here's a postgresql query of a railway layer. like the following with way, railway as your column names.
</p>
<p><pre>SELECT way, railway, CASE WHEN railway in ('spur','siding') THEN 'yard' WHEN railway='disused' THEN 'disused' WHEN railway='rail' THEN 'main' ELSE 'other' END AS type FROM planet_osm_line WHERE railway IS NOT NULL ORDER BY z_order) as rail",</pre>
</p>
<p>'Main' and 'yard' now become selectors that you can reference in your layers!
</p>
<p>so you can use 'yard' as a selector and it will represent that selection you made in the SQL layer. In the above (when railway row has values of spur or siding)
</p>
<p><pre>
#railway[type='yard']
{
your rules for yard
}
#railway[type='main']
{
your rules for main
}
</pre>
</p>
<p>see: https://github.com/hotosm/HDM-CartoCSS/blob/master/roads.mss
</p>
<p>a more advanced example: from the <a href="https://github.com/hotosm/HDM-CartoCSS/blob/master/roads.mss">HOT rendering</a> <pre>SELECT way, tunnel, bridge, railway, service, CASE WHEN railway in ('spur','siding') or (railway='rail' and service in ('spur','siding','yard')) THEN 'yard' WHEN railway='disused' THEN 'disused' WHEN railway='rail' THEN 'main' ELSE 'other' END AS type FROM planet_osm_line WHERE railway IS NOT NULL AND railway!='abandoned' ORDER BY z_order) as rail",</pre>
</p>
<hr />
<p><storng>Fonts</strong></p>:
Fonts (typefaces, if you're being pedantic), are effective to set the tone of your map.
If you are unsure of the font's name and style, you can open your font (the .otf file) in Ubuntu with 'Font Viewer' which will display
information on your font including its name and the Style. The style is often classified in types like: "Italic", "Bold", "IIBook", or
"Bold Italic".
<p> For ubuntu users, TileMill will read your fonts in your ~/.fonts folder and all of its subfolders, so you can just place your folders in there.</p>
<p>In Mapbox-Studio, your fonts must be in same folder (or subdirectory) as the project that you're working on. <pre>(e.g. /Documents/MapBox/project/mycooldakarmap.tm2/)</pre> </p>
Then, set the folder to the location of the fonts. In the below example, the fonts are in a folder named fonts.
<pre> Map {
font-directory: url('fonts/'); </pre>
When you're experimenting with different fonts, you can declare your font styles at the top of a stylesheet and set them with variables like the following example where I plan on using this font for streets where my font's name is "Avenir Next LT Pro" and its style is "Regular".
<pre> @streetsfont: "Avenir Next LT Pro Regular";
</pre>
<p><strong>Variables</strong>:
</p>
<p>As you already know, variables are a spiffy feature in Tilemill. You begin a variable with the @ symbol and then your name of the variable.
</p>
<p>If you haven't seen already, you refer to them in other variables as well.
</p>
<p><pre>@secondary_line: #9FA9A8;
@secondary_fill: lighten(@secondary_line,10%);
@secondary_case: @secondary_line * 0.9;</pre>
</p>
<p>You've likely already used them for colors, fonts, and text labels. You can also use them for polygon-pattern-file and other similar operations as well in a limited fashion.
</p>
<p>When you use them as a polygon-pattern-fill for example, here's how it's done:
</p>
<p><pre>@land: url('img/land.png');
#countries {
polygon-pattern-file: @land;
}</pre>
</p>
<p><strong>Classes</strong>:
</p>
<p>Opacity (and related comp-op) operates on a layer as a whole. However, it’s specified inline with the rest of the rules, which is confusing. This sort of thing shouldn’t work, or should perhaps throw a warning:
</p>
<p><pre>
#foo[bar=1] { opacity: 0.2 }
#foo[bar=2] { opacity: 0.8 }</pre>
</p>
<p>My experience has been that opacity gets set just once, for the whole layer, and I’m not sure how to predict which one would win in this case. https://github.com/mapbox/carto/issues/249
</p>
<p><strong>Tilemill tooltips:</strong>
</p>
<p>Yeah, you want awesome tooltips - (the content that is displayed when a user hover a marker with their cursor or when they click on a marker in your map) -
</p>
<p>A preface/warning: if you want something that is a little complicated, like custom images for each of your points, it can be done through Tilemill although I would consider you to use leaflet for your tooltips instead of plotting them on a map in Tilemill.
</p>
<p>For example, I wanted to change the width of the tooltip so I could have a larger image display without the user having to scroll, as shown in the picture:
</p>
<p>What you'll need to do:
</p>
<p>The default styling for the Tooltips is located at: https://github.com/mapbox/wax/blob/master/theme/controls.css
</p>
<p>Look for the relevant class and property within the CSS file, and place your edited CSS code, surrounded by
</p>
<p><pre><style>
.map-tooltip {
max-width:400px !important;
}
</style></pre>
</p>
<p>As mentioned <a href="http://support.mapbox.com/discussions/Tilemill/1460-customizing-the-tool-tips">here</a> Some changes to the CSS (like changing the width of the tooltips) will not appear in Tilemill and only will appear after you upload your map to MapBox. You can then view the your map online to confirm your changes.
</p>
<p>Other modifications to the CSS, like the opacity of the tooltip box, will display within your Tilemill project.
</p>
<p>Tooltips: https://github.com/mapbox/wax/blob/master/theme/controls.css - how to change the font ? font is not in there ?! - you cannot unless you have wax on your server, because of security concerns, see:
</p>
<p>One drawback that i'm immediately noticing to styling your markers in Tilemill, is that if you're going to display them on a webpage (using mapbox.js), each time that you want to tweak them or debug it, you'll have to upload the entire project up to the web again</p>
Depending on the complexity aof your project and your experience with javascript, you may find it easier to style your icons within leaflet/mapbox.js instead of Tilemill.
<hr />
<p><strong><em>Other Common questions:</em></strong></p>
<p><em>My styling isn't displaying as I intended? Help?!</em></p>
<p>Most common cause of this is that your data isn't included in the layer you're styling! Make sure your data is being included by checking the layer features (the little magnifying glass by the circle...)(NOTE: There may be some cases where this isn't correct - especially if you have many features in your layer) If you're using SQL, put your query into an SQL editor like pgadmin.</p>
<p><em>Where are some great examples of carto in action?! with accompanying code?</em></p>
<p> Check out the list that I made on <a href="http://gis.stackexchange.com/questions/62348/is-there-a-carto-css-gallery-which-also-contains-code/62824#62824">gis.stackexchange</a> </p>
<hr />
<p><strong>Extra Resources, Great tools/Examples</strong>:</p>
<p><em>Cartocc</em>:</p>
<p>Cartocc is a npm (module?) that is designed for people to collaborate together on Tilemill projects. In most cases, your database names, the path to your JSON files will be different than your collaborators. Using this, you can customize your project settings</p>
<p>See for more details: https://github.com/yohanboniface/CartoCC</p>
<p>Also written by the author of cartocc, is the <a href="https://github.com/yohanboniface/Carto-sublime"> carto-sublime package, for the sublime text editor</a> in early development: </p>
<p>projectmill</p>
<hr />
<p><strong>I need help?!</strong></p>
<p>checkout:</p>
<pre>#mapbox on freenode (irc)</pre> <a href="http://support.mapbox.com">support.mapbox.com</a>, and <a href="http://gis.stackexchange.com">gis.stackexchange.com</a></p>
<p>Debugging your crashes:</p>
<p>if you're using ubuntu, go to the directory where Tilemill is installed (likely /usr/share/mapbox/) in your terminal, then type in <pre>./index.js</pre> - Tilemill will startup and try to reproduce your crash.</p>
<p>mac - i think yeah look for ~/Library/Logs/DiagnosticReports/node (if its a node error)</p>
<p>(add more from convos with dane)</p>
<p>ENHANCEMENT TICKET TO Make: I've made a change, for example, the color of a landuse in the stylesheet, and it'll zoom into where I last saved, great. So, I see how the change affected in my immediate area, but if I want to see quickly, this other location ((within my area)) that also has this landuse, I have to zoom out, and then zoom back into the other area... I've had this come up a couple time in my workflows, it'd be a nice enhancement although I have not idea if this is feasible in any way, I'm guessing not.</p>
<p>OR a workaround could be, have your project open in server mode, two tabs on your internet browser, and have it open to the two affected areas.</p>
<p>Once you click on save, would the other one be refreshed as well ? verify.</p>
</div>
</body>
</html>