Fire Engine Callouts - Part 2: Animated map with Torque

11 Nov 2013 Edward Mac Gillavry

In this new lab experiment, we use CartoDB, Torque, and Leaflet to create an interactive, animated map of fire engine callouts in the Amsterdam-Amstelland area over time. Torque allows you to create visualisations of temporal datasets using the CartoDB SQL API. The visualisation is based on the GeoJSON files that we created in our first lab experiment.

From GitHub to CartoDB

As Torque leverages the CartoDB SQL API, we first have to bring across our data from our GitHub data repository. CartoDB offers a lot of ways to upload your data into its underlying PostGIS database. We simply copy and paste the URL that points to the GeoJSON file on GitHub into the CartoDB upload facility. Within seconds, the GeoJSON file had been downloaded from GitHub into a new table in our CartoDB account. Check out the full post over on the CartoDB blog to learn more about CartoDB, GitHub and GeoJSON!

As a final step in the import procedure, we had to change the data type of the column starttime from the default data type string to date. Since we had already reformatted the values in the column starttime to the SQL 92 standard for the timestamp data type in our previous lab experiment, changing the data type for this column proved to be straightforward. Now we can leverage this column in our animated map!

Under the 'CSS' interface tab in CartoDB, we created a simple style rule to style our data with CartoCSS:

    marker-placement: point;
    marker-type: ellipse;
    marker-width: 3.5;
    marker-fill: #FFA300;
    marker-opacity: 0.2;
    marker-line-width: 0;
    marker-comp-op: screen;
    marker-allow-overlap: true;

Animation without coding

Once the data is available as a table in CartoDB, you can view the animation unfold in no time, thanks to the Torque demo website. Better still: it doesn't even involve any coding! We simply provided our CartoDB username, table name, and column name into the options sidebar and hit the update button to watch the first animated map of fire engine callouts. There are many more parameters available in the options sidebar that you can adjust to influence how the animation unfolds. The documentation for the Torque API describing these parameters is available on GitHub.

Rolling our own

Since the Torque API provides animated layers in two flavours (Google Maps API and Leaflet), the next challenge was to roll our own animated map and use Leaflet, an Open Source JavaScript library for mobile-friendly interactive maps! Fortunately, there is a Leaflet-based Torque example on GitHub that we could use for inspiration. Dropping the Google Maps API for Leaflet solves only half of the equation: we also had to switch to another basemap. A very nice set of basemap tiles using data from OpenStreetMap is Acetate from GeoIQ. However, we wanted to achieve the same dark appearance of the Torque example. Surely, we could have rendered our own tiles. The source code for Acetate is available on GitHub, but then we remembered a tweet by Carlos Scheidegger from a few months before:

That's fine for WebKit-based browsers (Chrome, Safari) that were swift to support CSS3 filter effects, but how about Firefox browsers? Well, filter effects have been around for awhile but were designed to work in SVG. Mozilla introduced support for using SVG as a component of CSS styles in order to apply SVG effects to HTML content as early as Firefox 3.5! To show the dark basemap tiles in Firefox as well, we simply added an SVG filter to the CSS rule:

img.leaflet-tile {
    -webkit-filter: hue-rotate(180deg) invert(100%) saturate(30%);
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'\'><filter id=\'darken\' style=\'color-interpolation-filters: sRGB\'><feColorMatrix type=\'hueRotate\' values=\'180\' /><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0 1\'/><feColorMatrix type=\'saturate\' values=\'0.3\' /></filter></svg>#darken");

With all these elements in place, we finally uploaded all the files to GitHub. So, go check out our interactive, animated map of fire engine callouts!