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.

Geofabrik: des données OpenStreetMap en shapefiles

Il y a quelques jours, je cherchais des données géographiques pour faire rapidement un fond cartographique à cheval sur la Belgique, la France et le Luxembourg. S’il est relativement facile de trouver des shapefiles par pays sur des sites comme DIVA-GIS, c’est plus difficile de trouver des shapefiles trans-frontières, avec les mêmes attributs et sur lesquels la même symbologie peut ếtre appliquée.

D’où l’idée de passer par OpenStreetMap, qui devient sans doute la base de données géographiques vectorielles la plus complète et la plus accessible du monde! Une rapide recherche me fait tomber sur le site de Geofabrik, une entreprise qui propose des shapefiles issus d’OpenStreetMap par pays ou sous-régions. Et hop, on télécharge des shapefiles du monde entier qui sont toujours avec les mêmes attributs en un rien de temps! Il y a certainement moyen d’exporter les données d’OpenStreetMap par d’autres moyen ou de directement les importer dans ArcGIS ou QGIS, mais la solution de Geofabrik est simple et rapide!

Après une sélection des données affichées (par ex., seules les autoroutes et les grand-routes sont affichées parmi les voiries), voilà ce que cela donne avec QGIS:

Carte_Qgis_geofabrik

Il reste des imperfections dans les données OpenStreetMap dans cette carte, comme des routes non complètes (par ex. en Ardenne Française), des données manquantes ou incorrectes. Néanmoins, dans d’autres régions du monde, OpenStreetMap est la meilleure source de données géographique existantes en terme de complétude et surtout d’actualisation.

Des WMS avec le nouveau géoportail wallon

Début février 2013, la région wallonne a sorti son nouveau géoportail. Il était temps, vu que les divers services étaient éparpillés sur différent viewers et qu’il n’était pas facile de s’y retrouver. Le nouveau géoportail est d’ailleurs en pleine évolution depuis février et on peut s’inscrire à une newsletter pour être au courant des deniers services.

Les données seront maintenant centralisées et surtout distribuées au format INSPIRE, respectant les standards de l’OGC (Open Geospatial Consortium). Il y a pour l’instant 1 seul WMS disponible: les orthophotoplans 2009-2010. On trouve les accès de ce WMS sur la page d’accueil du géoportail sous l’onglet “Géoservices”. Voici 3 manières de visualiser ce WMS avec des solutions libres:

1) Avec un navigateur Internet

Accès direct par le navigateur, qui est en fait une requête MapServer:

http://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2009_2010/MapServer/WMSServer?request=GetMap&service=WMS&version=1.3.0&bbox=38841,18084,300030,170095&width=400&height=300&styles=&crs=EPSG:31370&format=image/png&layers=0&mode=map

Décomposons la requête. D’abord il y a la base:

http://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2009_2010/MapServer/WMSServer?

Puis des paramètres:

  • request=GetMap& : Càd qu’on veut montrer la donnée sous forme de carte
  • service=WMS& : fournie en WMS
  • version=1.3.0& : version du WMS
  • bbox=38841,18084,300030,170095& : l’étendue (xmin, ymin, xmax, ymax) en Lambert Belge 1972 de la requête. Cela doit être contenu dans l’étendue de la Wallonie dans ce système de coordonnées. Les chiffres ici contiennent l’ensemble du territoire wallon.
  • width=400& : la largeur de l’image
  • height=300& : la hauteur de l’image
  • styles=& : paramètre nécessaire mais vide
  • crs=EPSG:31370& : le système de coordonnées de la couche.
  • format=image/png& : le format de fichier demandé. D’autres format sont possibles (JPEG, etc.)
  • layers=0& : le nom de la couche qui est « 0 »
  • mode=map : déclare que la donnée doit être rendue sous forme d’une carte

Avec OpenLayers

Avec l’ajout de la couche comme suit: var Orthophotos= new OpenLayers.Layer.WMS("Orthophotos","http://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2009_2010/MapServer/WMSServer?",{layers: '0'},{projection:projLB});

 

Et avec OpenLayers 3

