ZJONSSON/index.html

## index.html
<!DOCTYPE HTML>
<style>
  body {font-family: Verdana, Geneva, sans-serif;font-size:14px;}
  th {font-weight:bold;text-align:left;}
  td,th {padding-left:5px;}
  </style>
<body>
<script>
var data,pos,limit=10;

var notice = document.createElement("div");
notice.innerHTML = "Please Click 'Allow' for Geolocation";
document.body.appendChild(notice);

function distance(start,end) {
  var dLat = Math.abs(end.lat - start.lat) * Math.PI/180;
  var dlng = Math.abs(end.lng - start.lng) * Math.PI/180;
  var lat1 = end.lat * Math.PI/180;
  var lng1 = end.lng * Math.PI/180;
  var lat2 = start.lat * Math.PI/180;
  var lng2 = start.lng * Math.PI/180;
  var d1 = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dlng/2) * Math.sin(dlng/2) * Math.cos(lat1) * Math.cos(lat2);
  return (2 * Math.atan2(Math.sqrt(d1), Math.sqrt(1-d1))) * 6371;
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(yeslocation,nolocation);
} else nolocation();

function yeslocation(d) {
  pos = {lat:d.coords.latitude,lng:d.coords.longitude};
  render();
}

function nolocation() {
  limit = Infinity;
  pos = {lat:40.751492,lng:-73.977988};
  notice.innerHTML = "Location not found, using GCT";
  render();
}

function cb(d) { data = d; render();}

function render() {
  if (!data || !pos) return;
  if (limit !== Infinity) notice.innerHTML="";
  var table = document.createElement('table');
  var header = document.createElement("TR");
  table.appendChild(header);
  header.innerHTML = "<th>Dist</th><th>B</th><th>S</th><th>Location</th>";
  document.body.appendChild(table);

  data.map(function(d) {
      d.lat = d.lat /1000000;
      d.lng = d.lng /1000000;
      d.distance = distance(pos,d);
      return d;
    })
    .sort(function(a,b) { return a.distance -b.distance;})
    .slice(0,limit)
    .forEach(function(d) {
      var div = document.createElement('tr');
      div.innerHTML = "<td>"+[Math.round(d.distance*100)/100,d.bikes,d.free,d.name].join("</td><td>")+"</td>";
      table.appendChild(div);
    });
}
</script>
<script src="http://api.citybik.es/citibikenyc.json?callback=cb"></script>
</body>
	<!DOCTYPE HTML>
	<style>
	body {font-family: Verdana, Geneva, sans-serif;font-size:14px;}
	th {font-weight:bold;text-align:left;}
	td,th {padding-left:5px;}
	</style>
	<body>
	<script>
	var data,pos,limit=10;

	var notice = document.createElement("div");
	notice.innerHTML = "Please Click 'Allow' for Geolocation";
	document.body.appendChild(notice);

	function distance(start,end) {
	var dLat = Math.abs(end.lat - start.lat) * Math.PI/180;
	var dlng = Math.abs(end.lng - start.lng) * Math.PI/180;
	var lat1 = end.lat * Math.PI/180;
	var lng1 = end.lng * Math.PI/180;
	var lat2 = start.lat * Math.PI/180;
	var lng2 = start.lng * Math.PI/180;
	var d1 = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dlng/2) * Math.sin(dlng/2) * Math.cos(lat1) * Math.cos(lat2);
	return (2 * Math.atan2(Math.sqrt(d1), Math.sqrt(1-d1))) * 6371;
	}

	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(yeslocation,nolocation);
	} else nolocation();

	function yeslocation(d) {
	pos = {lat:d.coords.latitude,lng:d.coords.longitude};
	render();
	}

	function nolocation() {
	limit = Infinity;
	pos = {lat:40.751492,lng:-73.977988};
	notice.innerHTML = "Location not found, using GCT";
	render();
	}

	function cb(d) { data = d; render();}

	function render() {
	if (!data \|\| !pos) return;
	if (limit !== Infinity) notice.innerHTML="";
	var table = document.createElement('table');
	var header = document.createElement("TR");
	table.appendChild(header);
	header.innerHTML = "<th>Dist</th><th>B</th><th>S</th><th>Location</th>";
	document.body.appendChild(table);

	data.map(function(d) {
	d.lat = d.lat /1000000;
	d.lng = d.lng /1000000;
	d.distance = distance(pos,d);
	return d;
	})
	.sort(function(a,b) { return a.distance -b.distance;})
	.slice(0,limit)
	.forEach(function(d) {
	var div = document.createElement('tr');
	div.innerHTML = "<td>"+[Math.round(d.distance*100)/100,d.bikes,d.free,d.name].join("</td><td>")+"</td>";
	table.appendChild(div);
	});
	}
	</script>
	<script src="http://api.citybik.es/citibikenyc.json?callback=cb"></script>
	</body>