Sunday, 20 April 2008

Google Chart and OpenLayers Mashup

In a previous blog post, I demonstrated the new thematic map feature of the Google Chart API. I was not too impressed with the choropleth map it returned. A greater advantage of this API is the possibility to put charts on top of web maps. I here demonstrate how this can be achieved using OpenLayers.

This map shows the total population and the age distribution in each country of the world in 2005. Instead of proportional circles, I’m here using pie charts to symbolise the population. The chart size is mathematically scaled in direct proportion of the total population. The pie chart itself shows the age distribution as shown in the right figure.

The chart URL’s are generated with JavaScript from parameters stored in a GeoJSON FeatureCollection, and the chart images are loaded using the OpenLayers API. By loading the images into a vector layer (even though it sounds a bit strange), you have access to the new styling capabilities of OpenLayers 2.6.

There are some performance issues since about 200 pie chart images have to be downloaded for each zoom level. Even though Google recently removed the limit on the number of daily requests, I guess they’re not too happy with this way of utilising the API…

2 comments:

Landry said...

First, forgive me for my very poor english. I'm a french teacher of History and Geography.

Your blog is wonderful !

The choropleth polygons map with G Earth is amazing.

The thematic map with Open Layers too.

Don't you think that information on age distribution could be better with a progression of colour intensity like yellow (0-14) orange (15-59) red (>60) (or green yellow red).

Other pb: When we want to see the all world map, some pie-chart are invisible.

Is it possible to link the size of the pie-charts with the level of zoom ??

Congratulation for this research about open thematic map !

Bjørn Sandvik said...

Hi Landry,

Thanks for your feedback. I'm happy that you like my work.

I've just published a new post showing pie charts in Google Earth. The colours are here interpolated from a orange base colour. I'm a bit careful using red, as it's often considered as "danger" (even though a large old population might be a big challenge...).

Since the pie charts are mathematically scaled in direct proportion of the total population, some charts will be invisible due to the large populations in India and China. On way to avoid this is to specify a minimum size, but then the charts wouldn't be true proportional any more.

The chart size is actually linked to the level of zoom. The size increases by the same fraction as the rest of the map.

By clicking a pie chart in Google Earth you can see a larger version of the chart. A similar feature could be added to the OpenLayers version.