Utiliser Google chart API dans TileMill: trop facile!

Suis à mes essais avec les produits MapBox, je voulais faire un démo très simple dans un contexte bien québécois pour échanger avec mes clients ici au Canada.  En tombant sur ce post(Building Google Charts for Interactivity in TillMile) sur le site de MapBox, j'ai eu l'envie de faire un peu la même chose mais avec un Pie Chart.

Pour y arriver, j'ai utilisé des données publiques sur les élections provinciales de 2008 trouvées sur le site du Directeur Général des élections du Québec.  J'ai du faire quelques manipulations avec les données Shapefiles trouvées sur ce même site, puisque que je n'avais que les sections de votes(plus petite unité). Je devais donc faire des regroupements pour pouvoir cartographier le niveau hiérarchique supérieur(circonscription électorale).   Je vous épargne les détails mais j'ai dû utiliser QuantumGIS,  Google Refine pour nettoyer les données de base,  et enfin une transformation GeoKettle pour lier, valider et comptabiliser un gagnant par section de votes.

Une fois la carte construite, j'ai monté une carte interactive avec TileMill et complété la présentation du démo avec l'API Wax qui me permet d'afficher la carte interactive sur le Web (installation de TileStream Server requise).  Quelques lignes de codes seulement sont requises.  Le gros du travail était de construire le URL pour faire l'appel de Google chart API.    Pour faire l'interaction et afficher le "pie chart" j'ai construit la chaîne de caractères URL à l'aide des données JSON encodées en parallèle à chaque tuile du cache MBTiles(adresse URL doit être spécifiée avec la valeur 'grids').

Les données sont transférées côté client à l'aide d'une spécification UTFGrid ingénieuse et sont très facilement récupérables.

var tilejson = {
  tilejson: '1.0.0',
  scheme: 'tms',
  legend:'Cette carte non officielle et incomplète, est un démo fait par Mgeospatial.  Elle a été construite à partir des données sur les résultats des élections générales 2008, téléchargées sur le site Web du <a href="http://www2.electionsquebec.qc.ca/corpo/francais/elections-generales-provincial.asp?section=resultats_gen&mode=n2&even=2008#n2" target="_blank">Directeur général des élections</a><br/><img src="http://mapcoop.org/www-demo/demo/dge.png" width="200" height="40"/>',
  attribution: '<a href="http://www.mgeospatial.com"><img src="http://www.mgeospatial.com/img/logo-300x80.png" alt="" width="100" height="20" /></a>',
  tiles: ['http://mapcoop.org/1.0.0/elect2008_171425/{z}/{x}/{y}.png'],
  grids: ['http://mapcoop.org/1.0.0/elect2008_171425/{z}/{x}/{y}.grid.json'],
  formatter: function(options, data) { 

  return "<img src='http://chart.apis.google.com/chart?chf=a,s,000000E6|bg,s,D5DBDB&chxs=0,676767,11.833&chxt=x&chs=275x148&cht=p3&chco=c35855|616580|638a63|fcad72&chds=0,100&chd=t:"+data.PLQ+","+data.PQ+","+data.ADQ+","+data.Q_SOL+"&chdl="+data.PLQ+"+votes|"+data.PQ+"+votes|"+data.ADQ+"+votes|"+data.Q_SOL+"votes&chdlp=t&chp=1.1&chl=PLQ|PQ|AQD|QS&chma=|21,15&chtt=Élection+2008+par+section+&chts=676767,12.167'/>"}

  };

Je me suis aussi amusé à tester des éléments cartographiques en 3D(fonctionnalité de Mapnik) simplement pour le plaisir.  Le résultat est à mon sens assez concluant.

Un essai sérieux avec TileMill

Le 16 février 2011 la firme de developmentseed (Washington, DC) très impliqué dans les projets développement international, a lancé TileMill un nouveau produit de conception de cartes interactives pour le Web.  Je classerais cette boîte très branchée dans la même lignée que la firme de design Web Stamen (San Francisco) avec son API Polymap .  Ces deux firmes sont très actives actuellement dans le développement de projets Open source en Web GIS.

Il est vrai qu'il s'agit d'une solution toute jeune qui devra faire ses preuves, mais à mon avis, elle révolutionne un peu nos façons de faire en Web mapping. Cette plate-forme s’adresse une nouvelle clientèle du Web mapping, celle des codeurs et designers Web puisqu'elle utilise un scripting de carte(Carto) basé sur les CSS ( Map CSS, juillet 2009, GeoServer et son module CSSGSS de Cartogen ).   Pour l'instant, peu de formats de données sources sont supportés (shapefiles, Postgis, SQLite) par contre depuis la version 0.4, on a accès à tous les systèmes de références EPSG.

L'outil TileMill permet donc à des habitués des CSS de construire une carte très rapidement, de la 'tuiler' dans un fichier SQLite( MBTiles)et de la diffuser avec TileStream Server et l'API Wax tool.

J’ai donc installé et testé TileMill et TileStream Server ( plate-forme node.js). Je dois avouer que beaucoup de plaisir à construire mes premières cartes.

Pour ceux qui seront du FOSS4g 2011 à Denver, il y aura un Workshop sur le sujet donné entre autre par @springmeyer.  J'y serai sans faute!

Projet à suivre...