Skip to content

Commit c0ea777

Browse files
maptastikmaptastik
committed
final slides
1 parent d754d95 commit c0ea777

File tree

2 files changed

+154
-7
lines changed

2 files changed

+154
-7
lines changed

‎slides/03_cartoCSS-tilemill/index.html‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<title>02_GitHub-Data</title>
3+
<title>03_cartoCSS-tilemill</title>
44
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
55
<link href='../big.css' rel='stylesheet' type='text/css' />
66
<style>
@@ -84,7 +84,9 @@
8484
</head>
8585
<body>
8686
<div>Part 3: CartoCSS &amp; TileMill</div>
87-
<div><h2>What?</h2>
87+
<div>What are we doing</div>
88+
<div>Making a map!</div>
89+
<div><h2>What really?</h2>
8890
<ol>
8991
<li>Style a map</li>
9092
<li>Get, create, &amp; edit data for the web</li>
@@ -100,6 +102,7 @@ <h2>Goals:</h2>
100102
<li>Basic understanding of styling with cartoCSS</li>
101103
<li>Be able to create interactive map tiles in TileMill </li>
102104
<li>Add interactive tile map on top of basemap with mapbox.js</li>
105+
<li>Create a map with Leaflet and GeoJSON</li>
103106
</ul>
104107
</div>
105108
<div>What is CartoCSS?</div>
@@ -127,12 +130,8 @@ <h2>Goals:</h2>
127130
<div data-bodyclass="carto-ref3"></div>
128131
<div data-bodyclass="carto-ref4"></div>
129132
<div data-bodyclass="carto-ref5"></div>
130-
<div>Read on a painter's model</div>
131-
<div class="center-text"><p><em>top</em><br>&darr;<br><em>bottom</em></p></div>
132-
<div>You can stack styles for the same layer</div>
133-
<div data-bodyclass="carto-multi"></div>
134133
<div>What is TileMill?</div>
135-
<div>Map design program</div>
134+
<div>Map <em>design</em> program</div>
136135
<div>Can handle a variety of geographic data formats</div>
137136
<div>
138137
<h2>Vector</h2>
@@ -170,8 +169,38 @@ <h4>Exports to a variety of formats</h4>
170169
</ul>
171170
</div>
172171
<div>Activity 1: Make an interactive choropleth map with TileMill</div>
172+
173173
<div>Activity 2: Put our choropleth on top of a basemap</div>
174+
<div>Data: <code>./data/prepared/<em>lucasCo_hungarian_tracts.geojson</em></code></div>
175+
<div>Set up a simple server in python</div>
176+
<div>
177+
<ol>
178+
<li>open command prompt
179+
<ul>
180+
<li>Windows: cmd</li>
181+
<li>Mac: Terminal</li>
182+
</ul>
183+
</li>
184+
<li>Change directory to where you're storing files <br><span style="font-size: x-large;">(If you're following along, this is where you downloaded the os-webmap-workshop repo to)</span></li>
185+
<li><code>python -m SimpleHTTPServer</code></li>
186+
<li>Browser: <code>127.00.1:8000</code></li>
187+
</ol>
188+
</div>
189+
<div>Steps:<br><code>.maps/steps/lucasCo_hungarian-steps.html</code></div>
174190
<div>Activity 3: Remake the whole map using geoJSON &amp; Leaflet</div>
191+
<div>Data:<br><code>./data/prepared/<em>lucasCo_hungarian_tracts.geojson</em></code></div>
192+
193+
<div>What did we do?</div>
194+
<div>
195+
<ul>
196+
<li>Learned about <em>CartoCSS &amp; TileMill</em></li>
197+
<li>Used TileMill to make an <em>interactive choropleth</em> map and <em>export it to Mapbox</em></li>
198+
<li>Added our interactive choropleth map <em>on top of a tile basemap with MapboxJS</em></li>
199+
<li>Created a choropleth map <em>using GeoJSON data and Leaflet</em></li>
200+
</ul>
201+
</div>
202+
203+
175204

176205
</body>
177206
</html>

