blog

FOSS4G-be: OpenStreetMap pour la cartographie de l’occupation du sol

Ici la présentation que j’ai faite au FOSS4G-be à Bruxelles ce jeudi 29 octobre, sur le potentiel d’OpenStreetMap dans la cartographie des forêts, avec un cas d’étude sur la province de Luxembourg.

Avis aux intéressé(e)s: Je pense qu’OSM a atteint un beau potentiel en termes de recherche et d’applications. Contactez-moi si vous êtes intéressé pour monter des projets de recherche ou développer des applications dans ce cadre! Certaines perspectives/idées à creuser sont données à la fin de la présentation…

Une carte avec Leaflet, OpenLayers 2 et OpenLayers 3

Je reprends la comparaison faite dans cet article de 2013 entre OpenLayers 2 et Leaflet, en y ajoutant OpenLayers 3. Voici donc le même concept de carte simple contenant des icônes et des popups s’affichant lors d’un click sur ces icônes. Toutes les cartes ont le même fond: le rendu standard d’OpenStreetMap. Elles ont aussi toutes la même couche de points, en format GML pour la carte OpenLayers 2 et en format geoJSON pour Leaflet et OpenLayers3. Voilà le résultat, faites CTRL+U sur les cartes en plein écran avec firefox et Chrome pour voir et comparer les codes!

 

Leaflet (en + grand)
OpenLayers2 (en + grand)
OpenLayers3 (en + grand)

Mon avis sur OpenLayers3:

  • Cela fait quelques années que cette librairie est annoncée, mais son usage ne semble pas vraiment décoller. En tout cas, il est difficile de trouver sur le web une documentation simple (en français ou anglais) sur son usage. Les tutoriaux officiels du site sont très pauvres.
  • Je trouve que le code est extrêmement compliqué pour des choses aussi simples qu’afficher un popup ou changer le curseur de la souris sur les icônes!
  • Il est aussi nécessaire de faire appel à certaines librairies extérieures pour des fonctions simples (popups et curseur), comme jQuery et bootstrap.

Bref, pas convaincu pour l’instant! En tout cas, il est clair que pour une carte simple, la meilleure librairie est Leaflet (la plus simple, la plus facile, la plus responsive).

TERR(IT)OIR(E)S

Dans ce blog, des exemples de webmaps et de court tutoriels en cartographie numérique, ainsi que les nouvelles du petit monde de la géomatique en Belgique francophone. En août 2015, je migre un ancien blog fait sur dotclear vers wordpress. Les articles écrit sur l’ancien blog seront progressivement remis dans le nouveau, mais avec leur date de publication originelle.

Julien Minet

Une carte des commerces & services locaux basée sur OpenStreetMap

Il y a moyen de bien s’amuser avec OpenStreetMap…

Cela faisait un petit temps que je voulais faire une carte des services et commerces à partir des données d’OpenStreetMap (OSM). Le but est de fournir une carte à destination des habitants d’un village, d’une commune ou d’une ville, sous une version web, de tous les commerces et services disponibles, avec leur coordonnées (téléphone, site internet) et les heures d’ouvertures. Après quelques soirées et trajets en train, voilà le résultat:

ou ici en plein écran.

Comment c’est fait ?

1) on récupère des données de commerces & services d’OSM avec le site web overpass-turbo.eu

2) on fourre tout ça dans une (belle) carte dynamique construite avec OpenLayers

3) on rajoute une liste à droite construite avec jquery.

Détaillons un peu:

La première étape consiste à récupérer les informations sur les commerces et services à partir d’OSM. Pour cela, nous faisons une requête sur le site overpass-turbo.eu, puis le résultat de la requête est enregistré au format geojson, un format de données géographiques. Les informations reprises seront tous les éléments taggés comme “shop” et “amenity”, qui rassemblent la plupart des commerces et des services dans la terminologie d’OSM. Plusieurs exemples de requêtes pour overpass-turbo existent sur le site, sous l’onglet “Charger”. Mais plusieurs formulations de requêtes sont possibles pour notre application:

1) Requête en fonction du nom de l’endroit

Par exemple, on va chercher tous les éléments en fonction du nom de l’endroit, ce qui pose évidemment problème s’il existe plusieurs endroits avec le même nom. Notez que tous les éléments « shop » et « amenity » sont cherché aussi bien en tant que points (« nodes »), surfaces (« ways ») que relations.


<osm-script output="json" timeout="25">
<!-- fetch area “Habay” to search in -->
<id-query {{nominatimArea:Habay}} into="area"/>
<!-- gather results -->
<union>
<!-- query part for: “shop” -->
<query type="node">
<has-kv k="shop"/>
<area-query from="area"/>
</query>
<query type="way">
<has-kv k="shop"/>
<area-query from="area"/>
</query>
<query type="relation">
<has-kv k="shop"/>
<area-query from="area"/>
</query>
</union>
<!-- print results -->
<print mode="body"/>
<recurse type="down"/>
<print mode="skeleton" order="quadtile"/>
</osm-script>

