Here is another double issue of Monthly Maps to begin the new year.

The end of the year saw several great “best maps of 2013″ posts. We will go to them soon but first let’s look at the map that got the “worst map of 2013″ award from Kenneth Field, the Cartonerd. In his famous words, it features a “symposium of technicolour psychedelic vomit across the map.”

cartonerd - worst map of 2013

This beautiful three-dimensional globe-based visualisation of surface wind speed (powered by D3) was featured on both Kenneth Field’s “favourite maps from 2013″ and Wired MapLab’s “the most amazing, beautiful and viral maps of the year” posts. - earth wind map

Continue reading

Note: Much apologies for skipping the September issue of Monthly Maps. To compensate, here’s a double issue filled with fantastic cartographies.

Guernica Magazine has published an excerpt of an interview with Denis Wood, iconic critical cartographer, from his last book titled “Everything Sings: Maps for a Narrative Atlas“. Let us begin this double issue with Wood’s penetrating analysis of what maps do:


Denis Wood: Maps are just nude pictures of reality, so they don’t look like arguments. They look like “Oh my god, that’s the real world.” That’s one of the places where they get their kick-ass authority. Because we’re all raised in this culture of: if you want to know what a word means, go to the dictionary; if you want to know what the longest river in the world is, look it up in an encyclopedia; if you want to know where some place is, go to an atlas. These are all reference works and they speak “the truth.” When you realize in the end that they’re all arguments, you realize this is the way culture gets reproduced. Little kids go to these things and learn these things and take them on, and they take them on as “this is the way the world is.”

The fabulous neogeographers at the Oxford Internet Institute used Alexa data to identify the most visited websites in each country, and mapped it as an old colonial style choropleth map of ‘Internet empires’. Do not miss another map included in the same page, which uses hexagonal cartograms to qualify the most-visited websites in each country by the population of Internet users in the same country.

oxford internet institute - age of internet empires

Continue reading

Web and mobile applications account for most of the maps usage today. We recently read that about 54% of smartphone users have Google Maps running on their phone making it the most popular application in the market. In the recent years, the technology behind web maps have improved considerably, owing to the incredibly fast and intuitive experience that we enjoy today. What we see, drag, scroll, touch, pinch and poke today is a set of map tiles.

The OpenStreetMap Wiki defines map tiles this way –

square bitmap graphics displayed in a grid arrangement to show a map

The fine folks at MapBox defined it this way –

tiles are typically 256×256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image.

This technique of preparing and serving maps changed the way they are consumed drastically. Earlier, loading the map in a browser would take up so much memory that it was practically impossible to browse the map easily. Tiles make sure that only the required (usually the area which is currently viewed) have to be displayed on the browser, reducing the memory footprint. Even though Google got the usage of tiling right, they did not invent it. Web Map Service which came out in 1999 as an OGC standard set the web mapping revolution to a new level. WMS was slow for a lot of neogeographers. This frustration lead Anselm Hook to explore the idea of tiling the map for better performance.

The core of the application is a lightweight javascript application that runs in both Internet Explorer and Firefox. The approach is similar to the one taken at SVG Tile Engine which I wrote last summer. The difference is that this one talks to conventional WMS compliant mapping sources rather than a pre-tiled blue marble database and relies only on Javascript – not on SVG. This javascript engine is actually just a straight port of a java client based tile mapping engine which is visible at Java Tile Engine . The problem with the java applet approach however is that it cannot do cross domain image loading due to flaws in the security policy of java.

WMS-C was introduced following this idea to cache the map images which was super-ceded by the Tile Map Service by OSGeo.

Let’s take another step forward and see how the tiles work and how they are generated.

