Skip to main content

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…

Comments

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…
Hi..

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

Please help me to make the code for this function.

Thankz in advance.
Anonymous 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)

Regards,
Ben
Unknown said…
Dear Bjøorn

Is it possible to provide the content of this link http://thematicmapping.org/openlayers/piecharts_geojson_google_chart.php
I cant access it, i wanted to take a look.

Regards
Zeferino
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

Popular posts from this blog

Creating a WebGL Earth with three.js

This blog post will show you how to create a WebGL Earth with three.js , a great JavaScript library which helps you to go 3D in the browser. I was surprised how easy it seemed when reading a blog post  by Jerome Etienne . So I decided to give it a try using earth textures  from one of my favourite cartographers, Tom Patterson . WebGL is a JavaScript API for rendering interactive 3D graphics in modern web browsers without the use of plug-ins. Three.js is built on top of WebGL, and allows you to create complex 3D scenes with a few lines of JavaScript. If your browser supports WebGL you should see a rotating Earth below: [ Fullscreen ] To be able to display something with three.js, you need three things: a scene, a camera and a renderer. var width  = window.innerWidth,     height = window.innerHeight; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000); camera.position.z = 1.5; var rende...

Thematic Mapping Engine

It's time to introduce the Thematic Mapping Engine (TME). In my previous blog posts, I've shown various techniques of how geobrowsers can be used for thematic mapping. The goal has been to explore the possibilites and to make these techniques available to a wider audience. The Tematic Mapping Engine provides an easy-to-use web interface where you can create visually appealing maps on-the-fly. So far only prism maps are supported, but other thematic mapping techniques will be added in the upcoming weeks. The engine returns a KMZ file that you can open in Google Earth or download to your computer. My primary data source is UNdata . The above visualisation is generated by TME ( download KMZ ) and shows child mortaility in the world ( UNdata ). The Thematic Mapping Engine is also an example of what you can achieve with open source tools and datasets in the public domain: A world border dataset is loaded into a MySQL database . The same database contains tables with statistics ...

Creating 3D terrains with Cesium

Previously, I’ve used three.js to create 3D terrain maps in the browser ( 1 , 2 , 3 , 4 , 5 , 6 ). It worked great for smaller areas, but three.js doesn’t have built-in support for tiling and advanced LOD algorithms needed to render large terrains. So I decided to take Cesium for a spin. Cesium is a JavaScript library for creating 3D globes and 2D maps in the browser without a plugin. Like three.js, it uses WebGL for hardware-accelerated graphics. Cesium allows you to add your own terrain data, and this blog post will show you how. Impressed by the terrain rendering in @CesiumJS - with a 10m elevation model for Norway! Farewell Google Earth. pic.twitter.com/RQKvfu2hBb — Bjørn Sandvik (@thematicmapping) October 4, 2014 Compared to  the dying Google Earth plugin , it's quite complicated to get started with Cesium. The source code is well documented and the live coding Sandcastle is great, but there is a lack of tutorials  and my development slows down when ...