{"id":147,"date":"2011-10-16T17:02:50","date_gmt":"2011-10-16T15:02:50","guid":{"rendered":"http:\/\/visurus.wordpress.com\/?p=147"},"modified":"2014-02-27T23:17:40","modified_gmt":"2014-02-27T23:17:40","slug":"zipscribble-map-switzerland-part-i","status":"publish","type":"post","link":"https:\/\/www.ralphstraumann.ch\/blog\/2011\/10\/zipscribble-map-switzerland-part-i\/","title":{"rendered":"ZIPScribble Map: Switzerland \u2013 Part I"},"content":{"rendered":"

Having seen a visualization by Robert Kosara<\/a> of\u00a0EagerEyes<\/a> a loooong time ago,\u00a0I wanted to try to reproduce it for Switzerland using Processing<\/a>. This is the first installment of a two-parts post covering this project, in which I will describe how to arrive at an intermediate result. I’ll do that in some detail, maybe this is helpful to somebody.<\/p>\n

The visualization is called the ZIPScribbleMap<\/a>: “ZIP” for postal codes, “Scribble” for rather obvious reasons (as in “it looks like what I doodle while on the phone!”<\/em>): \"\"<\/a><\/p>\n

Data<\/strong><\/p>\n

<\/strong>First of all I needed a dataset of Swiss postal codes. Ideally this dataset would contain the place names along with the postal codes (for error\/quality checking) and would be geocoded<\/em> (that is, contain geographic coordinates). However, if the postal codes were not geocoded, one could resort to using a (for example, Google’s<\/a>) geocoding service to hopefully obtain coordinates for the postal codes).<\/p>\n

Luckily, I could avoid this extra step, because after a brief search it turned out that Geonames does offer datasets of geocoded postal codes on a per-country basis for download:\u00a0http:\/\/download.geonames.org\/export\/zip<\/a>\u00a0(scroll down for a readme; entry page is\u00a0here<\/a> with reference to postal codes in first paragraph).<\/p>\n

The data is CC-BY-3.0-licensed<\/a>, which means we can use it to our ends (even commercial ones) provided we attribute it to Geonames. The Readme<\/a> accompanying the data says a link to the Geonames website is okay for this purpose.<\/p>\n

Basemap<\/strong><\/p>\n

<\/strong>Next I felt I needed a nice looking base map to plot the postal code data on, rather than just an empty canvas. In order to prepare one I decided to use TileMill<\/a> by MapBox (see this post<\/a>). TileMill is available for Mac OS and Ubuntu. So I fired up my Ubuntu desktop computer and had TileMill installed. TileMill runs in the browser.<\/p>\n

I edited an existing stylesheet to get a very reduced basemap with bright colours. The basemap contains country outlines and major lakes. I exported the basemap as a PNG file for use in Processing.<\/p>\n

Note: When you do the export, you have to pay attention to note down the extent coordinates (north, east, south and west boundary coordinates). You need these later on in order to get the spatial reference in Processing right: Processing has to project geographically referenced data (basemap and postal codes) consistently into the screen spatial reference system.<\/p>\n

Side-note: While figuring out the design of the basemap I exported different versions several times, because I forgot to take note of the extent coordinates. Later I dropped defining an extent by mouse but entered the extent coordinates numerically into TileMill instead.<\/p>\n

Finally: This is what my basemap of Switzerland looked like:<\/p>\n

\"\"<\/a>
Basemap for Switzerland, by TileMill<\/figcaption><\/figure>\n

The Mechanics of Part I<\/strong><\/p>\n

Time to fire up Processing. I’m using version 1.5.1 on Ubuntu:<\/p>\n

\"\"<\/a><\/p>\n

Let’s summarise: By now I had my basemap as well as my postal code data ready. The latter is saved in a text file. Both files have to be stored in the data<\/em> folder of the Processing sketch. You can move them there manually or use the Sketch<\/em> > Add File…<\/em>dialog in Processing.<\/p>\n

For using the basemap in Processing, you best refer to the Simple static map example<\/a> by Till Nagel. He offers a nifty\u00a0MercatorMap<\/a> class for download, which one can use for handling the projection from geographic coordinates to screen coordinates. Download and save it as MercatorMap.pde<\/em> in the Processing sketch folder (not the data<\/em> folder).<\/p>\n

Using the MercatorMap class I could load the basemap in Processing as follows (this is where you need the extent coordinates, which you noted when you exported the basemap from TileMill):<\/p>\n

[sourcecode language=”java” highlight=”12″]
\nPImage img;
\nMercatorMap mercatorMap;<\/p>\n

void setup() {
\nsmooth();
\nnoLoop();
\n\/\/ Set up canvas
\nsize(1024, 673);
\n\/\/ Load image
\nimg = loadImage(“mapSWI_bright.png”);
\n\/\/ Initiate mercator map to handle projection
\nmercatorMap = new MercatorMap(width, height, 47.9, 45.7, 5.78, 10.67);
\n[\/sourcecode]<\/p>\n

Outside the setup()<\/em>\u00a0method I defined a PImage<\/em> object in order to store the PNG file of the basemap and a MercatorMap<\/em> object for handling the projection. In the setup()<\/em> method I define the canvas size, load the basemap file and (in line 12)\u00a0instantiate the MercatorMap<\/em>\u00a0using the sketch width and height as well as the extent coordinates.<\/p>\n

In a second step I added some font definitions (the fonts can be created using Tools<\/em> > Create Font…<\/em> in Processing) and the functionality to read the postal code data from the Geonames text file:<\/p>\n

[sourcecode language=”java” highlight=”2,3,5,6,17,18,19,20,21,22″]
\nPImage img;
\nPFont fontSmall, fontBig, fontBold;
\nPVector pnt;
\nMercatorMap mercatorMap;
\nString[] lines;
\nint index = 0;<\/p>\n

void setup() {
\nsmooth();
\nnoLoop();
\n\/\/ Set up canvas
\nsize(1024, 673);
\n\/\/ Load image
\nimg = loadImage(“mapSWI_bright.png”);
\n\/\/ Initiate mercator map to handle projection
\nmercatorMap = new MercatorMap(width, height, 47.9, 45.7, 5.78, 10.67);
\n\/\/ Set up fonts for labelling
\nfontSmall = loadFont(“DejaVuSansCondensed-10.vlw”);
\nfontBig = loadFont(“DejaVuSerifCondensed-25.vlw”);
\nfontBold = loadFont(“DejaVuSerifCondensed-Bold-25.vlw”);
\n\/\/ Load zip code data
\nlines = loadStrings(“zipcodes_SWI.txt”);
\n[\/sourcecode]<\/p>\n

Line 22 reads the postal code from the Geonames text file and stores it in a String array lines<\/em>. Since I had defined the array outside the setup()<\/em> method, I can access it now inside the draw()<\/em> method:<\/p>\n

[sourcecode language=”java” highlight=”7,8,9,10,11,12,13,14″]
\nvoid draw() {
\n\/\/ Draw basemap
\nimage(img, 0, 0);
\n\/\/ Draw zip code locations
\nnoStroke();
\nfill(250, 150, 0, 80);
\nwhile (index < lines.length) {
\nString[] row = split(lines[index], ‘t’);
\nfloat lat = float(row[9]);
\nfloat lon = float(row[10]);
\npnt = mercatorMap.getScreenLocation(new PVector(lat, lon));
\nellipse(pnt.x, pnt.y, 6, 6);
\nindex = index + 1;
\n}
\n[\/sourcecode]<\/p>\n

Let’s look at what happens here in a bit more detail: The following part is inside a loop which iterates through the entries in the String array lines<\/em>:<\/p>\n

[sourcecode language=”java” firstline=”8″]
\nString[] row = split(lines[index], ‘t’);
\nfloat lat = float(row[9]);
\nfloat lon = float(row[10]);
\n[\/sourcecode]<\/p>\n

Line 8 takes the current entry of the lines<\/em> array and splits it wherever it finds a tabulator (or ‘t’ in Java). The result is stored in a new String array row<\/em>. Lines 9 and 10 pick the correct entries from the array, convert them to a floating point number and store it in the variables lat<\/em> (latitude) and lon<\/em> (longitude). Thus, now we have the geographic coordinates of a postal code right there.<\/p>\n

The next part is still in the loop which iterates through the postal code data. Line 11 creates a new PVector<\/em> (a Processing object) from the two coordinates I just extracted. This PVector<\/em> object is subjected to the getScreenLocation()<\/em>\u00a0method of Till Nagel’s MercatorMap<\/em> object.<\/p>\n

[sourcecode language=”java” firstline=”11″]
\npnt = mercatorMap.getScreenLocation(new PVector(lat, lon));
\nellipse(pnt.x, pnt.y, 6, 6);
\nindex = index + 1;
\n[\/sourcecode]<\/p>\n

The\u00a0getScreenLocation()<\/em> method is pretty self-explanatory: It takes geographic coordinates and using the extent coordinates from when I set up the\u00a0MercatorMap<\/em>\u00a0object, converts them into screen coordinates of this Processing sketch. Then, using the x and y coordinates of the Object pnt<\/em> we draw an ellipse of size (6, 6), that is, a circle, before we advance the index and continue to iterate through the postal code data (as long as there is data left to read).<\/p>\n

Result<\/strong><\/p>\n

Finally, the result is here (click on the figures to see them bigger). I produced versions with different basemaps and with\/without additional, labelled cities:<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>On the way to the ZIPScribble Map: Switzerland<\/em> these are only intermediate results. Yet I find them nice and insightful enough. Bigger cities (with several postal codes) and agglomerations are quite clearly visible. Also the mountainous regions of Switzerland such as the Alps are discernible in the picture. In alpine regions municipalities and thus postal code regions tend to be bigger than in the rather densely populated lowlands. Overall the maps are certainly not bad approximations of population density.<\/p>\n

Any feedback or questions are welcome, feel free to sound off in the comment section or shot me an e-mail<\/a>.<\/p>\n

Below I include the Processing source code of the last version of the Postal Code map:<\/p>\n

[sourcecode language=”java” collapse=”true” gutter=”false”]<\/span>
\n<pre>\/\/ Ralph Straumann
\n\/\/ visurus.wordpress.com
\n\/\/ 2011-10-16
\n\/\/ CC-BY-NC<\/p>\n

\/\/ Thanks to:
\n\/\/ http:\/\/download.geonames.org\/export\/zip\/CH.zip
\n\/\/ http:\/\/tillnagel.com\/wp-content\/uploads\/2011\/06\/MercatorMap.java via http:\/\/tillnagel.com\/2011\/06\/tilemill-for-processing<\/p>\n

PImage img;
\nPFont fontSmall, fontBig, fontBold;
\nPVector pnt;
\nMercatorMap mercatorMap;
\nString[] lines;
\nint index = 0;
\nboolean placeLabels = true;<\/p>\n

void setup() {
\nsmooth();
\nnoLoop();<\/p>\n

\/\/ Set up canvas
\nsize(1024, 673);<\/p>\n

\/\/ Load image – either bright or dark basemap
\nimg = loadImage(“mapSWI_bright.png”);
\n\/\/img = loadImage(“mapSWI_dark.png”);<\/p>\n

\/\/ Load zip code data
\nlines = loadStrings(“zipcodes_SWI.txt”);
\n\/\/ Set up fonts for labelling
\nfontSmall = loadFont(“DejaVuSansCondensed-10.vlw”);
\nfontBig = loadFont(“DejaVuSerifCondensed-25.vlw”);
\nfontBold = loadFont(“DejaVuSerifCondensed-Bold-25.vlw”);
\n\/\/ Initiate mercator map to handle projection
\nmercatorMap = new MercatorMap(width, height, 47.9, 45.7, 5.78, 10.67);
\n}<\/p>\n

void draw() {
\n\/\/ Draw basemap
\nimage(img, 0, 0);<\/p>\n

\/\/ Draw zip code locations
\nnoStroke();
\nfill(250, 150, 0, 80);
\nwhile (index < lines.length) {
\nString[] row = split(lines[index], ‘t’);
\nfloat lat = float(row[9]);
\nfloat lon = float(row[10]);
\npnt = mercatorMap.getScreenLocation(new PVector(lat, lon));
\nellipse(pnt.x, pnt.y, 6, 6);
\nindex = index + 1;
\n}<\/p>\n

if (placeLabels == true) {
\nfill(0);
\ntextFont(fontSmall);
\npnt = mercatorMap.getScreenLocation(new PVector(46.9167,7.4667));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Berne”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.5842,7.5876));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Basle”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.2095,6.1438));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Geneva”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.0833,8.2667));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Lucerne”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.4236,9.3622));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“St. Gallen”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.2295,7.3568));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Sion”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.7151,8.622));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Schaffhausen”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.1889,9.0247));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Bellinzona”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.85,9.5));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Chur”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.1324,7.2441));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Bienne”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.7554,7.6236));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Thun”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.0083,8.9495));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Lugano”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.4916,8.7295));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Winterthur”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.7787,6.6339));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Yverdon-les-Bains”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.3667,8.55));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Zurich”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.5534,6.6971));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Lausanne”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.289,7.5458));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Sierre”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.3433,7.9052));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Olten”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(47.0543,9.4488));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Sargans”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.4855,9.8335));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“St. Moritz”, pnt.x+5, pnt.y-5);
\npnt = mercatorMap.getScreenLocation(new PVector(46.7783,9.879));
\nellipse(pnt.x, pnt.y, 4, 4);
\ntext(“Davos”, pnt.x+5, pnt.y-5);
\n}<\/p>\n