Notez le meilleur rendu lorsqu’on zoome/dézomme avec OpenLayers 3 par rapport à OpenLayers 2: le chargement des tuiles apparait plus fluide.

var orthophotos = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2009_2010/MapServer/WMSServer?',
params: {LAYERS: '0'}
})
});
map.addLayer(orthophotos);

Avec QGIS

1. Cliquer sur l’icône « Ajouter une couche WMS »

Cliquer sur l’icône « Ajouter une couche WMS »

qgis1

2. Dans la boite de dialogue qui apparait, cliquer sur « Nouveau »

3. Introduire un nom de votre choix dans « Nom », et l’adresse suivante dans « URL » : http://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2009_2010/MapServer/WMSServer?request=GetCapabilities&service=WMS. Ignorer les demandes de Nom d’utilisateur et de mot de passe, il n’y en a pas besoin pour le WMS. Cliquer sur OK pour sauvegarder dans QGIS la configuration du WMS.

qgis2

4. Cliquer ensuite sur « Connexion » pour se connecter au WMS. La couche apparait dans la boite de dialogue. Il n’y qu’une seule couche avec l’ID « 0 ». Cliquer sur cette couche dans la boite de dialogue. Laisser l’encodage en PNG (au choix) mais il faut absolument changer le système de projection qui est resté au WGS 84 par défaut et qui doit être modifié en Lambert Belge 1972, avec le code EPSG : 31370.

qgis3

5. On peut enfin ajouter la couche en cliquant sur « Ajouter » en bas à droite. Et voilà !

Une webmap simple avec Leaflet

Leaflet est une petite librairie Javascript de webmapping qui mise son succès sur sa simplicité et sa facilité d’utilisation. Pour bien commencer avec Leaflet, premier réflexe: un petit tour sur geotribu.net avec un tutoriel en français sur Leaflet dont je me suis inspiré pour cet article:

Le but de cet article est de traduire une webmap simple faite en OpenLayers contenant une couche vectorielle de points et des popups s’affichant sur ces points. Dans les deux cartes ci-dessous, celle de gauche est la carte construite avec OpenLayers et celle de droite avec Leaflet.

Le but de cet article est de traduire une webmap simple faite en OpenLayers contenant une couche vectorielle de points et des popups s’affichant sur ces points. Dans les deux cartes ci-dessous, celle de gauche est la carte construite avec OpenLayers et celle de droite avec Leaflet.

OpenLayers (voir la carte en + grand) Leaflet (voir la carte en + grand)

Voyons en détail la carte Leaflet!

Objet map

Tout d’abord, une ligne pour l’objet map, dans lequel on spécifie le centre de la carte en lat./long. et le niveau de zoom :

var map = L.map('map').setView([48, 2], 4);

GoogleMaps et Leaflet

Utiliser GoogleMaps avec Leaflet est possible en utilisant des plugins, mais apparait assez compliqué. De plus, GoogleMaps va restreindre son utilisation avec Leaflet en cas de grosse utilisation (contrairement à OpenLayers ?). J’ai donc choisi de prendre un fond Cloudmade comme ce qui est suggéré dans beaucoup d’autres tutoriels.

Cloudmade

!EDIT Juin 2014! Cloudmade a cessé ses services au 1er mai 2014. J’ai remplacé le fond cartographique par OpenStreetMap. De beaux fonds cartographiques sont disponibles ailleurs, notamment chez Mapbox.

GeoJSON

Mais comment ajouter une couche vectorielle avec Leaflet ? Avec OpenLayers, j’ai l’habitude d’ajouter des données vectorielles au format GML. Il faut plutôt utiliser le format GeoJSON avec Leaflet. On peut facilement exporter des données vectorielles en GeoJSON avec QGIS. Le système de projection “par défaut” avec Leaflet est le WGS84 (EPSG:4123).

Pour ajouter les données en JSON, j’ai suivi le tuto de Leaflet et cette page.

D’abord le fichier GeoJSON est chargé dans l’entête (<head>) du fichier html :

<script type="text/javascript" src="institutions.geojson.js"></script>

Ensuite, on appelle simplement ce fichier avec une seule ligne :

L.geoJson(institutions).addTo(map);