tilesWhen we view a map on the browser, there’s an immensely powerful feature – zoom. The world map at the least zoom level (level 0) is usually four square images which forms a grid of tiles. Every location on the earth is represented by a tuple with two elements – [latitude, longitude]. This, on your screen, translates to [x, y] which is the pixel coordinates. Zoom levels are incorporated to this data structure by adding one more element to the tuple – [latitude, longitude, zoom]. For instance, [12.9719, 77.5938, 12] is Bangalore at zoom level 12 and [12.9719, 77.5938, 15] is Bangalore at zoom level 15.

In your browser, the map is a collection of HTML image tags. This is achieved by using one of the various JavaScript map libraries like Leaflet.js, OpenLayers.js, or MapBox.js.

The geographic data in databases or shapefiles are rendered into the tiles through a process which involves several stages. We will quickly run through the most important and commonly used pipeline using a stack of open source softwares.

Mapnik is the de facto open source rendering library written in C++ that is used by large geographic data projects like OpenStreetMap to tiny map studios. Mapnik accepts a wide variety of input data – PostgreSQL databases, Shapefiles, GeoTIFF, and renders the data into set of map tiles depending on the style that you have developed. The styles are XML files which explain what Mapnik should do for each of the geographic feature (read tags) that it finds in the data source.

	<Style name="highways">
			<Filter>[highway] &lt;&gt; ''</Filter>
				<CssParameter name="stroke">#808080</CssParameter>
				<CssParameter name="stroke-width">2</CssParameter>
				<CssParameter name="stroke-linejoin">round</CssParameter>
				<CssParameter name="stroke-linecap">round</CssParameter>
			<Filter>[highway] &lt;&gt; ''</Filter>
			<TextSymbolizer name="name" fontset_name="book-fonts"
				size="9" fill="#000" halo_radius="1" placement="line" />

The above XML is one of the many style tags used by OpenStreetMap to render the tiles using Mapnik. This style tag refers to the highways that you see on the map. A style tag comprises of several Rules. A common technique is to apply CSS to the features that satisfy a rule and Mapnik will pick it up.

The tiles rendered by Mapnik are then served from what is called a Tile Server. The commonly used tools for a server is Apache with the mod_tile extension. I like the Python based server called TileStache. It’s fast and easy to setup. When the browser requests for a map tile, the server checks if the tile has been already rendered, if yes it is send to the browser. Otherwise, it is send to Mapnik for rendering.

We will discuss more about the configuration and best practices of setting up a rendering stack eventually in another blog post.

Note: Welcome to this new content section we are beginning. As the name suggest, the ‘Monthly Maps’ series will do a monthly aggregation of all the maps, map codes, and map news that we loved and flagged during the month concerned (and not necessarily those that were published in the month concerned). Apologies for the late publication of the June 2013 edition. We hope you will enjoy this one and keep following the future editions.


The biggest international news this month was the ‘discovery’ of PRISM and associated technological systems being used by the Government of USA for global media surveillance. WikiLeaks and friends created a very informative map of snooping activities by governments across the world.


And, the OpenStreetMap community went ahead and mapped a secret data center of the National Security Agency of USA being contructed outside Salt Lake City, Utah.


Continue reading

I recently rewrote the maps portal for the Karnataka Learning Partnership. The map is an important part of our project, action and process because it serves as the pivot point of navigation. I will quickly talk about the data and tools before we discuss the design aspects.

We have a fairly large dataset of schools in Karnataka. The name of the school, location, number of girls and boys etc. in a database. Fortunately, the data was clean and properly stored in a PostgreSQL database with PostGIS extensions. Most of my task was to modify the API to throw GeoJSON to the client using the ST_AsGeoJSON function and export the data.

We used the amazing Leaflet.js library and a wide range of plugins. Most of the UI elements are from Twitter’s Bootstrap. I cannot say that Leaflet and Bootstrap works well all the time, but in case you want to add something on the map, make sure that you use extend leaflet’s control layer. For instance, see how we added the Stop Drawing control.

We made several design decisions mostly inspired by the series of blog posts by Brian Timoney.


Continue reading