-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (247 loc) · 8.94 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
<!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:-5px;
background:#000;
background-size:100%;
color:#fff;
margin:0;
padding:0;
font-weight:bold;
}
h1, h2, h3, p {
margin:0;
}
em, a {
font-style:normal;
color:#8dbd0c;
}
strong {
color:#34d0e7;
}
a {
background: #34d0e7;
color:#000;
text-decoration:none;
}
img {
width:100%;
}
div {
cursor:pointer;
cursor:hand;
position:absolute;
top:0px;
left:0px;
padding:75px;
line-height:97%;
}
div.center {
text-align:center;
}
div.imageText {
text-shadow:0px 0px 5px rgba(0,0,0,0.2);
}
</style><script type='text/javascript'>
window.onload = function() {
var s = document.getElementsByTagName('div'), ti;
if (!s) return;
var big = { current: 0, forward: fwd, reverse: rev, go: go, length: s.length };
window.big = big;
function resize() {
var w = window.innerWidth, h = window.innerHeight, e = s[big.current];
e.style.fontSize = h + 'px';
for (var i = h - 2; e.offsetWidth > w || e.offsetHeight > h; i -= 2) {
e.style.fontSize = i + 'px';
}
e.style.marginTop = ((h - e.offsetHeight) / 2) + 'px';
}
function go(n) {
big.current = n;
var e = s[n], t = parseInt(e.dataset.timeToNext || 0, 10);
document.body.className = e.dataset.bodyclass || '';
for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
e.style.display = 'inline';
if (e.firstChild && e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url("' + e.firstChild.src + '")';
e.firstChild.style.display = 'none';
if ('classList' in e) e.classList.add('imageText');
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
if (ti !== undefined) window.clearInterval(ti);
if (t > 0) ti = window.setTimeout(fwd, (t * 1000));
resize();
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
document.onclick = function() { go(++big.current % (s.length)); };
function fwd() { go(Math.min(s.length - 1, ++big.current)); }
function rev() { go(Math.max(0, --big.current)); }
document.onkeydown = function(e) {
if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
if (e.which === 37 || e.which === 33 || e.which === 38) rev();
};
document.ontouchstart = function(e) {
var x0 = e.changedTouches[0].pageX;
document.ontouchend = function(e2) {
var x1 = e2.changedTouches[0].pageX;
if (x1 - x0 < 0) fwd();
if (x1 - x0 > 0) rev();
};
};
function parse_hash() {
return Math.max(Math.min(s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) big.current = parse_hash() || big.current;
window.onhashchange = function() {
var c = parse_hash();
if (c !== big.current) go(c);
};
window.onresize = resize;
go(big.current);
};
</script></head><body>
<div>
<strong>Map Projections:</strong> What <em>you</em> need to know!
</div>
<div><em>PLEASE</em> interrupt if you have questions!</div>
<div>Go to <a href="http://mappingmashups.github.io/map-projections">http:// mappingmashups.github.io /map-projections</a> to follow along.</div>
<div>(Use <strong>left</strong> and <strong>right</strong> arrows to navigate. Links <a href="#4">look like this</a>.)</div>
</div><div>
I'm gonna have to simplify some things.
</div><div>
This will make real geographers cry.
</div><div>
<img src="images/global-and-local-ellipsoids.gif">
Remember <a href="http://lyzidiamond.com/geodesy-pt-1/">datums?</a>
</div><div>
<img src="images/true-places.jpg">
<a href="http://www.jeremywood.net/meridians.html">(GPS drawing by Jeremy Wood)</a>
</div><div>
Projections: what do they do?
</div>
<div style="color: black"><img src="http://concretewheels.com/maps/maps_20150201mandarinorangeglobe001C_jamie-newton.jpeg">
Stretch the curved earth (or an <a href="http://concretewheels.com/maps/maps_2015_map_mandarin.htm">orange</a>) onto a flat plane
</div><div>
Think of it as projecting light through a transparent globe onto a piece of paper
</div>
<div><img src="images/projection-types.png">
</div><div>
Really it's a mathematical formula that does the same thing...
</div><div>
What can we do with this piece of paper?
</div><div>
Keep it flat, curl it into a tube, twist it into a cone...
</div>
<div><img src="images/qgis-projection-families.png">
</div><div>
These simple concepts have fancy-sounding names
</div><div>
Plane: <em>"Azimuthal"</em>
</div><div>
Tube: <em>"Cylindrical"</em>
</div><div>
Cone: <em>"Conic"</em> (whew, at least that was easy)
</div><div>
If we vary the placement of the <em>light</em> and the <em>paper</em> we get different effects
</div><div>
...we can optimize to prevent certain <em>distortions</em>, but we can't prevent them all!
</div>
<div>Let's start with something <em>familiar</em>.</div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/f/f4/Mercator_projection_SW.jpg">Hi, Mercator!</div>
<div>The <a href="http://en.wikipedia.org/wiki/Mercator_projection">Mercator projection</a> was defined by cartographer <strong>Gerardus Mercator</strong> in <em>1569</em>.</div>
<div>It became <em>popular</em> because of its strength in <strong>nautical navigation</strong>.</div>
<div>Every projection has <strong>distortion</strong>, but <em>Mercator</em> is a particularly <strong>acute offender.</strong></div>
<div>Most notably, Mercator distorts <em>relative size</em> of land masses towards the poles.</div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/8/87/Tissot_mercator.png"><br><br><br>Stretchy!</div>
</div><div>
So, about those different kinds of distortion...
</div><div>
<em>Conformal</em> preserves <strong>angles</strong> & (small) <strong>shapes</strong>
</div><div>
<em>Equivalent</em> is <strong>equal area</strong>
</div><div>
<em>Equidistant</em> preserves (some) <strong>distances</strong>
</div><div>
Look at a ton of examples <a href="http://www.jasondavies.com/maps/transition/">here</a>
</div>
<div style="color: black"><img src="http://www.mapthematics.com/Downloads/Images/Cornucopia33.jpg">
Many weird ones
</div><div><img src="images/Utm-zones.svg">
<a href="https://en.wikipedia.org/wiki/Universal_Transverse_Mercator_coordinate_system">UTM</a> (Universal Transverse Mercator)
</div><div>
Something else you need to know:
</div><div>
your data might be <em>projected</em> already!
</div><div>
But what does that mean?
</div><div>
Projections have units... maybe <em>lat lon</em>, maybe <strong>meters</strong>, maybe SOMETHING ELSE CRAZY
</div><div>
Let's open up <em>QGIS</em> and look at the units.
</div>
<div><img src="images/QGIS-latlon-world.png">
</div>
<div><img src="images/QGIS-mercator-sf.png">
</div><div>
Sometimes you'll get a <em>shapefile</em> without its <strong>.prj file</strong> WHICH IS THE WORST.
</div><div>
Try <a href="http://projfinder.com">projfinder.com</a> if you have no idea what your projection is.
</div><div>
If you have <em>GeoJSON</em> and it doesn't have a CRS, it's almost always in <strong>WGS84 lat lon.</strong>
</div>
<div><img src="images/metcalf-terrible.png">
</div><div>
How do we refer to projections?
</div><div>
<a href="http://en.wikipedia.org/wiki/SRID">SRID</a> (Spatial Reference System Identifier)
</div><div>
Usually these refer to integer <em>EPSG</em> codes
</div><div>
<a href="http://epsg.io">epsg.io</a>
</div><div>
What are some popular ones?
</div><div>
(These are the ones you should get tattooed on the back of your hand)
</div>
<div><img src="images/cooper-4326-compressed.jpg">
</div><div>
<a href="http://epsg.io/4326">EPSG: 4326</a> unprojected lat/lon in <em>WGS84</em> ("geographic")
</div><div>
<a href="http://epsg.io/4326">EPSG: 3857</a> Web Mercator / Pseudo Mercator (formerly <em>900913</em>)
</div><div>
Some of my personal favorites:
</div><div><img src="images/usa-2163.png">
<a href="http://epsg.io/2163">EPSG: 2163</a> US National Atlas Equal Area / (Lambert Azimuthal)
</div><div><img src="images/california-3310.png">
<a href="http://epsg.io/3310">EPSG: 3310</a> California Albers Equal Area
</div><div>
Does anyone else in the room have a favorite?
</div><div>
So you want to try some projections? Here's how you do it in...
</div><div>
...QGIS
</div>
<div><img src="images/QGIS-latlon-world.png">
</div><div>
...CartoDB
</div>
<div><img src="images/cartodb-2163.png">
</div><div>
...TileMill
</div>
<div><img src="images/tilemill-before.png">
</div>
<div><img src="images/project-before.png">
</div>
<div><img src="images/project-after.png">
</div>
<div><img src="images/tilemill-after.png">
</div><div>
D3... well... another time.
</div>
</body>
</html>