et les points s’affichent sur la carte ! Pour créer des popups sur ces points et lier l’information contenue dans le fichier GeoJSON, on remplace la dernière ligne de code par :

	L.geoJson(institutions, {
	    onEachFeature: function (feature, layer) {
		layer.bindPopup("<div id='popup'>" + feature.properties.UNIT + "</div><div id='popup_wp'>" + feature.properties.WP + "</div><div id='popup_partner'>MACSUR partner #" + feature.properties.PARTNER_FO +"</div>");
	    }
	}).addTo(map);

Et voilà, un code avec Leaflet beaucoup plus simple qu’avec OpenLayers, et surtout un très bon rendu graphique mais des fonctionnalités encore très limitées pour des webmaps plus complexes.

Le plugin OpenLayers dans QGIS

Un des avantages des logiciels open-source sur les logiciels propriétaires, c’est la possibilité de personnaliser son programme avec des plugins développés par la communauté, comme par ex. avec Firefox et ses nombreux plugins. Pour QGIS, le projet opensource le plus avancé en matière de SIG, un plugin à retenir est le plugin OpenLayers, qui permet d’afficher les données de plusieurs sources de données propriétaires et libres (GoogleMaps, BingMaps, OpenStreetMap,…) dans QGIS.

Une capture d’écran ci-dessous avec BingMaps comme exemple:

OpenLayerspluginQGIS

Pour installer ce plugin, il faut d’abord activer les plugins 3rd party. Voilà la marche à suivre pour QGIS 1.7, en version anglaise:

  1. Aller dans “Plugins”>”Fetch Python plugins…”
  2. Dans la boîte de dialogue qui s’affiche, aller dans le 2ème onglet: “Repositories” et cliquer sur “Add 3rd party repositories”
  3. Retourner dans le premier onglet “plugins” et taper OpenLayers dans la barre de recherche
  4. Cliquer sur OpenLayers plugin pour l’installer

Ensuite, pour afficher les couches comme GoogleMaps, BingMaps et OpenStreetMap, aller dans “Plugins” et “OpenLayers plugin” devrait apparaitre en bas, laissant apparaître une bonne dizaine de couches à afficher (Yahoo maps étant proposés mais ne fonctionnant plus…)

Enfin, si le plugin est introuvable, et pour voir son code-source, on peut toujours le trouver sous http://build.sourcepole.ch/qgis/plugins.xml

A ma connaissance, impossible d’afficher ces couches GoogleMaps, BingMaps et OpenStreetMap aussi simplement dans ArcGIS!

Créer une carte avec amMap

J’ai découvert récemment une petite librairie cartographique très simple à utiliser: amMap. Elle permet de créer des cartes thématiques du monde, de continents ou de pays, et est rapide à prendre en main. J’ai fait un exemple d’application avec une carte de la provenance des étudiants ULg du campus d’Arlon, sans doute le campus le plus multiculturel de Belgique!

Cet exemple (sans la légende) est fait en une vingtaine de lignes de code. J’aime bien le code pour les popups (là où ça commence par “ballonText”): juste une ligne de code, alors qu’avec OpenLayers, il en faut une bonne quizaine pour le même genre de résultat! Pour le reste du code, en s’inspirant des exemples fournis, il est facile de créer une carte sans devoir passer par un tuto.

var map;
			
AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "./ammap/images/";
    map.colorSteps = 11;
    map.mouseWheelZoomEnabled = true;
    map.balloon.color = "#000000";
   
    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        areas: [
            	{id:"DE",value:"1"},
		{id:"BR",value:"1"},
                ...
    };
    map.areasSettings = {
        autoZoom: true,
        balloonText: "[[title]]: [[value]]",
        selectedColor: "#696969"
    };

    map.dataProvider = dataProvider;    
    map.write("mapdiv");
});

