Dans cet article, nous verrons comment afficher des graphiques en fromages (pie-charts) sur une carte en utilisant MapServer. Nous y verrons aussi une petite astuce pour intégrer cette couche MapServer dans une carte faite en OpenLayers de manière optimale, avec le paramètre “gutter”.
1) Des pie-charts avec MapServer
MapServer est un moteur cartographique permettant d’afficher des données géographiques (rasters et vectorielles) pour des cartes sur le web. Mais il permet aussi d’afficher les données attributaires d’une couche vectorielle (par ex. un shapefile) sous forme de graphiques géolocalisés, en forme de fromages ou de colonnes. Tout shapefile vient en effet avec une table d’attributs (le fichier dbf) qui contient des informations liées aux éléments géographiques.
J’ai réalisé ici une carte de la part d’énergie renouvelable dans la consommation électrique par pays européen. Les données de base ont été récupérées sur cette page pour la part d’énergie renouvelable et cette page pour la consommation totale d’électricité. Elles ont été ensuite liées par jointure de table à une couche shapefile des pays européens (dans QGIS). Le shapefile a finalement été enregistré avec ces informations jointes par pays, dans des champs de la table d’attributs.
Voici le fichier .MAP de configuration de MapServer qui lit le shapefile et créée les pie charts. Le même shapefile est ajouté deux fois, une première fois pour afficher simplement l’information géographique et une deuxième fois pour afficher les pie-charts. Nous nous concentrons sur la partie qui permet d’afficher les pie-charts, donc dans le deuxième objet LAYER. Pour que MapServer affiche les données attributaires de la couche sous forme de pie-charts plutôt que l’information géographique, il suffit:
- de spécifier le “TYPE” de couche comme “CHART” dans l’objet “LAYER”
- d’ajouter la ligne “PROCESSING “CHART_TYPE=PIE” dans l’objet “LAYER”
- d’ajouter des objets “CLASS” qui contiennent des objets “STYLE” puis “SIZE” qui renvoient vers le nom du champ de la table d’attributs que l’on veut afficher mis entre crochets “”. On va ensuite attribuer une couleur du graphique à ce champ avec un objet “COLOR”.
On peut également ajouter la ligne PROCESSING "CHART_SIZE_RANGE=table_ELEC 10 50 0 50000" qui permet de moduler la taille des graphiques en fromages selon le champ de la table d’attributs « table_ELEC ». Le résultat de la carte MapServer peut être vu ici.
2) Intégrer cette couche dans OpenLayers
Une fois que cette couche est mapserverisée, elle a été ajoutée en tant que couche WMS dans une carte OpenLayers avec la ligne suivante :
var europe_elec = new OpenLayers.Layer.WMS( "Pie charts","http://localhost/cgi-bin/mapserv?", {map:'/var/www/site/mysite/blog/mapserver_piechart/europe_elec.map', layers: 'europe_elec', transparent:true}, {isBaseLayer: false, projection: proj});
Ce qui donne ceci comme résultat dans une petite carte OpenLayers. La taille des pie-charts se réfère à la consommation totale d’électricité et la part de l’énergie renouvelable dans la production électrique est en vert:
ou en grand-écran.
Il restait malgré tout une astuce qui n’a pas été facile à trouver et que Google n’a pas pu aider à solutionner! En effet, dans la carte OpenLayers précédente, la couche créée avec MapServer est bien ajoutée mais certains pie-charts manquent (par ex. en Espagne, mais cela dépend du navigateur et de votre écran) et cela change pour différents niveaux de zoom. C’est vraiment un problème très étrange avec aucun message d’erreur dans la console Javascript de la carte, ni dans le fichier d’erreur de MapServer. J’ai cherché un bon moment du côté de MapServer si un paramètre manquait dans le fichier .MAP, en essayant différents paramètres « PROCESSING », mais c’est finalement du côté d’OpenLayers que se trouve la solution. Il manque simplement le paramètre “gutter”, qui rajoute une certaine marge aux tuiles délivrées par MapServer. Certains pie-charts se trouvent en effet aux bords des tuiles de MapServer et y sont cachées. Il suffit alors de rajouter un certain nombre de pixels (ici, 50) avec ce paramètre gutter, soit:
var europe_elec = new OpenLayers.Layer.WMS( "Pie charts","http://localhost/cgi-bin/mapserv?", {map:'/var/www/site/mysite/blog/mapserver_piechart/europe_elec.map', layers: 'europe_elec', transparent:true}, {isBaseLayer: false, projection: proj, gutter:50});
Ce qui donne:
ou en grand-écran.