3.3 Metro Web – Mapping the bus stop locations

We have successfully retrieved data from Metro’s API using jQuery. Now it is time to put mapping back on the table! Since we now have a list of route numbers in our side panel, this tutorial will:

  • make each route in the side panel into hyperlink that when clicked, will display the bus stop locations for that route on the map
  • create a function called “mapBusStops()” that will do this task based on the route ID you feed it

Since we know the route ID for each bus line, we can now make a new call to the Metro API.  Take the following call as an example:

This call will return all the stops for route number 704, including their latitude and longitude coordinates.  You can change the route number in the URL to get the location of stops for any of the other 176 routes available.  For example, the following calls are for different routes:

For each call, you get the following attributes:

  • items (array) -> display_name
  • items (array) -> id
  • items (array) -> latitude
  • items (array) -> .longitude

Creating a function

Let’s create a function that uses jQuery to map these locations. First, define a global array variable that will “hold” every bus stop in a particular route. Let’s call it “busstop”. Arrays are defined with square brackets ([]).

Now let’s create the function that will make the jQuery call to the Metro API to get the bus stop locations. Make sure to put this function in the global space, and not within any other function.

This function looks very similar to our previous function “getBusRoutes“. However, it has a required parameter for “busnum“, which is the numeric ID value for the requested bus route. The busnum variable is then inserted as part of the URL call made by the .getJSON function. This ensures that this function can accept any of the 176 bus routes, and return the correct locations for each. For now, let’s use the “trace” function to ensure that it is working. There are 3 trace calls to display the name, latitude and longitude values for each item returned by the API.

In order to “test” this function, let’s add a call to it in the “initialize” function, using route 20 as our test case:

(sample code)

Open the Chrome developer tool’s console window, and check to see that the your trace variables are being displayed correctly. If so, it should look like this:

trace bus stop locations

trace bus stop locations

That’s great! We now see latitude and longitude numbers, and that is golden for the “mapper” in us. Let’s put those numbers to work and create a new function called “createStop” that maps these locations.

This function accepts four parameters:

  • “i”: This is a numeric counter variable that assigns a unique, sequential number to each value in the busstop array
  • “latitude”, “longitude”: The coordinates for each bus stop
  • “title”: The name of each bus stop

Now let’s alter the mapBusStops function to use our new createStop function to map these locations. Replace the 3 trace calls with a call to the createStop function.

You should now see a placemarker on every bus stop for route 20.

route 20 mapped

route 20 mapped

Leave a Reply