Plugin to show geographical (world, continent, country) maps: library integration ideas

[mattab]

We would like to have a map feature in Piwik, using an open source map solution.

After lots of research, it seems that the best technical solution would be to use SVG maps from Wikipedia project, which are of high quality and accuracy.

Here are a few links:

• List of maps available through wikipedia http://en.wikipedia.org/wiki/Wikipedia:Blank_maps

  http://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_Europe

  http://commons.wikimedia.org/wiki/Category:SVG_maps_of_France

• Examples of a few SVG files from wikipedia http://upload.wikimedia.org/wikipedia/commons/b/b8/Blank_Map_of_Europe_-w_boundaries.svg

http://upload.wikimedia.org/wikipedia/commons/b/b8/Blank_Map_of_Europe_-w_boundaries.svg

• An example of a nice user interaction (color scaling, Hover tooltip with metrics details): http://www.redhat.com/about/where-is-open-source/activity/ -- but we don't want to use google maps of course.
• Use of interactive SVG maps and web services to monitor CMS tracker http://www.ba.infn.it/~zito/xml/svgmonitoring.html

Next steps:

• specify the user interaction feature set: world view + ability to zoom into a country to see metrics by city or region, possibility to zoom out from country to world, tooltip on hover to show metrics, possibility to change the metrics being plotted (visits, unique visitors, time on site, etc.)
• how to bundle the SVG maps in Piwik? write a script that gets them from wikipedia? download a bundle of them from wikipedia (is it doable)?
• user interface: colors to use, color scaling, tooltip design, integration in the existing Piwik UI, etc.
• level of details by country? GeoIP gives us: country, region in the country, city. Can we plot on a map this level of detail for each country? or only specific country for which we have the SVG map?

If you are interested to contribute, please post a comment

[mattab]

SVG sounds like the best technical approach, but there might be other solutions; from email: worldkit or modestmaps.

[robocoder]

dojox.charting.maps is an IBM contribution for (upcoming) dojo 1.5 release.

[mattab]

any more info on this? is this something we could re-use for Piwik? feature set? demo? :)

[gka]

Yes, I would really like to contribute to this feature and also got a couple of ideas how to implement this.

graphics platform My favorite graphics platform would be the flashplayer, but after a little more thinking I now like the idea of creating a platform independent plugin, which allows easy switching between svg, canvas and flash depending on the browser capabilities. I experimented a lot with browser-based maps and found that currently the flashplayer offers the best rendering performance, but it is possible that this might change in the near future.

map source Instead of using an existing svg map I would suggest to create the map at runtime out of prepared raw country shape data. this offers way more flexibility in data visualization, because one is able to place things on excact geographic locations (think of a bubble chart like in ga). There are a lot of free shapefiles out there and it's easy to project the raw geodata into nice looking maps. I did a lot practical experimentations on this topic during the last months.

My current plan is to write a generic and free map visualization library (the first one will be in flash) that one could easy integrate in piwik plugins later on. I'll post my progresses here.

[mattab]

Greg, creating maps specifically for Piwik means that we will have to maintain the maps ourselves. The choice of SVG was interesting because many authoritative sources are using SVG now (eg wikipedia).

Also, I don't think we need to be able to switch between maps technologies... instead, can we decide on a map solution?

See also ticket #1258

[gka]

The problem of deciding for one map solution is that there still is no perfect solution available. Flash meets a lot of the requirements, but is not an complete open technology (though SWF is an open standard and the flex sdk is released under an open source license). SVG has it's own adventages like high-quality output for print but, still, it isn't supported by all major browsers and even when supported there are still several performance issues when it comes to interactivity and animation. Wikipedia is one of the major users of the SVG technology, right, but they have to provide PNG alternatives of their SVG images to reach all users. This is not as simple if you want to build an interactive map visualization.

What do you mean by maintaining the maps? Keeping it correct when it comes to political changes in the world? I think that wikipedia uses Mapnik to create their SVG maps, and mapnik itself depends on shapefiles which provides the map data and the PROJ.4 library which provides the projection algorithms. The purpose of mapnik is to output static map images, so I wanted to skip the mapnik part. So, what I did the last month was to experiment with the reading, projection and rendering of shapefiles in flash, and it comes out that this works quite good. Therefor I also ported the PROJ.4 library into ActionScript, which gives us the complete freedom of projections.

But instead of any long talking I think I'll build a simple example of a map visualization in flash and post it here. I'm kind of positive that this will meet all requirements but I understand that it sounds like too much work for you.

[gka]

Hi matt,

I created the first prototype of a flash-based map plugin for piwik.

[1514]

[mattab]

This has been implemented in flash, in #1514