Chris Mueller – Visualmotive

Thoughts on maps and visualization

Tweemap – Mapping Twitter Followers

We built a tool to map your Twitter followers. It’s called Tweemap.

It is still a little rough around the edges, but the service is very functional. Tweemap shows up to 10,000 followers for any given user. The Google Maps Javascript API provides core mapping utilities, and the Twittervision API was used for geocoding.

How it works

The main problem we encounter building Javascript maps is performance. Javascript is getting faster and better all the time, but compared to a desktop mapping solution, or even to Flash, it is quite slow and requires a delicate touch. Our approach was to use a series of aggregation techniques to group similar data points and thereby limit the amount of rendering required by the browser.

When geolocating Twitter users, we group them based on latitude/longitude coordinates. These point groups (PGroups) definitely contribute to efficiency. For example, we are able all users—potentially hundreds or thousands—in a major cities as an individual entity. PGroups are fed into a larger point collection (PCollection) class, which manages the groups and renders graphics onto the map.

At each zoom level, the PCollection builds a uniform grid across the surface of the map. Grid cells maintain a constant pixel width and represent a “square” of lat/lon coordinates. Each PGroup that is visible within the current map viewport—any not within the viewport is temporarily discarded—is placed into its corresponding grid cell. The grid is passed to the PCollection’s render() method, which creates and places circles on the map to represent the total count of followers in that cell. If the map is moved, the grid is extended in the appropriate directions, and PGroups are likewise placed into the new sections of the grid. By merely extending the grid, rather than recreating it, we can cache any existing icons and save a full redraw cycle, while at the same time preventing the map from going temporarily blank.

Icons are scaled against other icons in the viewport, so smaller icons become larger when they are the only icons in view. We also cap the max icon size so that circles don’t become so cluttered as to make the map unreadable.

We had considered using CloudMade’s custom map tiles for this map, but having run into several issues with their map style editor, we resorted to Google and its powerful API. One thing we didn’t like about Google’s maps is that at higher zoom levels it became very difficult to see our circles against the backdrop of Google’s imagery. To solve this problem, we created a new Google Maps layer that sits atop the standard layers to darken the map and make our icons visible. This new map layer is quite dumb, for every tile it serves a static PNG with limited transparency. This kind of layer can be created as follows:

var modLayer = new GTileLayer( new GCopyrightCollection(""), 0, 15 );
modLayer.getTileUrl = function( tile, zoom ) { 
    return image_root + "mod.png"; // a darkened, semi-transparent PNG
}
modLayer.isPng = function() { return true; }

// group the new "darkened" layer with the terrain map
var layerTerMod = [ G_PHYSICAL_MAP.getTileLayers()[0], modLayer ];
var mtTerMod = new GMapType( layerTerMod, G_PHYSICAL_MAP.getProjection(), "Dark" );

// add the darkened map type to the map
map.addMapType( mtTerMod );
map.setMapType( mtTerMod );

We have not compressed the Javascript source for this project with the hope that it might be useful to someone else. Feel free to dig around.

Now, have a look at Tweemap.

Apr 2, 2009

Category: Maps

Tagged: , ,

Comments are closed.