forked from lyzidiamond/mapbox-studio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
317 lines (312 loc) · 19.3 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
<!DOCTYPE html><html><head><title>Maptime does Mapbox Studio!</title><meta charset='utf-8'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link href='big.css' rel='stylesheet' type='text/css' />
<style>
.center {
text-align: center;
}
.quote {
font-family: serif;
letter-spacing: 2px;
}
.roadtrippers {
background-image: url(./images/roadtrippers.png);
background-size: 100%;
}
.wheatpaste {
background-image: url(./images/wheatpaste.png);
background-size: 100%;
}
.pencil {
background-image: url(./images/pencil.png);
background-size: 100%;
}
.studio {
background-image: url(./images/mapbox-studio.png);
background-position: center 5px;
background-size: 20%;
}
.vector {
background-image: url(./images/vectortiles.png);
background-position: center 5px;
background-size: 20%;
text-shadow: 3px 3px 5px #222;
}
.ready {
background-image: url(http://i.giphy.com/75yYfqYy5tmHm.gif);
background-position: center 5px;
}
.tiles {
background-image: url(http://i.giphy.com/J2LWi9tyE2xeE.gif);
text-shadow: 3px 3px 5px #222;
color: #eee;
}
.tilegif {
background-image: url(./images/tiles.gif);
background-repeat: no-repeat;
background-position: center 60px;
}
.jstile {
background-image: url(./images/jstile.png);
}
.mindblown {
background-image: url(http://i.giphy.com/DqSw5gyRQ5yPC.gif);
}
.studio {
background-image: url(./images/studio.png);
background-size: 100%;
}
.save {
background-image: url(./images/save.png);
background-position: center 5px;
background-size: 80%;
color: #eee;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.tour {
background-image: url(./images/tour.png);
background-position: center 5px;
background-size: 30%;
background-repeat: no-repeat;
}
.style-editor {
background-image: url(./images/style-editor.png);
background-position: center 5px;
background-size: 35%;
background-repeat: no-repeat;
text-shadow: 3px 3px 5px #222;
}
.inspecting {
background-image: url(./images/inspecting.png);
background-position: center 5px;
background-size: 100%;
color: #eee;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.vector-sources {
background-image: url(./images/vector-sources.png);
background-position: center 5px;
background-size: 100%;
color: #eee;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.gray-land {
background-image: url(./images/gray-land.png);
background-position: center 55px;
background-size: 80%;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.z6to8 {
background-image: url(./images/z6to8.gif);
background-position: center 5px;
background-size: 80%;
background-repeat: no-repeat;
}
.z4to2 {
background-image: url(./images/z4to2.gif);
background-position: center 5px;
background-size: 80%;
background-repeat: no-repeat;
}
.search-sf {
background-image: url(./images/search-sf.gif);
background-position: center 5px;
background-size: 100%;
}
.buildings {
background-image: url(./images/buildings.png);
background-position: center 5px;
background-size: 80%;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.white-land {
background-image: url(./images/white-land.png);
background-position: center 5px;
background-size: 80%;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.buildings16 {
background-image: url(./images/buildings16.gif);
background-position: center 5px;
background-size: 80%;
background-repeat: no-repeat;
}
.parks {
background-image: url(./images/parks.png);
background-position: center 5px;
background-size: 80%;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
.settings {
background-image: url(./images/settings.png);
background-position: center 5px;
background-size: 25%;
text-shadow: 3px 3px 5px #222;
background-repeat: no-repeat;
}
</style>
<script src='big.js'></script>
</head><body>
<div><strong>Maptime</strong> does <em>Mapbox Studio</em>!</div>
<div><em>PLEASE</em> interrupt if you have any questions!</div>
<div>Go to <a href='http://lyzidiamond.com/mapbox-studio'>http://lyzidiamond.com /mapbox-studio</a> to follow along.</div>
<div>(Use <strong>left</strong> and <strong>right</strong> arrows to navigate. Links have a <a href="#4">purple background</a>.)</div>
<div data-bodyclass='studio center'><br><br>Today we're going to talk about <a href='https://mapbox.com/mapbox-studio'>Mapbox Studio</a>.</div>
<div>First we'll <em>tell</em> you about it, then we'll <strong>walk through</strong> it, then we'll <em>get our hands dirty</em> with it.</div>
<div>Some <strong>things to do</strong> while we're talking:</div>
<div>Use the coupon code <em>MAPBOX4MAPTIME</em> to upgrade to a <strong>Basic account</strong> at <a href='https://mapbox.com/plans'>mapbox.com /plans</a>. If you already have an account, you can <strong>upgrade</strong> through your Billing page: <a href='https://mapbox.com/account/billing'>mapbox.com /account/billing</a>.</div>
<div>If you haven't yet, <strong>download Mapbox Studio</strong> from <a href='https://mapbox.com/mapbox-studio'>mapbox.com /mapbox-studio</a>. If you have, <em>pop it open</em> as there may have been an <strong>update</strong> since the last time you did.</div>
<div><em>First things first:</em> what is <strong>Mapbox Studio</strong>?</div>
<div><strong>Mapbox Studio</strong> is a tool for <em>styling custom basemaps</em>.</div>
<div data-bodyclass='roadtrippers'></div>
<div data-bodyclass='wheatpaste'></div>
<div>It comes <strong>pre-loaded</strong> with data from <a href='https://osm.org'>OpenStreetMap</a> and <a href='https://naturalearth.com'>Natural Earth</a>!</div>
<div data-bodyclass='pencil'></div>
<div>You can also use it with <em>custom sources</em>.</div>
<div>But perhaps <strong>most exciting</strong> is <em>how Mapbox Studio works</em> and <strong>what it makes</strong>:</div>
<div data-bodyclass='vector center'><em>VECTOR TILES!</em></div>
<div>Our <em>plan</em> for today:</div>
<div>1. Talk about <strong>vector tiles</strong></div>
<div>2. Walk through the <strong>Mapbox Studio interface</strong></div>
<div>3. <strong>Customize</strong> a map and <strong>upload</strong> the style to our Mapbox account</div>
<div>4. <strong>Play!</strong></div>
<div data-bodyclass='ready'></div>
<div data-bodyclass='tiles'>Let's talk about <em>vector tiles</em>.</div>
<div data-bodyclass='tilegif'><br><br><br>Before there were <strong>vector tiles</strong>, there were <em>raster tiles</em>.</div>
<div>(If you've seen <a href='http://maptime.github.io/anatomy-of-a-web-map'>Anatomy of a Web Map</a> then you already know all about this, but <strong>bear with us</strong>.)</div>
<div><em>Raster tiles</em> are 256px x 256px <strong>PNG</strong> files that are <em>stored</em> on the server and <em>served</em> to the browser on request.</div>
<div><strong>Only</strong> the tiles in the <em>current map view</em> are requested and loaded. This makes maps <strong>super hella fast</strong>.</div>
<div data-bodyclass='jstile'>How are <em>raster tiles</em> made?</div>
<div>1. Use <strong>vector layers</strong></div>
<div>2. <strong>Style</strong> the data with a styling language called <em>CartoCSS</em></div>
<div>3. <strong>Export</strong> data and stylesheet to a <em>renderer</em> that creates tiled images.</div>
<div>The images are <em>created</em> at each zoom level and stored in a <strong>specific file structure</strong> as PNGs.</div>
<div>That makes <em>sense, right</em>?</div>
<div><strong>Vector data</strong> + <em>style</em> = image with style applied to data.</div>
<div>When your map needs the image tile for a <strong>particular area</strong> at a <strong>particular zoom</strong>, your browser <em>requests</em> it from the server.</div>
<div>Simple.</div>
<div>So how does this differ from <em>vector tiles</em>?</div>
<div>1. Use <strong>vector layers</strong></div>
<div>2. <strong>Style</strong> the data with a styling language called <em>CartoCSS</em>.</div>
<div>3. <strong>Export</strong> data and stylesheet...</div>
<div>(here's where it <em>changes</em>)</div>
<div>The <strong>data</strong> is still divided into 256 x 256 pixel <em>tiles</em> at each zoom level.</div>
<div>But the files are saved as <em>protocol buffers</em>, or <em>PBF</em> files.</div>
<div><strong>Protocol buffers</strong> are <em>super lightweight</em> and <em>compact</em>.</div>
<div>When <strong>exported</strong>, they are stored in the <strong>same file structure</strong> as the raster tile PNGs.</div>
<div>Then, the <em>style</em> you export from Mapbox Studio is saved as a <strong>JSON file</strong>.</div>
<div>So when you <em>load</em> your map and <strong>request</strong> tiles, <em>what</em> is being served?</div>
<div>The <strong>protocol buffers</strong> in the map area and the <em>JSON file</em> that represents the style.</div>
<div>Then <strong>Mapbox servers</strong> instantly combine the two into an image and <em>send it to your browser</em>!</div>
<div data-bodyclass='mindblown'></div>
<div>This makes the tiles <strong>way faster</strong>!</div>
<div>Plus, all of the <em>vector information</em> is still stored in the tile...</div>
<div>so you can use the <strong>same source</strong> with a <em>different style</em> easily.</div>
<div data-bodyclass='mindblown'></div>
<div><strong>This</strong> is why Mapbox Studio is <em>totally awesome</em>.</div>
<div>Let's <strong>take a look</strong>! Go ahead and <em>open up Mapbox Studio</em>.</div>
<div data-bodyclass='studio'></div>
<div><em>Sidenote:</em> The first time Lyzi opened <strong>Mapbox Studio</strong>, she said out loud to no one, <em>"Holy carps! What is all this?"</em></div>
<div>So if it looks confusing, <strong>don't worry</strong>! We'll <em>walk through it</em>.</div>
<div data-bodyclass='save'>So, don't learn this the hard way: <strong>SAVE FIRST</strong>!</div>
<div data-bodyclass='tour'><br><br><br><br>Once you've <em>saved</em>, go to the <strong>left column</strong>, Click <em>Docs</em>, then click <em>Interface tour</em>.</div>
<div data-bodyclass='style-editor'><br><br><br><br><strong>Style Editor.</strong> This is mostly what we're going to be using today.</div>
<div data-bodyclass='inspecting'><strong>Inspecting data.</strong> This is the <em>vector tile data</em> that will power our styling today.</div>
<div>It's cool to <strong>see what's available</strong>, and it's especially cool that we <em>don't</em> have to deal with <strong>data wrangling</strong>!</div>
<div data-bodyclass='cartocss'><strong>CartoCSS.</strong> CartoCSS is the language of tile styling.</div>
<div>Mapbox Studio provides a <em>full CartoCSS reference</em> that's at our fingertips. We also have <strong>fonts</strong>!</div>
<div data-bodyclass='vector-sources'><strong>Vector sources.</strong> Vector sources tell us how to write our <em>CartoCSS</em>.</div>
<div>... and since this data is from <strong>OpenStreetMap</strong> we will use the different <em>feature tags</em> for styling.</div>
<div>Click the <strong>inspector button</strong> to go back to style view.</div>
<div data-bodyclass='inspecting'></div>
<div>Let's walk through the <em>CartoCSS</em> and take a look at how this whole <strong>styling</strong> thing works.</div>
<div>Line 2: <em>language</em>.</div>
<div><pre><span>@name: '[name_en]';</span></pre></div>
<div><pre><span>'[name]'</span></pre> will do localized labels.</div>
<div>Lines 5-11: <em>selector variables</em> for reuse. Variables!</div>
<div>Line 13: <em>Map</em>. In the left column, click on <strong>Docs</strong> to see what's available for <em>Map</em>. Right now, we are just using <pre><span>background-color</span></pre></div>
<div>If it's still <em>pink</em> for you, go ahead and change the value back to <pre><span>@land</span></pre>. <strong>Save</strong> to see your changes on the map.</div>
<div><em>Actually</em>, I don't like white for land. Let's change the value of <pre><span>@land</span></pre> to <pre><span>#ddd</span></pre>.</div>
<div data-bodyclass='gray-land'><br><br><br>Ooh, <em>pretty</em>. Gray land!</div>
<div>Lines 17-24: <em>Political boundaries</em>.</div>
<div>Note the two statements in <strong>square brackets</strong>: <pre><span>[admin_level=2][maritime=0]</span></pre></div>
<div>This is saying that this style rule <strong>only</strong> applies to <pre><span>#admin</span></pre> features that both have <pre><span>[admin_level=2]</span></pre> <em>and</em> <pre><span>[maritime=0]</span></pre></div>
<div>(To do <strong>or</strong>, you would <em>separate</em> the parameters by a <strong>comma</strong>.)</div>
<div>What do these <em>parameters</em> mean? Let's find out! Click <strong>Layers</strong> in the left column and scroll to find <pre><span>#admin</span></pre>. <em>Click</em> on it.</div>
<div>So <pre><span>admin_level</span></pre> is the <strong>OSM administrative level</strong> of the boundary. <pre><span>maritime</span></pre> designates a <em>maritime</em> boundary.</div>
<div>Lines 21-23: <em>nested conditions.</em> Line 21 applies to <pre><span>#admin</span></pre> features that are <pre><span>[admin_level=2]</span></pre>, <pre><span>[maritime=0]</span></pre> but only at <pre><span>[zoom>=6]</span></pre> (zoom levels <strong>6 and higher</strong>).</div>
<div><em>Zoom in</em> on the map to <strong>zoom level 6</strong>. You can see the admin boundaries get <em>slightly wider</em>.</div>
<div>(You can see what <strong>zoom level</strong> you're at in the <em>top right</em> of the map window.)</div>
<div>Now zoom into <strong>zoom level 8</strong> -- you can <em>really</em> see the difference there!</div>
<div data-bodyclass='z6to8'></div>
<div>Line 26: <em>Places.</em> Let's talk about <strong>labels</strong>, baby!</div>
<div>Line 28 starts with a <em>zoom level condition</em>. Country labels <strong>won't</strong> be shown at zoom levels <em>less than 3</em>!</div>
<div><strong>Zoom</strong> out to zoom level 2 and watch the country names <em>disappear</em>.</div>
<div data-bodyclass='z4to2'></div>
<div><pre><span>scalerank</span></pre>: a <strong> metric</strong> for ranking how <em>important</em> a particular label is compared to <strong>other labels</strong> at that zoom.</div>
<div><strong>Interesting thing:</strong> <pre><span>scalerank</span></pre> is a piece of data that comes from <em>Natural Earth</em>.</div>
<div>The data that makes up <strong>Mapbox Streets</strong> (that we are using here in Studio) is <em>"Frankenstein data"</em> -- a mishmash of <strong>OpenStreetMap</strong> and <em>Natural Earth</em>.</div>
<div>Line 49: <pre><span>#place_label</span></pre>: like <pre><span>#country_label</span></pre> but <em>more involved</em>.</div>
<div>On <pre><span>polygon-gamma</span></pre>, Lyzi's notebook just says: <strong>"gammas - anti-aliasing. eyes - ow."</strong></div>
<div>The rest of the style rules are <em>pretty similar</em> to the ones we just covered.</div>
<div><strong>Woohoo!</strong> CartoCSS styling!</div>
<div>Now let's move on to <em>part three</em> of our evening: actually <strong>editing</strong> the styles.</div>
<div>First, <em>zoom to San Francisco</em>. You can do this with the <strong>search bar</strong> at top left.</div>
<div data-bodyclass='search-sf'></div>
<div><em>Zoom in</em> a bit so you can see the roads: <strong>zoom level 14</strong> is good.</div>
<div>What is this style missing? <em>Buildings!</em> Let's add them in.</div>
<div>Add <strong>this code</strong> to your <em>CartoCSS</em>:</div>
<div><pre><span style="display: block; padding: 10px;"><strong>#building</strong>[<strong>zoom</strong>>=14] {<br> <em>polygon-fill:</em>#eee;<br> <em>line-width:</em>0.5;<br> <em>line-color:</em>#ddd;<br>}</span></pre></div>
<div><strong>Save</strong> to see your changes.</div>
<div data-bodyclass='buildings'><em>Buildings!</em></div>
<div>But these are <strong>hard to see</strong>. Let's change our <em>land color</em> back to white by editing our <pre><span>@land</span></pre> variable.</div>
<div data-bodyclass='white-land'><strong>Ah, much better.</strong></div>
<div>Now let's add a little <em>depth</em> to our buildings at <strong>higher zooms</strong>. Add this:</div>
<div><pre><span style="display: block; padding: 10px;"><strong>#building</strong>[<strong>zoom</strong>>=16] {<br> <em>building-fill:</em>#eee;<br> <em>building-fill-opacity:</em>0.9;<br> <em>building-height:</em>4;<br>}</span></pre></div>
<div><strong>Save</strong> to see your changes.</div>
<div data-bodyclass='buildings16'></div>
<div>Pretty <em>cool</em>, right?</div>
<div><strong>Indulge me</strong> in just <em>one more</em>.</div>
<div>Let's add <strong>parks</strong> to our map! This one is <em>pretty easy</em>:</div>
<div><pre><span style="display: block; padding: 10px;"><strong>#landuse</strong>[<strong>class</strong>='park'] {<br> <em>polygon-fill:</em>#dec;<br>}</span></pre></div>
<div data-bodyclass='parks'></div>
<div><em>Play around</em> here and try adding some <strong>additional styling</strong>.</div>
<div>Remember you can <em>inspect sources</em> to find out what <strong>features</strong> you can style.</div>
<div data-bodyclass='inspecting'></div>
<div>Also feel free to <em>make a new project</em> with an <strong>existing Mapbox style</strong> to poke into <em>some other techniques</em> for map styling.</div>
<div data-bodyclass='wheatpaste'></div>
<div>Okay. <strong>Last part</strong>. Let's <em>upload</em> our styles to our <strong>Mapbox.com</strong> accounts.</div>
<div>In the <em>left column</em>, click on <strong>Settings</strong>.</div>
<div data-bodyclass='settings'></div>
<div>Give your style a <strong>name</strong> and a <em>description</em>.</div>
<div>Also be sure to <strong>restrict the zoom levels</strong> so you don't get an <em>upload error</em>.</div>
<div>Push the <strong>big blue upload button</strong>!</div>
<div><em>Click</em> on your <strong>Map ID</strong>. Now your style is <em>in your Mapbox account</em>!</div>
<div>Now you can <strong>add it to a project</strong>, use it with <a href='https://mapbox.com/mapbox.js'>Mapbox.js</a>, and <em>share</em> it with your friends!</div>
<div>What did we learn today?</div>
<div>We learned about <strong>vector tiles</strong> and how they're made!</div>
<div>We learned how to use the <strong>Mapbox Studio interface</strong>!</div>
<div>We learned about <strong>CartoCSS</strong>!</div>
<div>We made our own <strong>map styles</strong>!</div>
<div>We <strong>uploaded</strong> them to our Mapbox accounts!</div>
<div><em>HOLY CARPS, Y'ALL!</em> That's awesome!</div>
<div>You <strong>totally kicked butt</strong> today. <em>Pat yourself on the back.</em></div>
<div>Keep playing! <strong>Keep making stuff!</strong> It just gets <em>more fun</em>!</div>
<div>Thanks.</div>
<div><strong>Camille Teicheira<br>[email protected]<br>@fulgenteft</strong><br><em>Lyzi Diamond<br>[email protected]<br>@lyzidiamond</em></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47757349-1', 'lyzidiamond.com');
ga('send', 'pageview');
</script>
</body>
</html>