-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
291 lines (286 loc) · 18.2 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
<!DOCTYPE html><html><head><title>Big</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>
.rotation {
background-image: url(http://www.lpi.usra.edu/education/skytellers/polaris/images/fig2.jpg);
background-repeat: repeat;
}
.geology {
background-image: url(http://classconnection.s3.amazonaws.com/372/flashcards/2470372/jpg/conver1355583815850.jpg);
background-repeat: no-repeat;
background-position: center 25px;
background-color: #fff;
color: #111;
}
.geoid {
background-image: url(http://principles.ou.edu/earth_figure_gravity/geoid/lumpy_earth_2.jpg);
background-repeat: no-repeat;
background-position: center 25px;
background-color: #fff;
color: #111;
}
.ellipsoid {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/OblateSpheroid.PNG);
background-repeat: no-repeat;
background-position: center 25px;
}
.math {
font-family: serif;
font-style: italic;
}
.deviation {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Geoid_height_red_blue.png/640px-Geoid_height_red_blue.png);
background-repeat: no-repeat;
background-position: center 25px;
background-color: #fff;
}
.cartesian {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0e/Cartesian-coordinate-system.svg);
background-repeat: no-repeat;
background-position: center 25px;
background-color: #fff;
color: #111;
}
.hill {
background-image: url(http://s3.amazonaws.com/rapgenius/1359520868_solsbury_hill.jpg);
background-repeat: no-repeat;
background-position: center 25px;
}
.gauss {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/9/9b/Carl_Friedrich_Gauss.jpg);
background-repeat: no-repeat;
background-position: center 25px;
}
.sphere {
background-image: url(http://4.bp.blogspot.com/-eMp-4cSSqFc/T3PrFjLlPVI/AAAAAAAAAmQ/QiRBZM0JToI/s1600/world1.png);
background-repeat: no-repeat;
background-position: center 25px;
}
.comparison {
background-image: url(http://alienspacesciencenews.files.wordpress.com/2013/10/an-example-of-the-spatial-relationship-between-a-local-datum-a-global-datum-and-the-geoid-is-represented-in-the-following-figure-wgs84.gif);
background-position: center 25px;
background-repeat: no-repeat;
background-color: #fff;
color: #111;
}
.orange-peel {
background-image: url(http://www.just-health.net/images/10416273/image001.jpg);
background-position: center 25px;
background-repeat: no-repeat;
background-color: #fff;
color: #111;
}
.mercator {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f4/Mercator_projection_SW.jpg);
background-position: center 1px;
background-repeat: no-repeat;
background-size: 100%;
color: #111;
}
.tissot {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/87/Tissot_mercator.png);
background-position: center 25px;
background-repeat: no-repeat;
background-color: #fff;
color: #111;
}
.peters {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/34/Gall%E2%80%93Peters_projection_SW.jpg);
background-position: center 1px;
background-repeat: no-repeat;
background-size: 100%;
color:#111;
}
.na-projections {
background-image: url(./images/na-projections.png);
background-position: center 1px;
background-repeat: no-repeat;
background-size: 100%;
background-color: #fff;
}
.cat {
background-image: url(http://mapprinter.files.wordpress.com/2014/01/0123141347c-edit.jpg);
background-position: center 1px;
background-repeat: no-repeat;
background-size: 1200px;
color: purple;
}
.transverse {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b9/Usgs_map_traverse_mercator.PNG);
background-position: center 25px;
background-repeat: no-repeat;
}
.puppy {
background-image: url(http://www.worldbook.com/images/tanzania_map.jpg);
background-position: center 25px;
background-repeat: no-repeat;
background-color: #fff;
}
.giant-globe {
background-image: url(http://3.bp.blogspot.com/-jZfUzbHylsE/UqcYpCh2ArI/AAAAAAAAAsM/CCM9R5iQGDA/s1600/UAE-car-museum-globe-caravan.jpg);
background-position: center 25px;
background-repeat:no-repeat;
}
.unroll {
background-image: url(http://visual.merriam-webster.com/images/earth/geography/cartography/map-projections.jpg);
background-position: center 25px;
background-repeat: no-repeat;
background-color: #fff;
}
.head-guy {
background-image: url(http://i.kinja-img.com/gawker-media/image/upload/s--AVyIdHuS--/19c8a2694lgeejpg.jpg);
background-position: center 25px;
background-repeat: no-repeat;
background-color: #fff;
}
</style>
<script src='big.js'></script>
</head><body>
<div>The Wild World of <strong>Geodesy!</strong></div>
<div><em>PLEASE</em> interrupt if you have questions!</div>
<div>Go to <a href="http://lyzidiamond.com/geodesy">http://lyzidiamond.com /geodesy</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>What is <em>geodesy</em>?</div>
<div><a href="http://en.wikipedia.org/wiki/Geodesy">Wikipedia</a> says: <strong>the scientific discipline that deals with the <em>measurement</em> and <em>representation</em> of the Earth, including its gravitational field, in a three-dimensional time-varying space.</strong></div>
<div><em>:-/</em></div>
<div>Let's <strong>break it down</strong>.</div>
<div><em>We can all agree:</em> the Earth is <strong>three-dimensional</strong>.</div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/6/6f/Earth_Eastern_Hemisphere.jpg">Yes. :)</div>
<div>But the Earth is <em>not</em> a sphere. It is its <strong>own fancy shape</strong>.</div>
<div>We <em>measure</em> and <em>describe</em> that shape in <strong>a few ways.</strong></div>
<div>First: the <em>geoid.</em></div>
<div data-bodyclass="geoid">"Lumpy Earth"</div>
<div>The <strong>geoid</strong> is the shape of the Earth without <em>land masses, tides,</em> and <em>wind.</em> It assumes that all locations have the <strong>same gravitational potential.</strong></div>
<div><a href="http://en.wikipedia.org/wiki/Carl_Friedrich_Gauss">Gauss</a> described it as <strong>"the mathematical figure of the Earth."</strong></div>
<div>But the <em>lack of uniformity</em> makes it hard to use as a <strong>reference for measurement.</strong></div>
<div>Enter the <em>reference ellipsoid</em>.</div>
<div data-bodyclass="ellipsoid">or <br><br>"oblate ellipsoid."</div>
<div>The <strong>reference ellipsoid</strong> is <em>mathematically defined:</em> you can read more about that <a href="http://en.wikipedia.org/wiki/Reference_ellipsoid">here</a>.</div>
<div>The <strong>important</strong> part is that the <em>short (polar) axis</em> is roughly aligned with the <em>rotation axis</em> of the Earth.</div>
<div data-bodyclass="ellipsoid"></div>
<div><strong>Why</strong> is it important to have a <em>mathematically defined</em> shape for the Earth?</div>
<div>Because we, as <strong>cartographers</strong> are engaged in <em>measuring</em> the Earth. We need to know <strong>what goes where.</strong></div>
<div><em>Hooray!</em> Now we get to talk about <strong>coordinate systems</strong> and <strong>datums!</strong></div>
<div>So we now know that the <em>reference ellipsoid</em> for Earth is a <strong>significant approximation</strong> of the <em>geoid</em>, which is itself a <strong>significant approximation</strong> of the <em>real shape</em> of the Earth.</div>
<div data-bodyclass="deviation"></div>
<div>But the <em>reference ellipsoid</em> is <strong>super helpful</strong> to us when it comes to knowing <em>where things are</em> in <strong>relation</strong> to each other.</div>
<div>It enables the creation of a <strong>geodetic datum</strong>: a <em>coordinate system</em> and set of <em>reference points</em> that are used to locate <strong>places on the Earth.</strong></div>
<div>A <strong>datum</strong> provides <em>starting points</em> for measurement.</div>
<div><em>Horizontal</em> datums measure positions on the <strong>Earth's surface.</strong> <em>Vertical</em> datums measure <strong>elevations</strong>.</div>
<div>Let's <em>walk through</em> an example.</div>
<div>You and I are standing just to the left of <strong>this hill.</strong></div>
<div data-bodyclass="hill"></div>
<div><em>You</em> are walking up the hill. <em>I</em> am walking next to the hill.</div>
<div>We each take <strong>fifteen</strong> steps forward.</div>
<div data-bodyclass="hill"></div>
<div>If you look at the <em>photo</em>, I am closer to the <strong>right</strong> side of the photo than you are.</div>
<div>We tend to think about <em>measuring space</em> in a <strong>Cartesian</strong> fashion.</div>
<div data-bodyclass="cartesian"><br><br><br>Cartesian coordinate system</div>
<div>But <em>remember:</em> the Earth is <strong>three-dimensional</strong> and <strong>lumpy,</strong> even in the <em>reference ellipsoid.</em></div>
<div>If you looked at our <em>relative positions</em> on and next to the hill from <strong>above</strong>, it will seem as though I <em>traveled further.</em></div>
<div>But I <em>didn't.</em></div>
<div>A <strong>datum</strong> takes this into account and makes a <em>coordinate system</em> that (roughly) reflects it.</div>
<div data-bodyclass="comparison"><br><br>Not perfect, but at least not flat.</div>
<div>Notice in that image where it says <strong>Local Datum?</strong></div>
<div data-bodyclass="comparison"></div>
<div>There are <strong>many different</strong> datums that refer to <strong>many different</strong> reference ellipsoids.</div>
<div>For example, a datum may <strong>define a location</strong> for the <em>Equator</em>, but that location may be <strong>different</strong> for a <em>different datum.</em></div>
<div><em>Why so many?</em></div>
<div>Because, again, of the <strong>irregular shape</strong> of the Earth.</div>
<div>Some <em>ellipsoids</em> are better for <strong>certain areas</strong>.</div>
<div data-bodyclass="comparison"></div>
<div>The <a href="http://geodesy.noaa.gov">National Geodetic Survey</a> manages the US's <em>national datums</em>: <a href="http://en.wikipedia.org/wiki/NAD83#North_American_Datum_of_1983">NAD83</a> and <a href="http://en.wikipedia.org/wiki/NAVD88">NAVD88</a>.</div>
<div>One <em>widely-used</em> datum is <a href="http://en.wikipedia.org/wiki/World_Geodetic_System">WGS84</a>, or the <strong>World Geodetic System of 1984.</strong></div>
<div><em>WGS84</em> is a <strong>vertical</strong> and <strong>horizontal</strong> datum.</div>
<div>This is the <strong>datum</strong> that is used by the <em>Global Positioning System (GPS)</em>.</div>
<div>Going back to the <strong>hill</strong> example...</div>
<div data-bodyclass="hill"></div>
<div>If I used my <em>GPS</em> to get to a <strong>point</strong> on the other side of the hill, it would give me <strong>different</strong> directions if I was going <em>over</em> the hill than if I was going <em>beside</em> the hill.</div>
<div>Using <strong>WGS84</strong>, it knows the relationship between <em>distance on the earth</em> and <strong>relative location</strong>.</div>
<div>But even if there <em>wasn't</em> a hill, this would still be <strong>necessary.</strong> Why?</div>
<div>Because the Earth is <em>three-dimensional.</em></div>
<div><strong>Cartesian distance</strong> becomes <em>flawed</em> on a <strong>curved surface.</strong></div>
<div>And <em>our job</em> as cartographers is to take this <strong>three-dimensional</strong> thing and represent it on a <strong>two-dimensional</strong> plane.</div>
<div>Because a <strong>map</strong> fits in our pockets <em>much more easily</em> than a <strong>globe.</strong></div>
<div>And imagine how <em>big</em> that globe would have to be to be <strong>useful</strong> in a city!</div>
<div data-bodyclass="giant-globe"></div>
<div>Which brings in <em>another</em> important part of <strong>geodesy:</strong></div>
<div><em>PROJECTIONS!</em></div>
<div>But first...</div>
<div data-bodyclass="puppy"></div>
<div>While datums allow us to <strong>understand locations</strong> in reference to each other on a <em>three-dimensional plane</em> ...</div>
<div>... <strong>projections</strong> are all about how we <em>show</em> those locations on <strong>maps.</strong></div>
<div>Let's talk about <strong>Gauss</strong>, baby.</div>
<div data-bodyclass="gauss"></div>
<div>Gauss figured out that a <em>sphere</em> is one of the <strong>only</strong> shapes that cannot be <em>dismantled into a plane.</em></div>
<div data-bodyclass="sphere"></div>
<div>Think about it like <strong>peeling an orange.</strong></div>
<div data-bodyclass="orange-peel"><br><br>Omnomnom.</div>
<div>It is <em>impossible</em> to take that orange peel and <strong>lay it flat</strong> on the table.</div>
<div>So to display the <em>Earth</em> on a <strong>page</strong>, we need to <em>stretch</em> it.</div>
<div><strong>Map projections</strong> simply <em>set the rules</em> about <strong>how</strong> the map is to be <em>stretched</em> or <em>distorted</em>.</div>
<div><strong>Map projections</strong> distort in <em>four</em> ways:</div>
<div>Size.</div>
<div>Shape.</div>
<div>Position.</div>
<div>Direction.</div>
<div data-bodyclass="na-projections"></div>
<div data-bodyclass="head-guy"></div>
<div>Let's start with something <em>familiar</em>.</div>
<div data-bodyclass="mercator">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 data-bodyclass="tissot"><br><br><br>Stretchy!</div>
<div>Another common projection is the <strong>Gall-Peters projection</strong>.</div>
<div data-bodyclass="peters"></div>
<div><em>Gall-Peters</em> preserves <strong>relative size</strong> of land masses but distorts <strong>shape.</strong></div>
<div>There are an <strong>infinite</strong> number of map projections.</div>
<div>Head to <a href="http://www.jasondavies.com/maps/transition/">jasondavies.com /maps/transition</a></div>
<div>Which <strong>projections</strong> do you <em>like best?</em> Why?</div>
<div data-bodyclass="cat">MerCATor!</div>
<div>To create a <strong>projection</strong>, you need to <em>select an Earth shape</em> (like the <strong>reference ellipsoid</strong>) and then determine a <em>transformation</em> of points to a <strong>Cartesian</strong> plane.</div>
<div data-bodyclass="cartesian"></div>
<div>Those <strong>transformations</strong> relate to a <em>projection surface</em>.</div>
<div data-bodyclass="transverse"><br><br><br>Transverse Mercator</div>
<div><strong>Projection surfaces</strong> include <em>cylinders, cones, planes, spheres,</em> and <em>ellipsoids.</em></div>
<div>Think about it like you're <strong>wrapping</strong> the globe with one of these <em>surfaces</em>, then <strong>unrolling</strong> it onto a <em>plane.</em></div>
<div data-bodyclass="unroll"></div>
<div>In addition to the <em>projection surface</em>, you also have to decide on <strong>aspect</strong>.</div>
<div><strong>Aspect</strong> is how the surface is <em>oriented</em> on the globe.</div>
<div data-bodyclass="transverse"></div>
<div>In addition to classifying projections by <strong>surface</strong>, we can classify them by <em>distortion</em>.</div>
<div><strong>Azimuthal projections</strong> preserve relative <em>direction</em>.</div>
<div><strong>Conformal projections</strong> preserve <em>local shape</em>.</div>
<div><strong>Equal-area projections</strong> preserve <em>area.</em></div>
<div><strong>Equidistant projections</strong> preserve <em>distance.</em></div>
<div>I am going to <strong>stop</strong> here because my head is about to <em>explode</em> with geometry.</div>
<div>In the <strong>next installment</strong> of <em>geodesy at #maptime</em>, we will talk about <a href="http://docs.openlayers.org/library/spherical_mercator.html">Spherical Mercator</a> and web mapping.</div>
<div>We'll talk about <em>great circles</em> and <em>rhumb lines</em> and the <em>common problems</em> in <strong>geodesy</strong>.</div>
<div><em>Someday...</em></div>
<div>But for now:</div>
<div><em>What did we learn today?</em></div>
<div>We learned about <strong>the science of geodesy!</strong></div>
<div>We learned about <strong>geoids and reference ellipsoids!</strong></div>
<div>We learned about <strong>datums and coordinate systems!</strong></div>
<div>We learned about <strong>Gauss!</strong></div>
<div data-bodyclass="gauss"></div>
<div>We learned about <strong>map projections and distortions!</strong></div>
<div>We learned that <strong>this is a HARD PROBLEM.</strong>.</div>
<div>Pat yourself on the back! <em>You are a champion!!!</em></div>
<div>There is <strong>so much</strong> I didn't cover. A <em>quick Google search</em> will yield <strong>so much more.</strong></div>
<div>Keep learning! <em>It just gets more fun!</em></div>
<div>Extra credit: the <strong>National Geodetic Survey</strong> has some <a href="https://www.youtube.com/watch?v=kXTHaMY3cVk&list=PLsyDl_aqUTdFY6eKURmiCBBk-mP4R10Dx&index=2">great videos</a> on <em>understanding datums.</em></div>
<div>Thanks!</div>
<div>My name is Lyzi! I am on Twitter at <a href="http://twitter.com/lyzidiamond">@lyzidiamond</a>! MaptimeOAK is on Twitter at <a href="http://twitter.com/maptimeoak">@MaptimeOAK!</a> Holler at us!</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>