Final Project Report
Interactive TTC Bus Routing Using Google Maps

Prepared by:Feroz Alam

Abstract

TTC does not provide any interactive tools that can help us to get the required bus route from any subway stations. This fact brings to us a new idea to develop a tool that can be measured as the initial thrust for solving this limitation. This project report describes step-by-step how we implemented our idea using Google Maps Javascript APIs.

Introduction

Our goal was to introduce a tool with TTC map for the TTC commuters that includes developing the techniques needed to provide the interactive way of finding out available bus routes from any subway stations or intersections given on the TTC map. We wanted to make TTC map more useful and effective so that anybody can interactively find their required bus routes using online TTC map.

Motivation of the Work

There is no interactive way to find out bus routes from any subway stations or intersections using TTC map available in their web site. TTC web site only provides list of buses if you click on their ‘Bus Route’ option. And if you click on any bus it will show you the layout of route map. But it does not show you the real map. For long time we were experiencing the problem to find out available bus routes from any TTC subway stations using their web site and this problem ultimately bring us with this idea.

Related Works

Recently Toronto TTC introduced a new tool 'Trip Planner' in their web site for the bus/subway commuter to find the most direct route between two Toronto addresses, intersections, or points of interest. This option plots the selected route on the real map. But there is no interactive way to select the start and end location for this option. We found another work available in the web site http://crazedmonkey.com/ttcgooglemap/. They made the TTC map interactive to some extend. They only plotted markers on the subway stations and if you click on any marker it will only provide you information with station name and address.

Implementation of Our Project

On the basis of our initial investigation, following technologies and tools are being considered, and we did some research and study on these as well. o Google Maps Javascript API - The Google Maps Javascript API provides lots of services to embed Google Maps in web pages. The API provides a number of utilities for manipulating maps and adding content to the map through a variety of services, allowing you to create robust maps applications on your website. o Google Web Toolkit - is an open source set of tools that allows web developers to create and maintain complex JavaScript front-end applications in Java. It provides plug-in for eclipse which allows to add mapping functionality to the application. o MapWinGIS ActiveX - This is an programming object that can be added to a form in Visual Basic, Delphi, or other languages that support ActiveX, providing a built-in GIS data map. It needs shape file of the map. We used Google Maps JavaScript API with HTML for customizing the map as we found it very easy to understand and learn. It is surprisingly easy and manageable for incorporating Google maps to web page with a few lines of codes using JavaScript and Google Maps API. The Google Maps API is free service which is available for any web site. It has a wide array of APIs that allows embedding robust functionality of Google maps for customizing map in many ways. As a part of implementing TTC Bus Routing using Google Maps, we accomplished our development work in the following steps: o Incorporating Google Maps to Web Page o Lay Outing Subway and RT Lines o Adding Markers o Adding Markers with TTC Logo o Adding Interactive Markers o Highlighting Respective Bus Route
Incorporating Google Maps to Web Page We had to register with Google Maps to get the Google Maps API key to continue our development work. Following is the key that we used for our map.
ABQIAAAAvW3gnPUtAyVA-4sTeDoprxQC_4M0dJmUvJ-ibKGjJG8wtDj2qBQ1UfkoqObmIHJBelA4e3jqkvFC4g
Incorporating Google Maps to HTML page is very simple and easy which can be done writing few lines of code. GMap API is being used in our project in order to create the map. The API reference details is given below from the Google Maps API site.
Class GMap
This is the central class in the API. Everything else is auxiliary.
Constructor
|Constructor |Description |
|GMap(container:Node, opts?:GMapOptions) |Creates a new map inside of the given HTML container, which is typically a DIV element. |
| |If no set of map types is given in the optional argument opts.mapTypes, the default set |
| |G_DEFAULT_MAP_TYPES is used. If no size is given in the optional argument opts.size, then|
| |the size of the container is used. If opts.size is given, then the container element of |
| |the map is resized accordingly. See class GMapOptions. Note: a Map needs to be centered |
| |before it can be used. You should immediately call GMap\.setCenter() to initialize a map |
| |created with this constructor. |
|Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap |

Here is the code for creating map and subsequently incorporating it to web page.

Visualization Project

var map = new GMap(document.getElementById("map")); var point = new google.maps.LatLng(43.679418,-79.396477); map.centerAndZoom(point, 4);

And the output of the above code is

[pic]

Lay Outing Subway and RT Lines API GPolyline has been used along with another API GLatLng to draw three subway lines that include Bloor-Danforth, Yonge-University and Sheppard lines, and Scarborough RT line as well. We had to find out latitudes and longitudes of all the co-ordinates along all the way of three subway lines and one RT line to highlight those lines with different transparent color. We used latitude and longitude finder to find out these co-ordinates. The references of these GPolyline and GLatLng are given below available in the Google web site.
Class GPolyline
This is a map overlay that draws a polyline on the map, using the vector drawing facilities of the browser if they are available, or an image overlay from Google servers otherwise.
Constructor
|Constructor |Description |
|GPolyline(latlngs:GLatLng[], color?:String, |Creates a polyline from an array of vertices. The color is given as a string |
|weight?:Number, opacity?:Number, |that contains the color in hexadecimal numeric HTML style, i.e. #RRGGBB. The |
|opts?:GPolylineOptions) |weight is the width of the line in pixels. The opacity is given as a number |
| |between 0 and 1. The line will be antialiased and semitransparent. |
|Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GPolyline |

