Cours de webmapping

En automne dernier, j’ai préparé un cours d’introduction au webmapping, dans une partie de cours donné à l’ULg – Arlon Campus Environnement. Il y a une première partie d’introduction, avec quelques éléments de cartographie et de sémiologie, puis deux tutoriels / exemples avec OpenLayers et MapServer et enfin une dernière partie sur OpenStreetMap.

Tout est accessible sur un site dédié: http://webmapping.scge.ulg.ac.be/. Il y a les deux tutoriels à suivre et les présentations du cours, en odp et pdf, sous licence Creative Commons By-Nc-Sa!

Des graphiques en fromages (pie-charts) avec MapServer

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:

  1. de spécifier le “TYPE” de couche comme “CHART” dans l’objet “LAYER”
  2. d’ajouter la ligne “PROCESSING “CHART_TYPE=PIE” dans l’objet “LAYER”
  3. 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.

Afficher un raster avec OpenLayers SANS MapServer

Les fonds géographiques qui peuvent être affichées dans OpenLayers sont habituellement des WMS ou des services commerciaux particuliers (GoogleMaps, BingMaps,…). Contrairement aux données vectorielles, afficher ses propres données raster est a priori plus difficile… La solution la plus “pro” est d’utiliser un serveur cartographique, comme MapServer, qui permet de créer ses propres WMS.

Mais, un serveur cartographique, forcément, ça doit être installé sur le serveur d’un site web. L’installation est facile, mais il faut que votre hébergeur soit d’accord de l’héberger ou tout simplement que vous puissiez le contacter, ce qui n’est pas gagné d’avance!

Pour afficher un raster dans une webmap OpenLayers SANS utiliser MapServer ou un autre serveur carto, il existe une petite fonction OpenLayers peu connue: OpenLayers.Layer.Image(). Cette fonction peut être utilisée pour afficher simplement une image non géoréférencée sur votre carte. D’ailleurs le fichier du raster ne doit pas être nécessairement géoréférencé dans le fichier (par ex. comme GeoTiff ou d’autres formats géographiques) et un format comme PNG ou JPEG est possible.

Pour utiliser OpenLayers.Layer.Image(), il faut spécifier le nom de l’image, son chemin d’accès, l’extent (qui joue le rôle du géoréférencement) et la taille en pixels de l’image. Le géoréférencement se fait alors dans la fonction OpenLayers (avec OpenLayers.Bounds) et doit bien sûr être connu (ce sont les coordonnées des 4 coins de l’image: lx (=lower x), ly (=lower y), ux (=upper x) & uy (=upper y)):

 Image = new OpenLayers.Layer.Image('Raster',
           './data/raster.png', 
           new OpenLayers.Bounds(lx,ly,ux,uy),
           new OpenLayers.Size(x,y)
           );

Bien sûr, le raster doit avoir été projeté dans le même système de coordonnées que la webmap. Et ce n’est certainement pas une solution aussi “propre”, rapide et puissante que d’utiliser MapServer. Mais pour afficher de petits rasters, cela fonctionne plutôt bien. Un exemple en cliquant sur l’image ci-dessous:

img1