3.6 Metro Web – Mapping every route… dynamically

You have successfully created a series of functions that map every single bus stop of a given bus route.  Now you want to be able to use the route list in your side panel to dynamically generate their routes when you click on them.  In other words, you want to hyperlink the route numbers so that they show up on the map.

You created the mapBusStops function call to map the bus stop locations for a given route. You have added the following call in the “initialize” function.

First, let’s make sure to delete this line from the initialize function.

This example has a hard coded “20”. What we want to do is make the “20” dynamic, meaning that the value would be defined by whatever route a user clicks on.

Let’s look back at the code that displays our bus route numbers. This is part of the “getBusRoutes” function.

Here, we are appending the “item.id” value to the stoplist DIV. So, instead of appending just the id value, we need to append an entire hyperlink so that it calls the “mapBusStops” function, and feeds it the item.id value.

Note that the href parameter is “javascript:void(0)”. This ensures that the hyperlink is inactive, and instead, it performs the onclick action provided, which is to run the “mapBusStops” function.

Now you should see that every route in your side panel is a hyperlink. Click on one of them, and it should map it’s route.

(sample code)

Leave a Reply