pickup.html

<script>
const next_event_lat = 39.2840112;  
const next_event_lon = -76.6216646;  
    
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge:Infinity
};
  
function myLogger(string) {
  var node = document.createElement("LI");
  var textnode = document.createTextNode(string);
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}  
  
function success(pos) {
  var crd = pos.coords;
  myLogger('Your current position is:');
  myLogger(`Latitude : ${crd.latitude}`);
  myLogger(`Longitude: ${crd.longitude}`);
  myLogger(`More or less ${crd.accuracy} meters.`);
  myLogger('Distance to Event');
  myLogger('Oriole Park at Camden Yards: ' + getDistanceFromLatLonInKm(next_event_lat,next_event_lon,crd.latitude,crd.longitude).toFixed(1) + ' km'); 
}

function error(err) {
  myLogger(`ERROR(${err.code}): ${err.message}`);
}

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

    
navigator.geolocation.getCurrentPosition(success, error, options);  

    
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
 // x.innerHTML = "Latitude: " + position.coords.latitude +  "<br>Longitude: " + position.coords.longitude;
 var y = document.getElementById("distance");
 y.innerHTML = 'Oriole Park at Camden Yards: ' + getDistanceFromLatLonInKm(next_event_lat,next_event_lon,position.coords.latitude,position.coords.longitude).toFixed(1) + ' km'; 
}
</script>





<style>
 @media (min-width:1025px) { .container { width: 50% !important;} }
</style>
<center>
<div class="container">
  <center>    
    <div class="row" style='text-align:left;'>
      <ul id="myList">

      </ul>

    <button onclick="getLocation()">Check Location to Claim</button>
    <h1 id="distance"></h1>
    <p id="demo"></p>
    

        
         </div>
  </center>
</div>