/
station_distances.html
171 lines (147 loc) · 7.24 KB
/
station_distances.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HiSPARC - jSparc - Station distances</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" media="all" href="styles/leaflet.css">
<link rel="stylesheet" media="all" href="styles/common.css">
<link rel="stylesheet" media="all" href="styles/map_controls.css">
<link rel="stylesheet" media="all" href="styles/station_distances.css">
<script src="scripts/jquery-3.7.1.min.js"></script>
<script src="scripts/leaflet.js"></script>
<script src="scripts/leaflet.hisparc.js"></script>
<script src="jquery.jsparc.js"></script>
<script>
"use strict";
var jsparc, map, station_layer;
function radians(degrees) {
/* Convert degrees to radians
*/
return degrees * (Math.PI / 180);}
function degrees(radians) {
/* Convert radians to degrees
*/
return radians * (180 / Math.PI);}
function calculate_bearing(station1, station2) {
/* Calculate bearing between two stations in meters
from: http://www.movable-type.co.uk/scripts/latlong.html
*/
var latitude1 = radians(station1.latitude),
latitude2 = radians(station2.latitude),
d_longitude = radians(station2.longitude - station1.longitude);
var y = Math.sin(d_longitude) * Math.cos(latitude2),
x = Math.cos(latitude1) * Math.sin(latitude2) -
Math.sin(latitude1) * Math.cos(latitude2) * Math.cos(d_longitude);
var bearing = Math.atan2(y, x);
return (degrees(bearing) + 360) % 360;
}
function calculate_distance(station1, station2) {
/* Calculate great-circle distance between two stations in meters
from: http://www.movable-type.co.uk/scripts/latlong.html
*/
var R = 6371000, // Radius of Earth in meters
latitude1 = radians(station1.latitude),
latitude2 = radians(station2.latitude),
d_latitude = radians(station2.latitude - station1.latitude),
d_longitude = radians(station2.longitude - station1.longitude),
a = Math.pow(Math.sin(d_latitude / 2), 2) + Math.cos(latitude1) *
Math.cos(latitude2) * Math.pow(Math.sin(d_longitude / 2), 2),
c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c;
}
function update_distances(station1, station2) {
/* Update the map to show the given stations.
*/
var c = 0.3, // speed of light in m / ns
distance = calculate_distance(station1, station2),
light_distance = distance / c;
$('#distance').text(distance.toFixed(0));
$('#light_distance').text(light_distance.toFixed(0));
}
function update_map(station1, station2) {
/* Update the map to show the given stations.
*/
station_layer.clearLayers();
add_station_marker(station1);
add_station_marker(station2);
line_between_stations(station1, station2);
// Zoom to fit stations
map.fitBounds(station_layer.getBounds(), {padding: boundsPadding});
}
function line_between_stations(station1, station2) {
/* Draw connecting line between station markers on map.
*/
var line = L.polyline([L.latLng(station1.latitude, station1.longitude),
L.latLng(station2.latitude, station2.longitude)],
{color: statusColors.down, opacity: 0.4});
station_layer.addLayer(line);
}
function add_station_marker(station) {
/* Add station marker to map.
*/
var station_marker = L.circleMarker(L.latLng(station.latitude, station.longitude),
$.extend({}, pointStyle, {color: statusColors.down}));
station_marker.bindTooltip(station.number + " - " + station.name, {direction: 'top'});
station_layer.addLayer(station_marker);
}
function get_info_and_update() {
var station_info_urls = [jsparc.api_station_info($('#station_choice_1 select').val()),
jsparc.api_station_info($('#station_choice_2 select').val())];
var results = jsparc.get_multiple_json(station_info_urls);
results.fail(function(s1, s2) {
$('#error').show();});
results.done(function(s1, s2) {
$('#error').hide();
update_map(s1[0], s2[0]);
update_distances(s1[0], s2[0]);});
}
$(document).ready(function() {
// Load jSparc library
jsparc = $.jsparc();
// Make the two station lists
jsparc.make_station_select($('#station_choice_1')).done(function(){
jsparc.make_station_select($('#station_choice_2')).done(function(){
get_info_and_update();});
});
// Update map when a new station is selected
$('#station_choice').on('change', 'select', function() {
get_info_and_update();
});
// Create the map
map = createMap("map");
station_layer = L.featureGroup();
station_layer.addTo(map);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header"><div id="pageHeader"></div></div>
<div id="doc_link">
<a href="https://docs.hisparc.nl/jsparc/station_distances.html" target="jsparc_doc">➔ Documentation</a>
<a href="index.html">➔ jSparc</a>
</div>
<div id="menu">
<p id="station_choice">
Distance from
<span id="station_choice_1"><select><option>Loading stations..</option></select></span>
to
<span id="station_choice_2"><select><option>Loading stations..</option></select></span>
is:<br>
<span id="distance">...</span> m as the crow flies or <span id="light_distance">...</span> ns as the light travels.
</p>
</div>
<div id="error">
<p>
Error: failed to get coordinates for one of the selected stations.<br>
Perhaps the station has not yet submitted its GPS location.
Try selecting other stations.
</p>
</div>
<div id="map_container">
<div id="map"></div>
</div>
</div>
</body>
</html>