index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
 <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>

<title>geolocation</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <article>
      <p>Finding your location: <span id="status">checking...</span></p>
    </article>
<script>
function success(position) {
  var s = document.querySelector('#status');

  if (s.className == 'success') {
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
    return;
  }

  s.innerHTML = "found you! "+position.coords.latitude+","+position.coords.longitude;
  s.className = 'success';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '100%';
  mapcanvas.style.width = '100%';

  document.querySelector('article').appendChild(mapcanvas);

  // var lat = 40.721573
  // var long = -73.984044
  var lat = position.coords.latitude
  var long = position.coords.longitude
  var acc = position.coords.accuracy
  var map = L.map('mapcanvas').setView([lat, long], 12);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoidmlzaGVsYXIiLCJhIjoiY2p1dWo0NHNkMGkxZDQzbzEzc3RxZ3VqYyJ9.fFXSO7ymu5SHD5aO059Buw'
  }).addTo(map);

  const url='https://4x4x9a7f5a.execute-api.us-east-1.amazonaws.com/beta/time?route=A&lon=' + long +'&lat='+lat;

  var loc = ""
  //https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141
  const proxyurl = "https://cors-anywhere.herokuapp.com/";
  fetch(proxyurl + url)
  .then(response => response.json())
  .then(data => {
    add_user_point(lat, long, acc, map)
    for (bus of data.buses){
      var loc = bus.back_loc.split(',');
      var lat1 = loc[0]
      var long1 = loc[1]
      var device = bus.device
      var time_req = bus.expected_time
      var route = bus.route
      add_bus_point(lat1, long1, device, time_req, route, map)
    }

  })
  .catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

}

function add_user_point(lat, long, acc, map) {

	var acc_circle = L.circle([lat, long], {
	  color: 'red',
	  fillColor: '#f03',
	  fillOpacity: 0.5,
	  radius: acc
	}).addTo(map);

	var circle1 = L.circle([lat, long], {
	  color: '#B99E70',
	  opacity: 0.5,
	  weight: 8,
	  fillColor: '#f03',
	  fillOpacity: 0.2,
	  width: .5,
	  radius: 321
	}).addTo(map);

	var circle2 = L.circle([lat, long], {
	  color: '#B99E70',
	  opacity: 0.5,
	  weight: 8,
	  fillColor: '#EBED7C',
	  fillOpacity: 0.5,
	  width: .5,
	  radius: 482
	}).addTo(map);

	var circle3 = L.circle([lat, long], {
	  color: '#B99E70',
	  opacity: 0.5,
	  weight: 8,
	  fillOpacity: 0.0,
	  radius: 643
	}).addTo(map);

	var marker = L.marker([lat, long]).addTo(map);
} 

function add_bus_point(lat, long, device, time_req, route, map) {

  	// create custom icon
  	var busIcon = L.icon({
      iconUrl: 'bus.svg',
      iconSize: [25, 75], // size of the icon
      });

  	var marker = L.marker([lat, long], {icon: busIcon}).addTo(map);
  	var list = "<dl><dt><b>Bus: </b>" + device + "</dt>"
           + "<dt><b>Route: </b>" + route + "</dt></dl>"
           // + "<dt><b>Time Required: </b>" + time_req + "</dt></dl>"

	marker.bindPopup(list);
  	// marker.bindPopup("Bus - " + device + "\nRoute - " + route + "\nExpected Time - " + time_req);
	marker.on('mouseover', function (e) {
    	this.openPopup();
	});
	marker.on('mouseout', function (e) {
   		this.closePopup();
	});
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>