Metro Example

New API - LUKE MASON

by Alex Azuero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<label>Bus Stop Station: </label><select class="form-control" id="bStops"> 
    <option value="" disabled selected>Select a Bus Stop</option>
</select>

<!-- This div should contain a live updating copy of the selected station -->
<table class="table table-striped" id="statusBusTable">
    
</table>

CSS

#status {
    margin-top:2em;
}

JavaScript

var apiKey = '11070c26c3224c15bfef321427708beb';
//Radius (meters)
var bStops='https://api.wmata.com/Bus.svc/json/jStops?Lat=39.061&Lon=-77.121&Radius=500&api_key=11070c26c3224c15bfef321427708beb';
var nextBus;
var selectBus = $('#bStops');
var statusBusTable = $('#statusBusTable');


$('#bStops').change(function() {
 getStationStatus();
 clearTimeout(nextBus);
});


//get the list
$.ajax({
    url: bStops,
    // tell jQuery we're expecting JSONP
    dataType: "jsonp", 
    // work with the response
    success: function( response ) {
        if(typeof(response !== 'undefined') ){
            var selectTemp = selectBus.clone();
            $.each(response.Stops,function( index, value ) {
               selectTemp.append(
                  $("<option></option>")
                 .attr("value",value.StopID)  //Gets the stopId
                 .text(value.Name)
                 ); 
            });
            selectBus.html(selectTemp.html()).chosen();
        }
    }
});

//get the selected station status
var getStationStatus = function(){
        var bStopSel = selectBus.val();
        //alert(bStopSel);
        var statusNextBus = 'https://api.wmata.com/NextBusService.svc/json/jPredictions?StopID='+bStopSel+'&api_key='+apiKey;
        //alert(status);
    $.ajax({
    url: statusNextBus,
    // tell jQuery we're expecting JSONP
    dataType: "jsonp", 
    // work with the response
    success: function( response ) {
    //console.log(response.Predictions);
    //console.log(response);
        if(typeof(response !== 'undefined') ){
            statusTemp = $('<table><tr><th>Route</th><th>Direction</th><th>Arrival</th></table>');
            $.each(response.Predictions,function( index, value ) {
               console.log(value);
               statusTemp.append('<tr><td> '+value.RouteID+'</td><td> '+value.DirectionText+'</td><td> '+value.Minutes+' </td></tr>');
            });
            statusBusTable.html( statusTemp.html());
        }
        nextBus =...