Brandweer opent data - Deel 2: kaartanimatie met Torque

18 nov 2013 Edward Mac Gillavry

In dit labexperiment gebruiken we CartoDB, Torque en Leaflet om een interactieve kaartanimatie van alle brandweeruitrukken in de veiloigheidsregio Amsterdam-Amstelland door de tijd heen. Torque maakt het mogelijk om temporele gegevensbestanden te visualiseren met de CartoDB SQL API. De visualisatie is gebaseerd op de GeoJSON bestanden die we in ons eerste labexperiment hebben gemaakt.

Van GitHub naar CartoDB

Omdat Torque de CartoDB SQL API gebruikt, moeten we eerst de gegevens vanuit onze GitHub beheeromgeving overzetten. CartoDB biedt tal van manieren om je gegevens in haar onderliggende PostGIS-database in te lezen. Wij kopiëren en plakken simpelweg de URL die naar het GeoJSON-bestand op GitHub verwijst in het invoerscherm van CartoDB. Binnen enkele seconden is het GeoJSON-bestand gedownload van GitHub en ingelezen in een tabel in onze CartoDB-omgeving. Lees het volledige verhaal over CartoDB, GitHub en GeoJSON op de blog van CartoDB!

Als laatste stap in dit proces moesten we het datattype van de kolom starttime veranderen van het standaard datatype string naar date. Omdat we in het vorige labexperiment onder andere de notatie van de waarden in de kolom starttime hadden omgezet naar de SQL 92 standaard voor het datatype timestamp, bleek het veranderen van het datatype voor deze kolom eenvoudig. Nu kunnen we deze kolom gebruiken om onze kaartanimatie af te laten spelen!

Onder het tabje 'CSS' van de CartoDB-omgeving, hebben we een simpele stijl aangemaakt om de gegevens te visualiseren met CartoCSS:

#callouts{
    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;
}

Animatie zonder programmeren

Zodra de gegevens zijn ingelezen in een tabel binnen CartoDB, kan je binnen de kortste keren een kaartanimatie afspelen dankzij de Torque demonstratie-website. Het leuke is bovendien: er komt geen programmeercode aan te pas! We hebben gewoon onze gebruikersnaam bij CartoDB, tabelnaam en kolomnaam ingevuld onder het kopje options en vervolgens op de knop update geklikt om de eerste kaartanimatie van brandweeruitrukken te bekijken. Er zijn onder het kopje options veel meer instellingen die je kan aanpassen om te bepalen hoe de animatie wordt afgespeeld. De volledige documentatie van de Torque API die deze instellingen uitlegt is beschikbaar op GitHub.

Doe-het-zelf

De Torque API biedt kaartanimaties aan in twee smaken: voor de Google Maps API en voor Leaflet. Onze volgende uitdaging werd daarom om zelf een kaartanimatie te maken met Leaflet, een Open Source JavaScript-bibliotheek voor mobielvriendelijke interactieve kaarten! Gelukkig is er een Torque-voorbeeld gebaseerd op Leaflet ter inspiratie beschikbaar op GitHub. De Google Maps API vervangen door Leaflet lost slechts de helft van puzzel op: we moesten ook overstappen naar een andere achtergrondkaart. Een erg mooie set met kaarttegels gebaseerd op gegevens uit OpenStreetMap is Acetate van GeoIQ. We wilden echter wel de donkere vormgeving uit het Torque-voorbeeld handhaven. Natuurlijk hadden we onze eigen kaarttegels kunnen genereren. De broncode voor Acetate is immers beschikbaar op GitHub, maar toen herinnerden we ons ineens een tweet van Carlos Scheidegger van een aantal maanden geleden:

Dat werkt weliswaar voor browsers die gebaseerd zijn op WebKit (Chrome, Safari) die al vroeg de filtereffecten van CSS3 ondersteunden, maar hoe zit het dan met Firefox? Filtereffecten bestaan al een tijdje en zijn eigenlijk gemaakt om te gebruiken in SVG. Mozilla ondersteunt het gebruik van SVG in CSS om filtereffecten van SVG toe te passen op HTML al sinds Firefox 3.5! Om dus ook in Firefox donkere tegels van de achtergrondkaart te laten zien, hebben we gewoon een SVG filter toegevoegd aan de CSS:

img.leaflet-tile {
    -webkit-filter: hue-rotate(180deg) invert(100%) saturate(30%);
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><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");
}

Met al deze elementen op hun plek, hebben we ten slotte de bestanden geüpload naar GitHub. Bekijk dus snel de interactieve kaartanimatie van brandweeruitrukken!