-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (180 loc) · 9.62 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
<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type='text/css'>
body {
font-family: 'Helvetica';
letter-spacing:-2px;
background:#FFFFF0;
background-size:100%;
color:#000;
margin:0;
padding:0;
font-weight:bold;
}
h1, h2, h3, p {
margin:0;
}
em, a {
font-style:normal;
color:#CA1F2C;
}
a {
background: #226AA9;
color:#FFFFF0;
text-decoration:none;
}
img {
width:100%;
}
div {
cursor:pointer;
cursor:hand;
position:absolute;
top:0;
left:0;
}
</style><script type='text/javascript'>
window.onload = function() {
var s = document.getElementsByTagName('div'), cur = 0;
if (!s) return;
function go(n) {
cur = n;
var i = 1e3, e = s[n];
for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
e.style.display = 'inline';
e.style.fontSize = i + 'px';
if (e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
e.firstChild.style.display = 'none';
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
while (
e.offsetWidth > window.innerWidth ||
e.offsetHeight > window.innerHeight) {
e.style.fontSize = (i -= 10) + 'px';
if (i < 0) break;
}
e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
document.onclick = function() {
go(++cur % (s.length));
};
document.onkeydown = function(e) {
(e.which === 39) && go(Math.min(s.length - 1, ++cur));
(e.which === 37) && go(Math.max(0, --cur));
};
function parse_hash() {
return Math.max(Math.min(
s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) cur = parse_hash() || cur;
window.onhashchange = function() {
var c = parse_hash();
if (c !== cur) go(c);
};
go(cur);
};
</script>
</head>
<body>
<div>Intro to <em>CartoCSS</em></div>
<div>By <a href="http://www.twitter.com/hamhandedly">Patrick Hammons</a> and <a href="http://www.twitter.com/jawntehrani">Jon Tehrani</a></div>
<div>Special thanks to <em>Lyzi Diamond</em> from MaptimeOAK & <em>James Seppi</em> from MaptimeATX</div>
<div>Housekeeping!</div>
<div>You can follow along here: <a href="http://ph.ly/mktiles">ph.ly/mktiles</a></div>
<div>Links are in <a>blue boxes</a>, <em>red</em> is just emphasis. <br>You can comment and edit on <a href="http://www.github.com/maptimephl/making-tiles">github!</a></div>
<div>Also, before we get going, make sure you have <a href="https://www.mapbox.com/mapbox-studio/">mapbox studio</a> installed.</div>
<div>Today we're going to learn how to style tiles.</div>
<div>BUT FIRST</div>
<div>What are tiles? Why are they so important?</div>
<div>Flashback</div>
<div>A long time ago, in a galaxy far, far away ...</div>
<div>Just Kidding</div>
<div>Flashback</div>
<div>Our 2nd Meetup</div>
<div>We discussed the Anatomy of a Web Map</div>
<div>We learned ...</div>
<div>this is a tile <img src="images/tiles/toner.jpg"></div>
<div>It is a 256 x 256 pixel image stored somewhere on the web</div>
<div>Multiple tiles work together to represent what would instead be one large image</div>
<div>This is super important, because ...</div>
<div><img src="images/tiles-loading.gif">All these little tiles load <em>way faster</em> than one big map.</div>
<div>People sometimes refer to web maps which pre-load tiles outside of the screen as <em>"slippy"</em></div>
<div>Tiles are <em>rendered</em> in advance (usually) then stored in a cache</div>
<div>The term for web maps which store tiles in a cache for ready access is a <em>"smart"</em> map</div>
<div>Because map tiles are just images on the web, so you can link to them individually.</div>
<div>For example: <a href="http://tile.openstreetmap.org/4/2/6.png">http://tile.openstreetmap.org/4/2/6.png</a></div>
<div>In order to understand how this works, let's break down the URL.</div>
<div>http://<em>tile.openstreetmap.org</em>/4/2/6.png -- this is the name of the tile server.</div>
<div>http://tile.openstreetmap.org/<em>4</em>/2/6.png -- this is the z value, or the zoom level.</div>
<div>http://tile.openstreetmap.org/4/<em>2/6</em>.png -- This is the x/y value, or the place in the grid where the tile lives.</div>
<!--intro to cartocss, styling workshop -->
<div>Ok ok ok, let's move on to actually <em>making tiles</em></div>
<div>Remember: map tiles are just <em>a bunch of images</em> "rolled" up into a web service</div>
<div>SO: there are <em>MANY</em> ways to roll tiles</div>
<div><em>ArcGIS Online</em></div>
<div>ArcGIS Online, <em>Tilestache</em></div>
<div>ArcGIS Online, Tilestache, <em>Renderd</em></div>
<div>ArcGIS Online, Tilestache, Renderd, <em>OpenLayers</em></div>
<div>ArcGIS Online, Tilestache, Renderd, OpenLayers, <em>GDAL</em></div>
<div>ArcGIS Online, Tilestache, Renderd, OpenLayers, GDAL,<em> etc., etc.</em></div>
<div>BUT <a href="http://geosprocket.blogspot.com/2014/01/on-reverse-engineering-map-stack.html">"you should probably just use Mapbox"</a></div>
<div>Mapbox makes two apps: <a href="https://www.mapbox.com/tilemill/">tilemill</a> & <a href="https://www.mapbox.com/mapbox-studio/">mapbox studio</a></div>
<div>Tilemill was first, and really powerful, but pretty much only does raster and requires big OSM exports</div>
<div>Also a <em>BIG NOTE:</em> tilemill is deprecated, meaning they won't be updating it anymore</div>
<div>Mapbox studio does <em>vector tiling</em>, lets you connect to their data servers, <em>BUT</em> you have to pay for their standard plan to share your maps</div>
<div>Mapbox says there's a way to export mbtiles so you can host on your own server, but as of now <em>I haven't figured out how</em></div>
<div>All that aside, both apps use <em>CartoCSS</em> to style tiles</div>
<div>Uhhhhhh what's that?</div>
<div>CartoCSS is a "rule-based" language for applying styles to maps</div>
<div>Meaning, you make rules for different parts of the map and it applies throughout</div>
<div>Based on <em>Cascading Style Sheets (CSS)</em>, which defines formatting, colors, fonts, and <em>basically everything</em> having to do with a website's appearance</div>
<div>If you're coming from web development, this is <em>basically the same approach</em> as styling for the web</div>
<div>If you're coming from GIS, this is a <em>way different approach</em> to making maps</div>
<div>This is what CartoCSS looks like: <br><img src="images/cartocss.png"></div>
<div>Every CSS rule has <em>attributes</em> and <em>values</em></div>
<div><em>Attributes</em> are the <em>thing you're styling </em>(polygon-line, polygon-fill, etc.), and the <em>value</em> is <em>how it's styled </em>(line weight, color, etc.)</div>
<div>Important: each attribute/value line is <em>followed by a semi-colon</em></div>
<div>There are a <em>TON</em> of attributes, but <a href="https://github.com/mapbox/carto/blob/master/docs/latest.md">here's the full list</a></div>
<div>To style a specific element, we use a <em>selector</em></div>
<div><em>ID selectors</em> target an element's <em>unique ID</em></div>
<div><em>Class selectors</em> target <em>potentially multiple datasets</em> grouped by their class</div>
<div>Octothorpe (#) = ID Selector, dot (.) = class selector</div>
<div>"Map" is another selector, but just refers to the background where there isn't any data to style</div>
<div><em>Filters</em> make selectors even more specific, only applying in <em>certain conditions</em></div>
<div>What would this style apply to?:<img src="images/filters.png"></div>
<div>Multiple selectors can be filtered by using <em>commas</em> (applies when either condition is true) or <em>no commas</em> (when both conditions are true)</div>
<div>Either/or <img src="images/comma.png"></div>
<div>Both <img src="images/chained.png"></div>
<div>Rules are <em>applied in order of appearance</em> and <em>overwritten</em> by subsequent rules</div>
<div> <img src="images/order.png"></div>
<div><em>Nesting selectors</em> inside of other rules helps keep things tidy</div>
<div><img src="images/nesting.png"></div>
<div><img src="images/nesting.png">WOW SO CLEAN</div>
<div>Another really cool thing: <em>variables!</em></div>
<div>Variables let you access attributes and <em>call them later on</em></div>
<div><img src="images/variables.png"></div>
<div><img src="images/variables.png">SUPER USEFUL</div>
<div><em>Colors</em> can be defined in a bunch of ways</div>
<div>
<ul>
<li><em>Name</em>: blue</li>
<li><em>Hex</em>: #47DAD3</li>
<li><em>RGB (red, green, blue)</em>: rgb(71, 218 211)</li>
<li><em>HSL (hue, saturation, lightness)</em>: hsl(177, 67%, 57%)</li>
</ul>
</div>
<div><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/ColorPicker_Tool">Play with CSS colors here</a></div>
<div>Color paletes <a href="http://paletton.com/">here</a>,
<a href="http://design-seeds.com/index.php/search">here</a>, <a href="https://kuler.adobe.com/create/color-wheel/">here</a>, and <a href="http://www.colourlovers.com/">here.</a></div>
<div><img src="images/brewer.png"></div>
<div><img src="images/brewer.png"><a href="http://colorbrewer2.org/">COLOR BREWER</a> IS RAD</div>
<div>There's <em>a lot</em> you can do with CartoCSS, but let's <em>START STYLING</em></div>
<div>For more on carto, <a href="https://www.mapbox.com/tilemill/docs/manual/carto/">check out the docs
</a></div>
<div></div>
</body>
</html>