2) Requête en fonction d’une étendue définie sur la carte

Assez simple, il suffit de se déplacer sur la carte d’overpass-turbo, et de lancer la requête sur l’étendue affichée. Par contre, si on veut se restreindre à une ville et pas une autre, alors que ces deux villes sont imbriquées ou côte-à-côte, la requête donnera des résultats mélangés.


<osm-script output="json" timeout="25">
<!-- gather results -->
<union>
<!-- query part for: “shop” -->
<query type="node">
<has-kv k="shop"/>
<bbox-query {{bbox}}/>
</query>
...
</union>
<!-- print results -->
<print mode="body"/>
<recurse type="down"/>
<print mode="skeleton" order="quadtile"/>
</osm-script>

***

Deuxième étape, afficher ces données dans une carte dynamique. J’ai choisi la librairie OpenLayers, qui reste la plus flexible pour ce genre d’applications. J’ai aussi essayé avec Leaflet, mais certaines limitations demanderait de chercher un peu plus avec cette librairie. Le code source se trouve ici. Rien de bien complexe dans cette carte de base, qui se contente de charger le fichier geojson issu de notre requête sur overpass-turbo, de l’afficher avec des icônes différentes suivant ses propriétés, et de faire ouvrir des popups avec les informations sur ces icônes. Toutes ces informations du popup sont tirées du fichier geojson que nous avons exporté depuis OpenStreetMap. L’exactitude, la précision et la mise à jour de ces informations dépend donc des contributeurs OpenStreetMap du lieu.Une petite manipulation tout de même : si le fichier geojson contient des polygones (représentant le bâtiment du commerce) plutôt que des points, il faut tout d’abord transformer ces polygones en points, ce qui se fait très facilement sous QGIS par exemple, avec la fonction « Polygon Centroid ». Les polygones (bâtiments) sont alors remplacés par des points en conservant toutes les informations de l’objet.

Le fond cartographique choisi est celui d’OpenCycleMap. Pour cette carte, j’ai utilisé la collection d’icônes de mapicons.nicolasmollet.com, qui propose des centaines d’icônes sous différents formes et à la couleur au choix.

***

Dernière étape, créer une liste des éléments affichés sur la carte. Le même fichier geojson sert à afficher les points sur la carte, à générer les popups et à construire la liste à gauche de la carte. Le fichier geojson est lu ici par une fonction de base de la librairie en jquery. Pour chaque élément du fichier geojson qui correspond à une catégorie, le nom du lieu et son icône correspondante (selon sa catégorie) est affichée.

***

Keep It Safe and Simple. La méthodologie pour créer cette carte n’est pas très alambiquée, et même si le code en javascript pourrait certainement être simplifié, il reste compréhensible. Le lien dynamique avec OpenStreetMap (actualisation automatique de la carte en même temps qu’OpenStreetMap) n’a pas été fait, ce qui permet de garder un contrôle sur la carte finale. La carte est plutôt adaptée à un petit territoire (village, quartier), car un grand nombre d’éléments à afficher nécessiterait une gestion de clustering des symboles et une gestion de la liste. Par contre, la méthodologie a une portée globale, c’est-à-dire qu’elle peut être appliquée dans n’importe quel endroit du monde pour autant qu’OpenStreetMap soit suffisamment développé dans la localité. Sinon, c’est l’occasion d’y contribuer !

GeoDATA 2014, Bruxelles

J’ai participé ce mardi 3 juin au GeoDATA2014, un événement gratuit de conférences sur les géodonnées organisé par des entreprises du géospatial. C’était le seul évènement de leur programme sur le continent, à Bruxelles, donc à ne pas manquer! Petit compte-rendu non exhaustif et subjectif de la journée avec une sélection de 3 présentations marquantes:

1) Tout d’abord, un showcase impressionant de T-Kartor (www.t-kartor.com), une boite de cartographie, qui a réalisé des supports cartographiques pour accompagner un ambitieux programme de mobilité dans trois villes: Londres, Birmingham et New York. C’est un projet multi-facette qui tourne autour du même support cartographique, une carte très bien faite, “so user-friendly”, qui doit permettre à un maximum de personnes, habitants de la ville ou de passage, de s’y orienter, de faciliter l’accès aux transports en communs et de pouvoir atteindre leur destination à pied ou à vélo. La carte en elle-même est une carte très lisible, au design moderne inspiré du web, avec les bâtiments principaux dessinés en perspective (3D) pour permettre aux gens de se retrouver facilement, et un cercle indiquant la zone accessible à 5 minutes à pied. Les cartes sont affichées sur des bornes disposés dans l’espace urbain à des endroits-clés, sur les arrêts de bus et métro et sur les stations de vélo en partage. Elles permettent de rendre la navigation à pied dans une ville plus facilement, et de ce fait accompagne le changement modal, qui se traduit à Londres par 9 % de voiture en moins et +173 % de vélo en plus sur la période 2010-2012 ! Une fabuleuse réalisation qui a inspiré la STIB, présent lors de cette journée, pour de futures réalisations similaires à Bruxelles. A suivre !

