August '10

17

Posted by

in Development, Plugins

Comments: 15 Comments

Open Source World Map for Piwik

UPDATE: As of Piwik 1.11 in March 2013, we have released new Maps that are now written in SVG and are fully open source.

The maps also include Country, Region and City views, leveraging Piwik Geo Location capabilities.

Learn more in: Visitors World Map, and in the Real Time Visitors Map.

Content below this line is out of date.

Piwik is now happy to present to our fans the ‘map view’ feature, allowing you to visually see the countries in which your visitors come from on a world map.

The new plugin made its way into Piwik core since version 0.8 and is activated by default since version 0.9. Here is a brief list of the currently supported features:

  • The widget displays a zoomable world map in which the countries are colored according to the selected metric, e.g. the number of visitors.
  • It is possible to change the displayed metric using a Select box in the footer bar of the widget.
  • A resizable legend improves the usablity as it helps to understand the color scale.
  • Users are able look at the map in fullscreen mode for better viewing experience on smaller displays.
  • Like the other flash-based visualization widgets the map supports image export (PNG).

Implementation details

The map is built from scratch using the Open Source Adobe Flex SDK and the free FlashDevelop IDE. It basically consists of two parts: a preprocessor for the map data (AIR) and a fast map renderer (Flash). The following figure illustrates the different functions:

The map source is taken from  GeoCommons (an open community for geographic data) and was initially created by Emily Sciarillo, who released it under the Creative Commons license. The source contains a complete set of raw country boundary data which is linked to the corresponding iso codes. The map projection is done using the free as3proj library. Out of the many possible projection formulas we chose the Robinson projection, which shows a very beautiful world map. After projecting the map, the country outlines were simplified, which reduced the data filesize about 90% (from 2mb to 212kb) and results in faster rendering. In order to reduce the clients CPU load these complex calculations were rolled out into a separate application. The results are then packed in the Action Message Format (AMF) which produces a compact and fast to read binary files. The rendering is done using Flash, which is (yet) the only technology that provides fast vector drawing on nearly any major browser and platform. You can find more details on flash-based map rendering at the map author Gregor Aisch personal blog.

Use of the new Metadata API

The map rendering SWF requests the available metrics using the getProcessedReport function of the new Metadata API. The Metadata API is truly a great move forward in the Piwik plugin development as it eleminates the need for manual processing of raw Piwik metrics (like calculating the bounce rate or average time on site from several raw metrics) and also simplifies translations as all values are presented in localized format.

Possible Future Developments

Right now the map is in a very basic state, but we want to present some of our ideas for future versions of the map:

  • Display of a detailed country view with the ability to compare sub-regions (like states in USA) and visitors cities. These features depend on the GeoIP plugin, which will is a high priority feature right after the 1.0 release. You are invited to participate in the design phase over here.
  • Support for different client-side rendering technologies like SVG or HTML5 canvas.
  • Support for server-side rendering for adding maps into PDF reports.
  • Add a map view to the Live! plugin.

If you have any further ideas  on what you’d like to see, feel free to tell us in the comment section or just open a new feature request in the Piwik Developer Zone.

Open Source

The map is released under GPLv3. You find the source of both the map preprocessor and the map renderer in Piwik SVN.

 

About author
piwik team member

Gregor Aisch

Gregor is a visualization architect and interactive news developer from Germany, and the Piwik team ‘Visualization guru’. He contributed for example the fantastic Visitor Maps and Real time Maps in Piwik.

Like what you read?

Subscribe to our rss feed: Posts or you can Suggest a topic to write about in the blog or See list of Features

  1. sensualite Says:

    November 25, 2010 11:39 am

    Open Source World Map for Piwik

  2. Le Mag Says:

    November 17, 2010 11:31 pm

    I wish a more accurate description. A country and its major cities.

  3. October 25, 2010 4:12 pm

    I enjoy using piwik. I am in the process to migrate off Google and into piwik. Customers are starting to question Google business.

  4. October 21, 2010 5:24 pm

    Waw, it looks good ! I found that Piwik is a very good tool if you don’t want to use online tools such as Google Analytics or Xiti (for France)

  5. sim so dep Says:

    October 12, 2010 3:48 pm

    ve Open Source Products on Adobe Flex SDK

  6. October 8, 2010 1:02 pm

    Great idea, and I really appreciate the efforts that made it possible.
    But to add just a little grain of salt – could you embolish the contours of the countries where few or no visitors come from just a bit so they can be recognized?
    In Firefox, on most of the days the whole map looks completely blank to me.

  7. Gregor Says:

    September 29, 2010 5:29 pm

    Yes, you can change the HSL color scale of the world map, which is defined in UserCountryMap.php. The ranges for hue,saturation and lightness are [0..360], [0..1] and [0..1].

    // definition of the color scale
    $view->hueMin = 218;
    $view->hueMax = 216;
    $view->satMin = "0.22";
    $view->satMax = "0.9";
    $view->lgtMin = ".97";
    $view->lgtMax = ".4";

  8. Daniel Vogt Says:

    September 29, 2010 4:09 pm

    What about customization? Can I easily change the look-and-feel of the map in order to fit its design to a custom theme?

  9. September 14, 2010 4:56 pm

    You are right. They aren’t having enough of an effect. We probably should use a lot more.

  10. aintel7 Says:

    September 6, 2010 8:06 am

    Det var to dage siden espresso maskine styrtede ned. Så er der noget andet skete. Ved det ikke. Igen er det brød. For meget falder. På jorden.

  11. Matthieu Says:

    August 29, 2010 12:11 am
  12. Rajkumar Says:

    August 28, 2010 7:05 am

    Hi, i’ve recently started using PIWIK in my site, It is great.
    But i face one problem with the map. My home country is India, when i check the Dashboard, it is displayed as United States.

    While PIWIK installation, i selected my location under – Asia – Calcutta.

    What might be the problem, Kindly help me.

  13. Gregor Says:

    August 24, 2010 6:46 pm

    The map plugin should work in Piwik 0.8, but I’m not sure about any older releases.

  14. August 24, 2010 5:36 pm

    A great feature to have a view of the countries in which your visitors come from. Is it neccessary to make an update to version 0.9 or run this plugin also with further versions?

  15. ShopShip Says:

    August 20, 2010 1:06 pm

    Tx a lot for all your job, this World Map roxx !!!

Leave a Reply

Post Comment