Code Samples


Live Bus Departures

Description

This example fetches a list of live buses for a bus stop. The webpage it produces should look something like the image below. Obviously the details will reflect the live buses when the search is performed so it won’t be exactly the same.

Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>A simple jsonp call</title>
    <script>
        function init() {
            fetchData();
        }

        function fetchData() {
            var atcocode = "490015209D";
            var url = "http://fcc.transportapi.com/v3/uk/bus/stop/" +
                    atcocode +
                    "/live.json?group=route&" +
                    "callback=buildOutput";

            console.log("Calling JSONP URL: " + url);

            //Make a JSONP request by loading it as a <script>
            var script = document.createElement('script');
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
            //(should result in a call to buildOutput)
        }

        function buildOutput(data) {
            console.log("Got Response");
            var output = "";
            if (data.error) {
                output = data.error;
            } else {
                var departures = data.departures;
                output = "Live Bus Departures:";
                for (var routes in departures) {
                    if (departures.hasOwnProperty(routes)) {
                        var onBusRoute = departures[routes];
                        for (j = 0; j < onBusRoute.length; ++j) {
                            var onBus = onBusRoute[j];
                            output += "<li>" + onBus.line + " towards " + onBus.direction + " - " + onBus.expected_departure_time + " (" + onBus.best_departure_estimate + ")";
                        }
                    }
                }
            }
            document.getElementById("transportinfo").innerHTML = output;
        }
    </script>
</head>
<body onLoad="init();">
<h3>JavaScript output:</h3>

<div id="transportinfo">...</div>


</body>
</html>

Nearby Bus Stops

Description

This example lists the bus stops near a latitude and longitude.

Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>A simple jsonp call</title>
    <script>
        function init() {
            fetchData();
        }

        function fetchData() {

            var url = "http://fcc.transportapi.com/v3/uk/bus/stops/near.json?" +
                    "lat=51.52797&" +
                    "lon=-0.13208&" +
                    "callback=buildOutput";

            console.log("Calling JSONP URL: " + url);

            //Make a JSONP request by loading it as a <script>
            var script = document.createElement('script');
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
            //(should result in a call to buildOutput) 
        }

        function buildOutput(data) {
            console.log("Got Response");
            var output = "";
            if (data.error) {
                output = data.error;
            } else {
                var stops = data.stops;
                output = "Nearby bus stops:";
                for (i = 0; i < stops.length; ++i) {
                    var onStop = stops[i];
                    output += "<li>" + onStop.name + " - " + onStop.indicator;
                }
            }
            document.getElementById("transportinfo").innerHTML = output;
        }
    </script>
</head>
<body onLoad="init();">
<h3>JavaScript output:</h3>

<div id="transportinfo">...</div>


</body>
</html>