-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathindex.html
72 lines (66 loc) · 3.54 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
<html class="elevation-widget" data-ng-app="elevation">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link rel="stylesheet" href="css/elevation.css" />
<link rel="stylesheet" href="css/mapzen-common.css" />
<script src="conf/environment.conf"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script type="text/javascript" src="../flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="../flot/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="../flot/jquery.colorhelpers.js"></script>
<script type="text/javascript" src="../flot/jquery.flot.canvas.js"></script>
<script type="text/javascript" src="../flot/jquery.flot.stack.js"></script>
</head>
<body>
<div class="container" data-ng-controller="ElevationController">
<div id="sidebar">
<div>
<img src="../routing/images/Valhalla.png" height="175" width="175" alt="Valhalla Logo">
</div>
<div id="controls">
<div id="graph" style="width: 100%; height: 300px"></div>
<div id="sampling_text">
Sampling Distance: 50
</div>
<input id="resample_distance" class="range-bar" min="10" max="100" value="50" type="range"></input>
<div class="instruction">
<div>
<button id="clearbtn" type="button" style='margin-right: 1em;'>clear</button>
<div id='permalink' style='display:inline-block;'></div>
</div>
</div>
<p>
The sampling distance controls how often other points than the ones you've clicked will be sampled.
Clicking on a displayed marker will show its height and distance along the course of input points.
</p>
<h5><a href='https://valhalla.github.io/valhalla/api/elevation/api-reference/'>Elevation API docs</a></h5>
</div>
</div>
<div id="map-container">
<div id="map"></div>
</div>
</div>
<script type="text/javascript" src="../routing/js/leaflet-hash.js"></script>
<script type="text/javascript" src="js/elevation.js"></script>
<script type="text/javascript" src="js/L.Elevation.Widget.js"></script>
<script>
//hiking map with terrain
var defaultMapLayer = L.tileLayer('https://b.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=f8f13e0070864ac3ad996f7bf7beb9af', {
attribution: 'Maps © <a href="https://www.thunderforest.com">Thunderforest</a> | Data © <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}), outdoors = L.tileLayer('https://b.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=f8f13e0070864ac3ad996f7bf7beb9af', {
attribution: 'Maps © <a href="https://www.thunderforest.com">Thunderforest</a> | Data © <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
});
</script>
<script type="text/javascript">
// Apply special root-element class for iframed demo situations
if (window.self !== window.top) {
document.documentElement.className += ' is-iframed-demo';
}
window.addEventListener("hashchange", function () { parent.postMessage(window.location.hash, "*") });
</script>
</body>
</html>