notes/GPS Distance Calculator-8q3u2f8S.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>GPS Distance Calculator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
//:::  Passed to function:                                                    :::
//:::    lat1, lon1 = Latitude and Longitude of point 1 (in decimal degrees)  :::
//:::    lat2, lon2 = Latitude and Longitude of point 2 (in decimal degrees)  :::
//:::    unit = the unit you desire for results                               :::
//:::           where: 'M' is statute miles (default)                         :::
//:::                  'K' is kilometers                                      :::
//:::                  'N' is nautical miles  
//:::                  'F' is feet
    function getDis(lat1, lon1, lat2, lon2, unit) {
      var radlat1 = Math.PI * lat1/180
      var radlat2 = Math.PI * lat2/180
      var radlon1 = Math.PI * lon1/180
      var radlon2 = Math.PI * lon2/180
      var theta = lon1-lon2
      var radtheta = Math.PI * theta/180
      var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
      dist = Math.acos(dist)
      dist = dist * 180/Math.PI
      dist = dist * 60 * 1.1515
      if (unit=="K") { dist = dist * 1.609344 }
      if (unit=="N") { dist = dist * 0.8684 }
      if (unit=="F") { dist = dist * 5280 }      
      return dist
    }

    $(document).ready(function(){
      $("#calc").click(function(){
        $("#list").html("");
        var gps1 = $("#loc1").val().split(",");
        var gps2 = $("#loc2").val().split(",");
        var miles = getDis(gps1[0],gps1[1],gps2[0],gps2[1]);
        $("#list").append('<li class="list-group-item">Miles: ' + miles + '</li>');

        var kilometers = getDis(gps1[0],gps1[1],gps2[0],gps2[1],"K");
        $("#list").append('<li class="list-group-item">Kilometers: ' + kilometers + '</li>');

        var feet = getDis(gps1[0],gps1[1],gps2[0],gps2[1],"F");
        $("#list").append('<li class="list-group-item">Feet: ' + feet + '</li>');
      });
    });

  </script>
</head>
<body>
<div class="container">
  <h2 id="title">Distance Calculator</h2>
  <label for="loc1">GPS#1:</label>
  <input type="text" class="form-control" id="loc1" placeholder="26.239289, -81.583377">
  <label for="loc2">GPS#2:</label>
  <input type="text" class="form-control" id="loc2" placeholder="26.239289, -81.583366">
  <br>
  <button id="calc" type="button" class="btn btn-primary btn-block">Calculate</button>
  <hr>
  <ul class="list-group" id="list">
  </ul>
</div>

</body>
</html>
syntax highlighted by Code2HTML, v. 0.9.1