Il y a une documentation claire et relativement complète sur le site d’amMap. Attention, amMap n’est pas une librairie de webmapping au même titre qu’OpenLayers ou Leaflet, c’est plutôt une librairie pour créer des cartes à grande échelle sur base de dessins de continents/pays pré-définis, et le résultat est plus proche d’un dessin que d’un Système d’Information Géographique. Par exemple, il n’y a pas de projection à définir et pas question d’y ajouter des WMS, des couches de GoogleMaps, etc. Les possibilités sont très limitées en comparaison d’autres programmes et librairies, mais c’est déjà suffisant pour nombre d’applications. Enfin, amMap est disponible gratuitement mais n’est pas un projet open-source, dommage :-(.

Framasoft: la route est longue mais la voie est libre!

J’ai découvert récemment des super outils issus d’une super association de promotion des logiciels libres: Framasoft! Impossible de décrire tout ce qui se fait de bien dans cette association qui a par ailleurs un grand besoin de soutien.

  1. J’ai retenu tout d’abord un bloc-note collaboratif en ligne, le framapad. Génial pour commencer à réfléchir sur un projet à plusieurs personnes ou simplement écrire une liste de courses à 2. Le gros avantage est qu’aucune inscription n’est nécessaire. Allez sur le site, un clic sur “créer un pad” et c’est tout.framapad
  2. Ensuite un tableur collaboratif, framacalc, sur le même principe et toujours aussi simple à mettre en oeuvre. J’ai essayé un framacalc pour créer une feuille de commande pour un groupement d’achats en communs:framacalc_gac
  3. Enfin, une alternative à Doodle, le framadate!

Ce n’est qu’un aperçu des nombreux projets déjà sortis du chapeau de framasoft. Et d’autres projets sont dans les cartons!

Voilà qui donne vraiment envie de les soutenir ces gars-là!

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

 

Imprimer une webmap avec le Pearl Crescent Page Saver plugin

Dans ce post, nous verrons comment il est possible d’éditer de (belles) cartes “papier” à partir de logiciels de webmapping. Alors c’est vrai que les webmaps ne peuvent rivaliser avec un logiciel de cartographie ou SIG pour créer de jolies cartes papier. Mais traduire une webmap dans un SIG pour l’édition d’une carte est une étape relativement fastidieuse, qui implique l’exportation des données cartographiques, la redéfinition de la symbologie et qui peut même se révéler impossible ou du moins beaucoup plus complexe lorsque la webmap affiche un fond cartographique venant d’une source tiers, typiquement GoogleMaps ou OpenStreetMap.

Si on veut avoir rapidement une version papier d’une webmap que vous avez créé, il existe mieux qu’une simple capture d’écran (print sreen)! Certains plugins disponibles sous Firefox permettent en effet de personnaliser la capture d’écran et notamment de faire une capture d’une page web, càd de TOUTE la page, indépendamment de la taille de votre écran et sans devoir “scroller” la page et de recoller des morceaux de capture d’écran.

Un des meilleurs plugins Firefox de capture de page est le Pearl Crescent Page Saver. dont une version gratuite est téléchargeable ici. Installez ce plugin Firefox, redémarrez Firefox et vous verrez une petite icône dans la barre d’outil en haut à droite:

img1
Vous avez donc la possibilité d’enregistrer la page entière! Les options de Page Saver permettent de choisir entre autres choses le format (PNG ou JPEG).

Cool, mais cela n’apporte évidemment strictement rien de plus qu’une capture d’écran classique si votre webmap s’affiche sur l’ensemble de l’écran, ce qui est souvent défini comme tel pour les webmaps! L’astuce est alors de définir votre carte sur une grande page web qui dépasse la taille de votre écran.

Par exemple, une webmap occupant tout l’écran se définit avec OpenLayers dans un fichier HTML de la façon suivante:

<div style="width:100%; height:100%" id="map"></div>

Mais il est tout à fait possible de faire une carte dépassant cet écran:

<div style="width:300%; height:300%" id="map"></div>

ou exprimé en pixels, par exemple:

<div style="width:5000px; height:5000px id="map"></div>

ce qui créé un fichier de 5000 x 5000 pixels. Il existe une limite de taille d’image pour le plugin (plantage de Firefox si dépassée) qui se situe un peu au-delà de 5000 x 5000 pixels, mais cette taille d’image est déjà suffisante pour réaliser un beau poster à une bonne résolution! Voilà donc un moyen d’imprimer une webmap en haute définition en changeant une ligne dans le code de la webmap.