Minimum Ping Time

index.html

<div class = "container">
  <div class = "source">
    <h3>Source</h3>
    <select id="source" tabindex = "1">
      <option value="1" selected="selected">New York</option>
      <option value="1">Los Angeles</option>
      <option value="2">London</option>
      <option value="3">Tokyo</option>
      <option value="3">Sydney</option>
      <option value="3">Mumbai</option>
      <option value="3">São Paulo</option>
      <option value="3">Cape Town</option>
    </select>
    <div>
    <label>Distance Apart</label>
    <input type="text" id="distance" />
  </div>
  </div>
  
  <div class = "dest">
    <h3>Destination</h3>
    <select id="dest" tabindex = "2">
      <option value="1">New York</option>
      <option value="1">Los Angeles</option>
      <option value="2" selected="selected">London</option>
      <option value="3">Tokyo</option>
      <option value="3">Sydney</option>
      <option value="3">Mumbai</option>
      <option value="3">São Paulo</option>
      <option value="3">Cape Town</option>
    </select>
    <div>
    <label>Theoretically Minimum Time for a packet to get there</label>
    <input type="text" id="ping" />
  </div>
  </div>
  
  
</div>

Minimum-Ping-Time.markdown

Minimum Ping Time

Calculate minimum ping using speed of light and distance between two points. Uses Google Maps API to get coordinates and then calculate distance between pair of coordinates.

A Pen by James Barnett on CodePen.

License.

script.js

$(document).ready(function() {
  
  /* initialize for default city */
  var city1 = $("#source option:selected").text();
  var city2 = $("#dest option:selected").text();
  getCoords(city1,city2);
  
  /* update when new city is selected */
  
  $("#source").change(function() {
    city1 = $("#source option:selected").text();
    city2 = $("#dest option:selected").text();
    getCoords(city1,city2);
    
  });
  
  $("#dest").change(function() {
    city1 = $("#source option:selected").text();
    city2 = $("#dest option:selected").text();
    getCoords(city1,city2);
  });
  
  /* look up coordinates & call distance formula */
  
  function getCoords(city1,city2) {
    $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + city1 + "&sensor=true", function(data) { 
      lat1 = data.results[0].geometry.location.lat; 
      lon1 = data.results[0].geometry.location.lng;
      
      $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + city2 + "&sensor=true", function(data) { 
        lat2 = data.results[0].geometry.location.lat; 
        lon2 = data.results[0].geometry.location.lng;
        
        var distInMiles = distance(lat1,lon1,lat2,lon2);
        $("#distance").val(distInMiles + " miles");
        
        /* how long it takes data to travel at the speed of light in milliseconds*/
        var ping = distInMiles * (1.46 / 186000)  * 1000 * 2;
        ping = parseFloat(ping);
        ping = ping.toFixed(2);
        $("#ping").val(ping + " ms");
      });
    });
  } 
  
  /* calculate distance between a pair of coordinates */
  
  function distance(lat1,lon1,lat2,lon2) {
    var R = 6371; // km (change this constant to get miles)
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180; 
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
        Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;
    
    d *= 0.621371; /* convert from kilometers to miles */
    console.log(d);
    return Math.round(d);
  }
});

style.css

.container {
  width: 500px;
  height: 230px;
  margin: 20px auto;
  outline: solid;
}

.source{ 
  float: left; 
  width: 220px;
  height: 300px;
  margin-left: 30px;
}

.dest { 
  float: left; 
  width: 220px;
  margin-left: 20px;
}

label {
  display: inline-block;
  margin: 10px 0;
}

.source input { 
 margin-top: 45px;
}