Skip to content


The Streetcar GPS Simulation Project


I. Overview

This project simulates a real-time GPS map of several TTC streetcars in downtown Toronto. I created this simulation to explore the Google Maps API, animation techniques, geocoding, and external custom maps. It can be extended to other applications such as real-time mapping of certain GPS-enabled mobile devices. Click anywhere on the map to view the simulation. Feel free to zoom in/out, drag the map, and select Hybrid mode.

Ray's TTC Streetcar GPS Simulation

II. Consulting

I do my best to explain the concepts and techniques behind my projects. If you like my work and can use my expertise in your projects, I am available for consulting at a competitive rate.


III. Components

1. The TTC Transit Map Component

This external component is a cool custom map created by Ian Stevens which shows the entire TTC transit routes overlayed onto Google Maps. The original version can be found here. I use this map to display the routes taken by the animated TTC streetcars.

2. Streetcar Initialization Component

This component creates an array of streetcar objects for each streetcar route. The number of streetcars currently in the route is a function of the frequency of arrival at each station.

// Queen St. W. Streetcar
var start501w = “Queen St E and Broadview Ave, Toronto, ON”;
var end501w = “Queen St W and Ossington Ave, Toronto, ON”;
var total_bus501 = 6; // assumption
var bus501w_marker = new Array(total_bus501);

2. Route Initialization Component

This component creates a route for each streetcar line. The GDirections() function is used to calculate the route between the start and end points, and the resulting line is retrieved using the getPolyline() function.

var bus501w = new GDirections();
bus501w.loadFromWaypoints([start501w,end501w],{getPolyline:true,getSteps:true});

The loadFromWaypoints() function calls the “load” event which is handled by the following listener:

GEvent.addListener(bus501w, “load”, function()
{
   bus501w_poly = bus501w.getPolyline();
   bus501w_eol = bus501w_poly.Distance();
   for( var i = 0; i < total_bus501; i++ )
   {
     bus501w_marker[i] = new GMarker(bus501w_poly.getVertex(0),{icon:sc_west});
     map.addOverlay(bus501w_marker[i]);
     setTimeout(“bus501w_animate(” + i + “, ” + i*(bus501w_eol/total_bus501) + “)”,2000);
   }
});

3. Position Update Component

This component updates the current position of each streetcar and displays it on the map. The animate() function is initially called from the “load” listener, then calls itself recursively using setTimeout() after each polling interval (tick).

function bus501w_animate(i, d)
{
   if (d > bus501w_eol) {
     d = 0; // reset at starting point
   }
   var p = bus501w_poly.GetPointAtDistance(d);
   bus501w_marker[i].setPoint(p);
   setTimeout(“bus501w_animate(“+ i + “, ” +(d+step501) +”)”, tick);
}

The GetPointAtDistance() function is provided by a Google Maps extension called “epoly.js” which was developed by Mike Williams. More info can be found here. This function returns point “p” on the route which is a distance “d” meters away from the starting point. This point is then used to update the streetcar’s current position (marker) using the setPoint() function.


III. Future Enhancements

1. Real-time GPS Coordinates

In this simulation, the streetcar’s position is updated by 2 meters every 500 milliseconds. A real application would update the current position by retrieving real-time GPS coordinates and use a more infrequent polling interval such as 60 seconds. At this time, it is unknown if the TTC will provide real-time GPS coordinates to the public.

2. Mobile Devices

It would be cool if someone could develop a real-time TTC streetcar map for the iPhone and other mobile devices. Route schedules like Red Rocket are nice, but a real-time map can reveal better routes based on current streetcar positions and can significantly reduce waiting times at the streetcar stop.

3. Other Route Algorithms

The GDirections route calculator provided by the Google Maps API is based on least-cost-routing using street maps. A different algorithm could provide a complete polyLine specifying all the waypoints in the route. For example, we could display a plane’s flight path, which does not follow the directions on a road map. This enables new applications such as creating a real-time air traffic control map showing the GPS positions and routes of all planes in the sky. The possibilities are endless.


IV. References

1. Google Maps API Developer’s Guide
http://code.google.com/apis/maps/documentation/index.html

2. Google Mapis API Reference
http://code.google.com/apis/maps/documentation/reference.html




One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. octavian said

    very cool. is this as far as you’re gonna go with the project?

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.