2) Deuxio, une présentation de TomTom, l’entreprise de GPS, qui utilise les données collectées sur ses milliers de GPS vendus aux automobilistes. A moins que vous ne le refusiez, toutes les données de trajets suivis par un automobiliste équipé d’un GPS sont en effet collectées par l’entreprise, rendues anonymes, puis traitées et enfin commercialisées ! Il y a 2 formes principales de données : celles en temps-réel, qui peuvent être utilisées en temps réel pour vous éviter les bouchons, et les données historiques, qui permettent de dégager des statistiques fiables sur la circulation routière. Les données historiques représentent à ce jour plus de 700,000 ans de conduite automobile non-stop ! Ces données sont assez précieuses pour décider des aménagements routiers, pour gérer la congestion du trafic, pour améliorer les itinéraires proposés sur les GPS et les sites internet de routage, mais aussi pour les compagnies d’assurances… Ainsi, on peut en tirer des profils de vitesse à n’importe quel endroit du réseau, qui donnent la vitesse de circulation moyenne en fonction de l’heure de la journée, pour les différents jours de la semaine. Ce qui est sympa, c’est que vous pouvez tester ces données gratuitement dans la démo trafficstats.tomtom.com.

3) Enfin, la journée s’est terminée par la présentation de la British Cartography Society (www.cartography.org.uk), une association qui entend faire la promotion des bonnes pratiques de cartographie. Ils partent du constat qu’aujourd’hui, beaucoup de personnes peuvent créer des cartes facilement (avec les logiciels SIG), mais qu’il leur manque souvent la formation et les bonnes pratiques pour faire de BONNES cartes. L’association entend donc promouvoir la cartographie comme un art, une science avec ses bonnes pratiques, à destination des professionnels comme des « map-lovers » amateurs. Ils éditent une revue scientifique, organisent une conférence annuelle et notamment des cours de cartographie dans des écoles. A noter leur petit livre de poche « Cartography : an introduction », que tout cartographe devrait avoir, que j’ai pu acheter à cette occasion et disponible sur le web ici. Pour les amoureux des cartes…

PlanisphèrACE

On n’a pas trouvé de meilleur nom pour ce planisphère du campus d’Arlon (Arlon Campus Environnement – ACE). Bref, c’est simplement une petite application d’une carte du monde où sont représentés les pays d’origine des étudiants du campus d’Arlon pour l’année académique 2013-2014. En cliquant sur les pays entourés en gras, on visionne une vidéo de présentation du pays. Les vidéos ont été réalisées par les étudiants à l’occasion de la soirée multiculturelle 2013.

La carte en grand ici.

Techniquement, c’est fait avec OpenLayers et un petit bout de javascript pour lancer les vidéos. La division de la page internet en deux fenêtres (carte & vidéos) se fait dans du pur HTML/CSS. La partie “vidéos” en bas de l’écran est dans une balise DIV cachée à l’ouverture de la page par les propriétés “visibility” et “display”, les deux étant nécessaires pour de shistoires de compatibilité de navigateur.

<div id="content" style="visibility: hidden; display: none;">

Le fond cartographique vient de MapBox, et donc des données d’OpenStreetMap. Outre la beauté graphique toute simple de ce fond, j’aime particulièrement bien que les noms des pays sont affichés dans la langue officielle ( et l’alphabet!) de ces pays et non pas en anglais comme sur GoogleMaps ou BingMaps.

L’appel des vidéos se fait lors du clic sur un pays, ce qui actionne la fonction “onFeatureSelect” qui affiche simultanément un popup et la vidéo. Vous pouvez voir le détail dans le code source de la page (taper CTRL+u sur la page de la carte).

Enfin, je me suis rendu compte qu’afficher des vidéos à partir de fichiers vidéos dans un site web est une vraie plaie pour assurer une compatibilité de l’affichage entre tous les navigateurs, surtout à cause de la nécessité de plugins vidéos dans ces navigateurs. Une solution de facilité est donc d’héberger les vidéos sur une plateforme en ligne (par ex. YouTube) et de les afficher au travers d’une iframe, ce que j’ai fait.

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.