Here is the part of the code for this specific section

-----------------------------------------------------

map.addControl(new GLargeMapControl());
// for Sheppard Line var routeCoordinates = [new GLatLng(43.761657,-79.410489), new GLatLng(43.766941,-79.387465), new GLatLng(43.775091,-79.347124) ]; var route = new GPolyline(routeCoordinates, "#7D1B7E", 10,0.75, polyOptions); map.addOverlay(route); // for Yonge-University line var routeCoordinates = [new GLatLng(43.779832,-79.415574), new GLatLng(43.769265,-79.412956),
------------------------------------------

// for Bloor line var routeCoordinates = [new GLatLng(43.73253,-79.26507), new GLatLng(43.730918,-79.267302), new GLatLng(43.724281,-79.273567),
------------------------------------------

// for RT var routeCoordinates = [new GLatLng(43.732158,-79.265456), new GLatLng(43.732158,-79.265456), new GLatLng(43.733957,-79.263482), new GLatLng(43.733957,-79.263482), new GLatLng(43.768986,-79.276271), new GLatLng(43.769699,-79.275112), new GLatLng(43.771187,-79.268203), new GLatLng(43.774735,-79.257216), new GLatLng(43.776052,-79.252174) ]; var route = new GPolyline(routeCoordinates, "#1569C7", 10,0.75, polyOptions); map.addOverlay(route); The above code also includes a control for zooming map. The output of the above code is
[pic]

Adding Markers Overlaying markers on different locations on map is the first step of making the map interactive. In our project, we added markers on most of the subway locations using GMarker API as our target was to provide the bus routes from subway stations. We also added one marker on an intersection. Reference of the GMarker API is given below.
Class GMarker
A GMarker marks a position on the map. It implements the GOverlay interface and thus is added to the map using the GMap.addOverlay() method.
A marker object has a latlng, which is the geographical position where the marker is anchored on the map, and an icon. If the icon is not set in the constructor, the default icon G_DEFAULT_ICON is used.
After it is added to a map, the info window of that map can be opened through the marker. The marker object will fire mouse events and infowindow events. Constructor
|Constructor |Description |
|GMarker(latlng:GLatLng, icon?:GIcon, |Creates a marker at the passed latlng of either GPoint or GLatLng with icon or the |
|inert?:Boolean) |G_DEFAULT_ICON. If the inert flag is true, then the marker is not clickable and will |
| |not fire any events. |
|GMarker(latlng:GLatLng, |Creates a marker at the latlng with options specified in GMarkerOptions. By default |
|opts?:GMarkerOptions) |markers are clickable & have the default icon G_DEFAULT_ICON. |
|Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker |

The code for adding markers on the map is given below

-----------------------------------------------------
-----------------------------------------------------
var point = new google.maps.LatLng(43.744158,-79.406691); var marker = new GMarker(point); map.addOverlay(marker); [pic]

Adding Markers with TTC Logo In the previous section ‘Adding Markers’, we can see that the output of the code show default marker as there was no icon set in the constructor (please the GMarker API reference in the previous section). We customized our markers using TTC logo as icon and some other APIs including GIcon, GSize and GPoint. GSize has been used to assign the size of the TTC logo and shadow of the logo, GPoint for anchoring the logo. References are given below:
Class GIcon
An icon specifies the images used to display a GMarker on the map. For browser compatibility reasons, specifying an icon is actually quite complex. Note that you can use the default Maps icon G_DEFAULT_ICON if you don't want to specify your own..
Constructor
|Constructor |Description |
|GIcon(copy?:GIcon, image?:String) |Creates a new icon object. If another icon is given in the optional copy argument, its |
| |properties are copied, otherwise they are left empty. The optional argument image sets |
| |the value of the image property. |
|Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GIcon |

Class GSize
A GSize is the size in pixels of a rectangular area of the map. The size object has two parameters, width and height. Width is a difference in the x-coordinate; height is a difference in the y-coordinate, of points.
Constructor
|Constructor |Description |
|GSize(width:Number, height:Number) |Creates a GSize object |
|Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GSize |

Class GPoint
A GPoint represents a point on the map by its pixel coordinates. Notice that in v2, it doesn't represent a point on the earth by its geographical coordinates anymore. Geographical coordinates are now represented by GLatLng.
In the Google Maps coordinate system, the x coordinate increases to the right, and the y coordinate increases downwards, though you may use GPoint coordinates however you wish.
Constructor
|Constructor |Description |
|GPoint(x:Number, y:Number) |Creates a GPoint object |
|Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GPoint |

Here is the part of the code for adding marker with TTC logo:

-----------------------------------------------------
-----------------------------------------------------
var point = new google.maps.LatLng(43.744158,-79.406691); var myIcon = new GIcon(G_DEFAULT_ICON); myIcon.image = "TTC_logo.png"; myIcon.iconSize = new GSize(40, 22); myIcon.iconAnchor = new GPoint(18, 22); myIcon.shadowSize = new GSize(50, 22); markerOptions = { icon:myIcon }; var marker = new GMarker(point, markerOptions); map.addOverlay(marker); The output of the above code is
[pic]

Adding Interactive Markers To make the overlaid markers interactive we had to use GEvent namespace for implementing click event. In the event of click, marker object opens an window using InfowWindow event (please see the reference of GMarker API in ‘Adding Markers’ section). namespace GEvent This namespace contains functions that you use to register event handlers, both for custom events and for DOM events, and to fire custom events. All the events defined by this API are custom events that are internally fired by GEvent.trigger().
(Source:http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GEvent)

Here is the code for making marker interactive:

-----------------------------------------------------
-----------------------------------------------------
var point = new google.maps.LatLng(43.744158,-79.406691); var myIcon = new GIcon(G_DEFAULT_ICON); myIcon.image = "TTC_logo.png"; myIcon.iconSize = new GSize(40, 22); myIcon.iconAnchor = new GPoint(18, 22); myIcon.shadowSize = new GSize(50, 22); markerOptions = { icon:myIcon }; var marker = new GMarker(point, markerOptions); var station = ' 95 York Mills Station Available Buses '; station = station+' 78 St Andrews '; station = station+' 95 York Mills '; station = station+' 115 Silver Hills (TTC Direction) '; station = station+' 122 Graydon Hall (TTC Direction) ';

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(station); } ); map.addOverlay(marker, markerOptions);

The output of the above code is:
[pic]

Note that to add all of the marker, we put the makers plotting code in a common function and the function is being called for each of the stations with specific station information. The part of this code is given below:

-----------------------------------------------------
-----------------------------------------------------
//Marker for York Mills var point = new google.maps.LatLng(43.744158,-79.406691); var station = ' 95 York Mills Station Available Buses '; station = station+' 78 St Andrews '; station = station+' 95 York Mills '; station = station+' 115 Silver Hills (TTC Direction) '; station = station+' 122 Graydon Hall (TTC Direction) '; var marker = createMarkers(point, station); map.addOverlay(marker, markerOptions);

-----------------------------------------------------
-----------------------------------------------------

function createMarkers(point, station) { var myIcon = new GIcon(G_DEFAULT_ICON); myIcon.image = "TTC_logo.png"; myIcon.iconSize = new GSize(40, 22); myIcon.iconAnchor = new GPoint(18, 22); myIcon.shadowSize = new GSize(50, 22); markerOptions = { icon:myIcon }; var marker = new GMarker(point, markerOptions); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(station); } ); return marker;
}

Highlighting Respective Bus Route We provided list of URLs with respective bus numbers in HTML format for the information window of the respective markers. At the event of clicking on any URL available in the information window, it refreshes the page with bus number and subsequently highlights related bus route using API GPolyline same as lay outing subway lines.

Here is the code for highlighting the 78 St Andrews bus route available from York Mills station which is shown in the previous section.

-----------------------------------------------------
-----------------------------------------------------
var m_var=""; var i = document.URL.indexOf('?'); if (i>0)
{
m_var = document.URL.substring(i+1,document.URL.length);
}
--------------------------------------------------------
//for 78 if(m_var=='78') { var routeCoordinates = [ new GLatLng(43.744158,-79.406691), new GLatLng(43.744452,-79.405017), new GLatLng(43.744158,-79.403193), new GLatLng(43.744328,-79.401798), ---------------------------------------- new GLatLng(43.759937,-79.389181) ]; var route = new GPolyline(routeCoordinates, "#6C2DC7", 7,0.8, polyOptions); map.addOverlay(route); var point = new google.maps.LatLng(43.744158,-79.406691); map.centerAndZoom(point, 4);
}

Following is the output of the above code:
[pic]

Future Works

To make the system more flexible and enhance able, Java Struts Framework that include JSP and Servlets can be considered as the future development work environment. JSP supports Javascript and Servlets can provide JSP pages with data on the basis of request placed by the users. Our map did not implement functionality for all of the subway stations or intersections as it was a pilot scheme. Future development work can provide fully implemented tool using the above framework. Some other features can be added to the future works including transit direction, highlighting all the available bus routes from any subway stations using different colors.

Conclusions

Using our map, anybody can find out easily and interactively available bus routes from any subway stations or intersections. If you click on any subway stations or intersections it will provide you list of buses available from that point and if click on any bus link it will highlight the respective route for that bus. And this way anybody can get their desired bus route easily using our map. Interactive transit map is very useful and helpful for the commuters. Therefore TTC should take it into consideration to incorporate it with their system. Our pilot project can be considered as the initial contribution towards the future development works.

Sources:

o Google Maps API References: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html

o Latitude and Longitude Finder: http://itouchmap.com/latlong.html