\/\/ Add labels
\nfill(180);
\ntextFont(fontBig);
\ntext(“Postal Codes”, 30, 45);
\ntextFont(fontBold);
\ntext(“Switzerland”, 30, 73);
\ntextFont(fontSmall);
\nfill(130);
\ntext(“Postal codes CC-BY”, 30, 632);
\ntext(“www.geonames.org”, 30, 645);
\ntextAlign(RIGHT);
\ntext(“CC-BY-NC”, 990, 632);
\ntext(“visurus.wordpress.com”, 990, 645);<\/p>\n

save(“PostalCodesSWI.png”);
\n}
\n[\/sourcecode]<\/p>\n

Thanks to Robert Kosara<\/a>, TileMill<\/a>, Till Nagel<\/a> and Geonames<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"

Having seen a visualization by Robert Kosara of\u00a0EagerEyes a loooong time ago,\u00a0I wanted to try to reproduce it for Switzerland using Processing. This is the first installment of a two-parts post covering this project, in which I will describe how to arrive at an intermediate result. I’ll do that in some detail, maybe this is … Continue reading ZIPScribble Map: Switzerland \u2013 Part I<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"ZIPScribble Map: Switzerland \u2013 Part I: http:\/\/wp.me\/p1qYOj-2n","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[8],"tags":[52,66,89,90,114,125,133,134],"class_list":["post-147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-piece","tag-geo","tag-java","tag-postcodes","tag-processing","tag-tilemill","tag-visualization","tag-zip-codes","tag-zipscribblemap"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.ralphstraumann.ch\/blog\/wp-content\/uploads\/2011\/10\/postalcodesswi_bright_labels.png","jetpack_shortlink":"https:\/\/wp.me\/p3pPwF-2n","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":1,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":1613,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts\/147\/revisions\/1613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/media\/616"}],"wp:attachment":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}