station_distances.html

<!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>