Skip to content

Instantly share code, notes, and snippets.

@rposbo
Created September 15, 2011 21:43
Show Gist options
  • Save rposbo/1220571 to your computer and use it in GitHub Desktop.
Save rposbo/1220571 to your computer and use it in GitHub Desktop.
@rposbo : UNOFFICIAL Mobile TFL Bus Countdown Board
<html>
<head>
<meta name="viewport" content="width=320" />
<title>@rposbo : UNOFFICIAL Mobile TFL Bus Countdown Board</title>
<style>
body {font-family:calibri; font-size:12px; width:auto; max-width:100%;}
#disclaimer {font-size:10px;}
#disclaimer img {float:left;}
#busListing {display:block;}
a:visited {color:blue;}
ul {list-style-type: none;padding: 0;margin: 0;cursor:auto;}
li{background-image: url(bus.jpg);background-repeat: no-repeat;background-position: 0 .4em;padding: 5px 0 5px 20px;margin: .4em 0;}
.time {margin-right:1em;}
</style>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.2rc1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// get lat long
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (position) {
getStopListingForLocation(position.coords.latitude,position.coords.longitude);
});
} else {
alert('could not get your location');
}
});
function getStopListingForLocation(lat, lng){
var swLat, swLng, neLat, neLng;
swLat = lat - 0.01;
swLng = lng - 0.01;
neLat = lat + 0.01;
neLng = lng + 0.01;
var endpoint = 'http://countdown.tfl.gov.uk/markers/swLat/' + swLat + '/swLng/' + swLng + '/neLat/' + neLat + '/neLng/' + neLng + '/';
$.ajax({
type: 'POST',
url: 'Proxy.asmx/getMeTheDataFrom',
data: "{'here':'"+endpoint+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) { displayStopListing(data.d); }
});
}
function displayStopListing(stopListingData){
var data = $.parseJSON(stopListingData);
$.each(data.markers, function(i,item){
$("<li/>")
.text(item.name + ' (stop ' + item.stopIndicator + ') to ' + item.towards)
.attr("onclick", "getBusListingForStop(" + item.id + ")")
.attr("class", "stopListing")
.attr("id", item.id)
.appendTo("#stopListing");
});
}
function getBusListingForStop(stopId){
var endpoint = 'http://countdown.tfl.gov.uk/stopBoard/' + stopId + '/';
$("#" + stopId).attr("onclick","");
$.ajax({
type: 'POST',
url: 'Proxy.asmx/getMeTheDataFrom',
data: "{'here':'"+endpoint+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) { displayBusListing(data.d, stopId); }
});
}
function displayBusListing(busListingData, stopId){
var data = $.parseJSON(busListingData);
$("<h2 />").text("Buses Due").appendTo("#" + stopId);
$.each(data.arrivals, function(i,item){
$("<span/>")
.text(item.estimatedWait)
.attr("class", "busListing time")
.appendTo("#" + stopId);
$("<span/>")
.text(item.routeName + ' to ' + item.destination)
.attr("class", "busListing info")
.appendTo("#" + stopId);
$("<br/>")
.appendTo("#" + stopId);
});
}
</script>
</head>
<body>
<div id="hello">Using the extremely handy TFL bus countdown thingy, but made for mobiles by <a href="http://twitter.com/rposbo">@rposbo</a></div>
<div id="busListing"></div>
<h1>Bus Stops Near You (tap one)</h1>
<ul id="stopListing"></ul>
<div id="disclaimer"> All of the data is coming from the TFL website. I am not a TFL employee and this site is in no way endorsed by TFL. The functionality of this site is in no way guaranteed and should TFL change their site at all, this one will break! This page may or may not work on your device, and it curently relies on you device's geolocation (location sharing) functionality. I'm just making something I think might be handy for me, and you can now have a go too!</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment