-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (184 loc) · 7.45 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
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Chango&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>topoMap</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCxmwq7svGGXSeaXHsxfW27LDaXytc3nBY&libraries=panoramio,geometry"></script>
<script src="topomap.js"></script>
<link href="topomap.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="splash">
<div>
<h1 class="logo">topoMap</h1>
<h5>tools for measuring the Earth</h5>
<p>
Use these tools to measure the size and shape of geomorphic landforms.
</p>
<p>
<b>Instructions:</b> Use the map to find interesting landforms.
Click on the map to add markers. The graph will show the topographic
profile of the line that you trace. The 'Path Information' window
will tell you the length of the black and orange lines, the area
of the region that they enclose, and the slope of the two lines.
By tracing along meandering streams, you can measure the sinuosity
of the stream.
</p>
<p>
Leave a note on the GitHub <a href="https://github.com/mroberge/topomap">project page</a> if you have any suggestions for improvements!
</p>
<p>
-Marty
</p>
<button onclick="hide('splash')">
OK
</button>
<p id="acknowledgement">
topoMap © 2016 Martin Roberge
</p>
</div>
</div>
<div id="instructions" style="display:none">
<div>
<h1 class="logo">topoMap</h1>
<h5>tools for measuring the Earth</h5>
<ul>
<li>
Click on the map to draw new points.
</li>
<li>
The topographic profile of the black path is plotted at the bottom of the page.
</li>
<li>
Distance, area, and slope are displayed at the bottom right of the page.
</li>
<li>
Area is calculated for the polygon enclosed by the dotted line.
</li>
<li>
Place your cursor over the profile graph to see your position on the map.
</li>
<li>
Click on the graph to show the distance along the profile and the elevation of the point.
</li>
</ul>
<p>
Leave a note on the GitHub <a href="https://github.com/mroberge/topomap">project page</a> if you have any suggestions for improvements!
</p>
<p>
-Marty
</p>
<button onclick="hide('instructions')">
OK
</button>
</div>
</div>
<h1 class="logo">topoMap</h1>
<h5>tools for measuring the Earth</h5>
<div id="map_canvas" >
map
</div>
<div id="tools_div">
<span><a href="#" onclick="show('instructions'); return false">Instructions</a></span>
<span><label>
<select name="selectPlace" id="selectPlace" onchange="loadExample(value)">
<option value="default" disabled="disabled" selected="selected" style="display:none">Profile of an interesting place</option>
<option value="1" >Waipio Valley</option>
<option value="2" >Mount Everest</option>
<option value="3">Challenger Deep</option>
<option value="4">Death Valley</option>
<option value="5">Grand Canyon</option>
<option value="6">Uluru</option>
</select>
</label></span>
<span><label>Address:
<input type="text" id="address" size="15" onkeypress="return addressKeyHandler(event)"/>
</label></span>
<span>
<input type="button" value="Clear points" onclick="reset()"/>
</span>
</div>
<div id="chart_div" onmouseout="clearMouseMarker()">
chart
</div>
<div id="text_div">
<h3>Path Information</h3>
<div>
<abbr title='the distance along the black line'>Path length</abbr>: <span id="pathLength">1</span> meters
</div>
<div>
<abbr title='the distance along the dotted orange line'>Direct length</abbr>: <span id= "directLength">2</span> meters
</div>
<div>
<abbr title='the distance along the perimeter of the enclosed area'>Closed path length</abbr>: <span id="closedLength">3</span> m
<br>
</div>
<div>
<abbr title='the area inside the black and orange lines.'>Area</abbr>: <span id="pathArea">4</span> sq. km
<br>
</div>
<div>
<abbr title='the height above sea level for the first point'>Start elevation</abbr>: <span id="startElev">5</span> meters A.M.S.L
</div>
<div>
<abbr title='the height above sea level for the last point'>End elevation</abbr>: <span id="endElev">6</span> meters A.M.S.L
</div>
<div>
<abbr title='the height above sea level for the highest point'>Highest elevation</abbr>: <span id="maxElev">6.1</span> meters A.M.S.L
</div>
<div>
<abbr title='the height above sea level for the lowest point'>Lowest elevation</abbr>: <span id="minElev">6.2</span> meters A.M.S.L
</div>
<div>
<abbr title='the difference in height between the first point and the last point'>Relief</abbr>: <span id="relief">7</span> meters
<br>
</div>
<div>
<abbr title='the difference in height between the first point and the last point, divided by the length of the black line'>Path slope</abbr>: <span id="pathSlope">8.0001</span>
</div>
<div>
<abbr title='the difference in height between the first point and the last point, divided by the length of the dotted orange line'>Direct slope</abbr>: <span id= "directSlope">9.0001</span>
<br>
</div>
<div>
<abbr title='the length of the black line divided by the length of the dotted orange line'>Sinuosity</abbr>: <span id="sinuosity">10.01</span>
</div>
</div>
<div id="bottom-text">
<p>
<strong>Warning:</strong> I've had difficulties using this page in Internet Explorer. If it doesn't work, try using FireFox or Chrome!
</p>
<ul>
<li>
Add points by clicking on the map or entering an address
</li>
<li>
Hover over the graph to see the map position of the cursor.
</li>
<li>
Click on the graph to find the distance and height of the point.
</li>
<li>
<a href="#" onclick="show('instructions'); return false">More instructions</a>
</li>
<li>
Visit the <a href="https://github.com/mroberge/topomap/">topoMap repository</a> on GitHub!
</li>
<li>
Try my Google Earth tour of interesting <a href="GeomorphologySites.kmz">geomorphic sites</a>!
</li>
</ul>
</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-73178522-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>