Month: March 2013

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.