blog

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.

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!