‎slides/04_closing/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<html>
2+
<head>
3+
<title>03_cartoCSS-tilemill</title>
4+
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
5+
<link href='../big.css' rel='stylesheet' type='text/css' />
6+
<style>
7+
.carto-multi {
8+
background-image: url(./images/carto-multi.png);
9+
background-repeat: no-repeat;
10+
background-position: center 1px;
11+
background-size:60%;
12+
}
13+
.carto-ref1 {
14+
background-image: url(./images/carto-ref1.png);
15+
background-repeat: no-repeat;
16+
background-position: center 1px;
17+
background-size:100%;
18+
}
19+
.carto-ref2 {
20+
background-image: url(./images/carto-ref2.png);
21+
background-repeat: no-repeat;
22+
background-position: center 1px;
23+
background-size:100%;
24+
}
25+
.carto-ref3 {
26+
background-image: url(./images/carto-ref3.png);
27+
background-repeat: no-repeat;
28+
background-position: center 1px;
29+
background-size:100%;
30+
}
31+
.carto-ref4 {
32+
background-image: url(./images/carto-ref4.png);
33+
background-repeat: no-repeat;
34+
background-position: center 1px;
35+
background-size:100%;
36+
}
37+
.carto-ref5 {
38+
background-image: url(./images/carto-ref5.png);
39+
background-repeat: no-repeat;
40+
background-position: center 1px;
41+
background-size:100%;
42+
}
43+
.mb-studio1 {
44+
background-image: url(./images/mb-studio1.png);
45+
background-repeat: no-repeat;
46+
background-position: center 1px;
47+
background-size:100%;
48+
}
49+
50+
/*Text Style*/
51+
body {
52+
font-family: 'Open Sans', 'Helvetica', sans-serif;
53+
letter-spacing: -1px;
54+
55+
}
56+
a {
57+
background-color: transparent;
58+
color: #34d0e7;
59+
}
60+
ul, ol {
61+
margin-left: 10%;
62+
line-height: 100%;
63+
64+
}
65+
66+
.black-text {
67+
color: #000000;
68+
}
69+
.purple-text {
70+
color: #8e44ad;
71+
}
72+
.center-text {
73+
text-align: center;
74+
}
75+
.imageTextLight {
76+
text-shadow:0px 0px 7.5px rgba(34,34,34,0.95);
77+
}
78+
code {
79+
font-family: "courier new";
80+
font-size: 64;
81+
}
82+
</style>
83+
<script src='../big.js'></script>
84+
</head>
85+
<body>
86+
<div>Part 4: Closing Remarks</div>
87+
<div>What have we covered or done today?</div>
88+
<div>How web maps <em>work</em></div>
89+
<div><em>GeoJSON</em> is an important data format for web mapping</div>
90+
<div>How to use <em>GitHub</em> to store and access data</div>
91+
<div>How to <em>get</em> and <em>transform data</em> for web maps</div>
92+
<div>Different ways of <em>creating</em> and <em>styling</em> a map for the web</div>
93+
<div>What next?</div>
94+
<div>Coding:
95+
<ul>
96+
<li><a href="http://www.codecademy.com/" target="_blank">Codecademy</a></li>
97+
<li><a href="http://www.codeavengers.com/" target="_blank">Code Avengers</a></li>
98+
<li><a href="https://www.codeschool.com/" target="_blank">Code School</a></li>
99+
</ul>
100+
</div>
101+
<div>Web mapping:
102+
<ul>
103+
<li><a href="http://leafletjs.com/examples.html" target="_blank">Leaflet Examples</a></li>
104+
<li><a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/" target="_blank">MapboxJS Examples</a></li>
105+
<li><a href="http://ideditor.com/" target="_blank">OSM iD Editor</a></li>
106+
<li><a href="http://maptime.io/" target="_blank">Join/Start a local maptime chapter!!!</a></li>
107+
</ul>
108+
</div>
109+
<div>
110+
Twitter...
111+
</div>
112+
<div>Questions, comments, anything?<br>email: [email protected]<br>twitter: @rmcooper4</div>
113+
114+
115+
116+
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)