Live Train Route Animation

The code for this article is available on my github, here:

Building on the Live Departures Board project from the other day, I decided to try out mapping some departure data. The other article shows pretty much all the back-end code, which wasn’t changed much.


The AngularJS app takes the routes of imminent departures from various stations and displays them on a Leaflet map as polylines. I used this great Snake library to animate the lines as they appear. Map tiles come from CartoDB, which is free, unlike Mapbox.


Here’s the code-behind for the Angular app:

var mapApp = angular.module('mapApp', ['ngRoute']);

		    	controller: 'MapController',
			    templateUrl: 'map.html'
		    .otherwise({redirectTo: '/'});
	.controller('MapController', function($scope, $http, $timeout, $routeParams) {

        var mymap ='mapid').fitBounds([ [51.3933180851, -1.24174419711], [51.5154681995, -0.174688620494] ]);
        L.tileLayer('http://{s}{z}/{x}/{y}.png', {
            attribution: '© <a href="">OpenStreetMap</a> © <a href="">CartoDB</a>',
            subdomains: 'abcd',
            maxZoom: 19

        $scope.routeLayer = L.featureGroup().addTo(mymap);
        $scope.categoryScale = d3.scale.category10();

        $scope.doStation = function(data) {
                var color = $scope.categoryScale(route[0].crs)
                var path = []

                route.filter(function(x) {return x.latitude && x.longitude}).forEach(function(station) {
                    var location = [station.latitude, station.longitude];

                var line = L.polyline(path, {
                    weight: 4,
                    color: color,
                    opacity: 0.5


        $scope.refresh = function() {

            $scope.crsList.forEach(function(crs) {
                $http.get("/routes/" + crs).success($scope.doStation);

            }, 10000)

        $http.get("/loaded-crs").success(function(crsData) {
            $scope.crsList = crsData;


Leave a Reply

Your email address will not be published. Required fields are marked *