Visualising Dublin Recycle Facilities

I participated in a project that was developed during Interactivos?’12 Dublin which was organised by Medialab-Prado and was part of HACK THE CITY, Dublin’s 2012 flagship exhibition organised by Science Gallery.

The project was called Thanks for Recycling and originally was an idea of Martina Kalogjera.

We did a number of things, but what I’d like to talk about here is how to visualise geo-located data using the longitude and latitide and skip tiles and other tedious work. So, we got our API key for Dublin City maps and we were good to go. We queried the data to find the existing data facilities.

The data response looks like this (that’s just a sample here):

<?xml version="1.0" encoding="UTF-8"?>
<markers>
    <marker id="715" lat="53.34166204059" lng="-6.2142513929251" 
cls="false">
        <name><![CDATA[Ringsend Recycling Centre]]></name>
        <address><![CDATA[Pigeon House Road, Ringsend, Dublin 4]]>
        </address>
    </marker>
    <marker id="1798" lat="53.354949345405" lng="-6.2443851012856" 
cls="false">
        <name><![CDATA[Shamrock Terrace Recycling Centre]]></name>
        <address><![CDATA[Shamrock Terrace, North Strand, Dublin 1]]>
        </address>
    </marker>
    <marker id="104" lat="53.310275616603" lng="-6.2745812625401" 
cls="false">
        <name><![CDATA[Bring Centre Herzog Park]]></name>
        <address><![CDATA[Orwell Road, Dublin 6]]></address>
    </marker>
    <marker id="1799" lat="53.355334884953" lng="-6.27803326980319" 
cls="false">
        <name><![CDATA[Bring Centre Grangegorman ]]></name>
        <address><![CDATA[Grangegorman Road Upper, Dublin 7]]></address>
    </marker>
    <marker id="2006" lat="53.325739799004" lng="-6.2895988199836" 
cls="false">
        <name><![CDATA[Bring Centre Eamonn Ceannt Park]]></name>
        <address><![CDATA[Rutland Grove, Crumlin, Dublin 12]]></address>
    </marker>
    <marker id="2014" lat="53.324706069157" lng="-6.3090944344926" 
cls="false">
        <name><![CDATA[Bring Centre Windmill Road]]></name>
        <address><![CDATA[49-51 Windmill Road, Crumlin, Dublin 12]]>
        </address>
    </marker>
</markers>

Which is how most of geo-localised data look like. Initially, we thought that a web-based service would be quick to do what we wanted: to represent a circle around each recycling facility which represents 10 minutes walking distance around it. In this way we would see which areas have a recycling facility within walking distance.

However, using web services was not faster than using Processing and the library Unfolding (you can find it at your usual library-finding place). So we wrote the following code:

import processing.opengl.*;
import codeanticode.glgraphics.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;

de.fhpotsdam.unfolding.Map map;

ListrssGeoLocations = new ArrayList();

public void setup() {
 size(900, 600, GLConstants.GLGRAPHICS);
 smooth();

 map = new de.fhpotsdam.unfolding.Map(this);
 map.zoomAndPanTo(new Location(53.32f, -6.25f), 14);
 MapUtils.createDefaultEventDispatcher(this, map);

 loadRSSGeoLocations();
 }

public void loadRSSGeoLocations() {
 // Load RSS feed
 //String url = "http://www.dublin.ie/maps/api.php?apikey=yourAPIkey
 //&action=getFacilities&what=recycling";
 //or save to a local file: 
String url = "dublin.recycling.api.php.xml";
 XMLElement rss = new XMLElement(this, url);
 // Get all items
 XMLElement[] itemXMLElements = rss.getChildren("marker");
 print(itemXMLElements[0]);

for (int i = 0; i < itemXMLElements.length; i++) {
 // Adds lat,lon as locations for each item
 float lat = itemXMLElements[i].getFloat("lat");
 float lon = itemXMLElements[i].getFloat("lng");
 print(lat);

 rssGeoLocations.add(new Location(lat, lon));
  }
 }

public void draw() {
 background(0);
 map.draw();

for (Location location : rssGeoLocations) {
 float xy[] = map.getScreenPositionFromLocation(location);
 drawEarthquakeMarker(xy[0], xy[1]);
  }
 }

public void drawEarthquakeMarker(float x, float y) {
 noStroke();
 fill(200, 200, 0, 100);
 ellipse(x, y, 140, 140);
 }

Which is *really* short, and does the job. Note that it gets “lat” and “lng” from the XML response. No tiles, no nothing. And the result we got:

There you go 🙂

More about the whole thing, here.