Distance Finder

by Max B.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<div id="container">
  <div id="form">
  <h2>Latitude:</h2>
    <br>
    <input type="text" id="lat" value="0">
    <h2>Longitude:</h2>
    <br>
    <input type="text" id="lon" value="0">
   </div>
   <h4>- or -</h4>
   <button type="button" id="locate" class="btn waves-effect waves-light">Locate Me!</button>
   <hr>
   <button type="button" id="submit" class="btn waves-effect waves-light">Distance to: HackerSpace</button>
 </div>
 <hr class="hr-dashed">
   <h3>Result</h3>
   <p id="result"></p>

CSS

body {
  text-align: center;
  background-color: #292929;
}

hr {
  margin-left: 6rem;
  margin-right: 6rem;
  border-style: solid;
  border-width: 3px;
  border-color: #00acc1;
  margin-top: 15px;
  margin-bottom: 15px;
}

.hr-dashed {
  border-style: dashed;
  border-width: 1px;
  border-color: #696969;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
}

#form {
  background-color: #FFCC6E;
  box-shadow: 6px 6px 2px #1F1F1F;
}

#container {
  margin: 4rem;
  margin-bottom: 0px;
  margin-top: 10px;
}

p {
  color: white;
  height: 5rem;
  background-color: #353535;
}

h3 {
  color: #ee6e73;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 2rem;
}

h2 {
  background-color: #FFB834;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
  margin: 0;
}

input[type="text"] {
  background-color: #FFE4B2;
}

#locate {
  background-color: #FFB834;
}

h4 {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 0px;
  font-size: 12px;
  color: white;
}

JavaScript

var destination = "https://raw.githubusercontent.com/fossasia/fossasia-communities/master/Singapore/HackerspaceSG"

////////////////////////////////////////
////////////////////////////////////////

var destLat = 0;
var destLon = 0;
var destName = "";

/* https://www.wikiwand.com/en/Haversine_formula */
function calcDist (lat1, lon1, lat2, lon2) {
	var radius = 6371000; // earth's radius
  var r_lat1 = lat1 * (Math.PI / 180);
  var r_lat2 = lat2 * (Math.PI / 180);
  var r_deltaLat = (lat2 - lat1) * (Math.PI / 180);
  var r_deltaLon = (lon2 - lon1) * (Math.PI / 180);

  var a = Math.sin(r_deltaLat/2) * Math.sin(r_deltaLat/2) +
          Math.cos(r_lat1) * Math.cos(r_lat2) *
          Math.sin(r_deltaLon/2) * Math.sin(r_deltaLon/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  return Math.ceil(radius * c);
}

function error (msg) {
	$("#result").text(msg);
}

function submit () {
	if (Number.isNaN(parseFloat($("#lat").val()))) { error("Latitude must be a number!"); return; }
  if (Number.isNaN(parseFloat($("#lon").val()))) { error("Longitude must be a number!"); return; }
  
  var lat = parseFloat($("#lat").val());
  var lon = parseFloat($("#lon").val());
  var distance = calcDist(lat, lon, destLat, destLon);
  
	$("#result").html("<b>Distance to " + destName + ": </b><br/>" + distance + " Kilometers");
}

// Gets the destinations from JSON specified.
function getDest () {
  $.getJSON(destination, function( data ) {
		destLat = data.location.lat;
    destLon = data.location.lon;
    destName = data.name;
    $("#submit").text ("Distance to: " + destName);
	});
}

function locate () {
	if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(pos) {
        	$("#lat").val(pos.coords.latitude);
          $("#lon").val(pos.coords.longitude);
        });
    } else { 
        $("#result").html("Geolocation is not supported by this browser.");
	}
}

getDest ();
$("#submit").click(submit);
$("#locate").click(locate);