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…


Muad'Dib 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.

Neezan said...


your work is very good. Everyone, I think can use it.

Please help me to make the code for this function.

Thankz in advance.

Unknown said...

Hi, Bjørn!

Very nice work you are doing. Thank you for sharing with the community.

I have few questions BUT first let me tell you that i am new in the field and i have just had contact with you blog so forgive me is i ask you something that you have already presented here.

1. What is the difference between the Google Maps API and the Thematic Mapping Engine?

2. Using JAVA as a programming language can i use any of these technologies (the one i asked in 1)?

3. Inorder to have a charts in a map from where do i start (using Java, geoServer, postgreSQL)


Unknown said...

Dear Bjøorn

Is it possible to provide the content of this link
I cant access it, i wanted to take a look.


Bjørn Sandvik said...

Hi Zeferino,

The page you`re looking for was moved to this location.

Unknown said...

Hi Bjørn,

I already had access to the wonderful work.

Thank you.

Anonymous said...

Hello All,
I am very much impressed by the job done.
Unfortunately , I am like an end user.
I just would like to map pie charts on Google Earth by using some csv or excel data table.
Are there any kind of freeware or software for this purpose ?
Can some body advise ?

pp said...

Any idea about barchart in openlayers