City Swatches

Tuesday, April 26th, 02011 at 14:41 UTC

Inspiration can strike from anywhere. Knowing how to gather your thoughts and execute is key.

A few weeks ago, I attended an event at the local library in honor of the many Estonian immigrants here in Iceland with my friend Aitor et al. They were demonstrating local customs, foods, dress, songs and other aspects in order to raise awareness of Estonia and gather funds for a potential Estonian House in Reykjavík. Iceland and Estonia have a very strange past. When Estonia broke away from the former Soviet Union, it declared itself an independent nation. Part of the definition of soverenty is that other nations recognize your independence. Iceland was the nation first to step-up and help Estonia rise to the status of independent country by diplomatically recognition.

At the fundraiser, there were plenty of broshures talking about Estonia and what great a place it is to live and visit. All and all, it was interesting, but one page especially caught my eye. It was a small thumbnail map of Estonia along with several other thumbnail maps. It took a few seconds to register what was going on, but after that I realized the potential in the designed. Sadly, I lost the original booklet, but I remember it well and replicated the basic design.

It is interesting to see someone else’s work and get inspirated, but if you can’t execute on the idea yourself, then what good was the inspiration? This is where knowing your resources is key. For just about anything geographical, my first stop is Geonames.org. I have used their code in several other projects, including the HLS World Map and Geonames maps. It is as simple as it gets, a Comma Seperated Value list of places with plenty of metadata.

If I wanted to replicate the thumbnail maps in the broshure, I knew I needed city names, and lots of them. In geonames, you can download a list of every town with a population over 1,000 people. Granted, this data might not be the most up-to-date, for most of my projects it’s fine. The next step was to pick a starting city. On the first go, I chose Reykjavík. While it makes sense as a local starting point, it isn’t geographically that interesting, we’ll see why in a bit. So I went with Saint Louis, Missouri, USA. A quick search on Wikipedia and I’ve got the Latitude and Longitude of the city; 38.627222,-90.197778.

The next step is to choose and arbitrary tolerance in the number of degrees, sort of geographical error bars. I started with +/- 1.0 degrees. For Saint Louis, this would mean a Latitude of 37.627222 to 39.627222 and a Longitude of -91.197778 to -89.197778. This tolerance can be adjusted to taste.

Now that we have this thin band of acceptable latitude and longitude values, I looped through the complete list from geonames to find “sister” cities on the same latitude and repeat the process to find “sister” cities at the same longitude.

The original map of Estonia was a series of thumbnails left and right, showing other large cities at the same latitude and a series of thumnails up and down showing cities at the same longitude. It was simple and interesting to see how geographically similar cities might have vastly different climates, cultures, language and history. Now, with some simple logic, a few lines of code and the geonames database, it’s easy to recreate this for any location!

For Saint Louis there were many results, so I reduced the tolerance to only 0.25 degrees and limited the results to cities to those with a population of 100,000 or higher. The following cities matched her latitude:

These cities matched her Longitude:

As you can see, the list is still fairly large. This will certainly depend on your tolerance as well as your geographic location. Poor Reykjavík is pretty far north. At that latitude it doesn’t have any “sister” cities in North America. Only a handful in Asia and Scandinavia. As for longitude, Iceland sits in the middle of the Atlantic, so there is nothing south of Iceland until Antarctica! Therefore, the results aren’t that interesting as an example.

We can easily run the same equation for any location, Edinburgh, Scotland for example has the following results:

Longitudinal matches:

Now that we have the list along with the metadata, we can go and grab some thumbnails of each area. The first place that came to mind for free map tiles was Open Street Map. They have an export feature which allows you to grab a PNG or JPEG images with a specific bounding box. The URL looks something like:

http://tile.openstreetmap.org/cgi-bin/export?bbox=-90.3092,38.5734,-90.0627,38.6722&scale=110000&format=png

It is easy to change the top, bottom, left and right values to grab a thumbnail for a different region. The downside to Open Street Map is that the server isn’t always responsive. It is an open source project which always needs more resources, so I went looking for alternatives so I wasn’t pounding the Open Street Map server too much. Google Maps offers a Static API service. The terms of service are limited, so the tiles you grab you probably can’t use in commercial applications, but as a sanity check it is an excellent first pass. The URL to grab a static map image looks like this:

http://maps.google.com/maps/api/staticmap?zoom=11&size=512x512&maptype=roadmap&center=38.627222,-90.197778&sensor=false

Again, you can easily change the latitude and longitudes and generate a new thumbnail for each “sister” city.

The next thing I want to try and do is limit it to “interesting” results. This might be difficult to do programatically. Does population of the city have more weight than location? Do you want to try and space out “sister” cities evenly, ignoring other metadata? The results will probably need to be curated by some human intervention or powerful heuristics.

Once you have your sub-set of interesting sister cities, it can finally be arranged in a way similar to the original broshure. At this point, you can modify the look and feel as needed.

I needed a name for this style map to make it easier for me and friends to refer to this in the future. I was originally reminded of Pantone color chips. How each chip can be reordered and put next to others to see how they look in combination. So the name “city chips” was kicked around for a bit. Someone thought it was a new brand of Potatoe Chip Snack Foods, so we continued looking. Pantone chips are also referred to as color swatches, so “City Swatches” was born.

I have a few ideas and projects where this sort of style of small, broken-up map swatches will add clarity and zoom levels in a static, analog print medium. As a way to condense geographically disperse areas into something more linear and manageable, City Swatch style maps might be just what is needed.

Categories: Cartography, Visualizations

Tags: , , , , , ,