blog – Page 5 – Nobohan

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.


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:

Aller dans “Plugins”>”Fetch Python plugins…”
Dans la boîte de dialogue qui s’affiche, aller dans le 2ème onglet: “Repositories” et cliquer sur “Add 3rd party repositories”
Retourner dans le premier onglet “plugins” et taper OpenLayers dans la barre de recherche
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.

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.
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:
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:

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:

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.

Créer une simple webmap OpenLayers en éditant des trajets sur GoogleMaps

OpenLayers, une librairie JavaScript, est devenu LE standard web en terme de client cartographique, càd un outil permettant de créer une carte (ou webmap) intégrable dans n’importe quel site.

Nous allons voir comment intégrer une couche vectorielle créée et éditée sur GoogleMaps. Le but est d’ajouter des données vectorielles (ici: un trajet) sans passer par un SIG mais en éditant la couche vectorielle sur GoogleMaps. Car si OpenLayers fournit l’environnement de navigation, il y faut bien introduire des données carto pour construire une carte. Une solution simple (et mobile) est donc d’utiliser GoogleMaps comme éditeur de données carto. J’ai utilisé ce truc pour faire une carte d’un trajet en vélo qui était édité sur GoogleMaps au fur et à mesure d’un looooong voyage en vélo.

On suppose que vous savez faire une carte simple en OpenLayers. Sinon, Geotribu fournit de très bons tutoriels pour commencer avec OpenLayers!

1. Pour créer une donnée vectorielle sur GoogleMaps, vous devez avoir un compte Google. Allez dans “Mes adresses” sur GoogleMaps et cliquez sur “Créer une carte”:

2. Vous allez donner un titre (par ex. “trajet”) à votre carte, puis en utilisant les outils d’édition (en haut à gauche de la carte) pouvoir dessiner des lignes ou des points sur GoogleMaps et donner un nom à votre partie de carte (par ex. “Oujda-Figuig”):

3. Enregistrez les modifications puis exportez votre donnée carto en KML, le format de données vectorielles de GoogleMaps, en cliquant sur le petit lien “KML” qui apparait à côté de la carte:

4. Sauvegardez ce fichier KML sur votre ordinateur. Ce fichier KML peut être ensuite introduit facilement dans une carte OpenLayers avec quelques lignes de code comme ceci:

var styleMapTrajet = new OpenLayers.StyleMap({strokeColor:"black", strokeWidth:4}); var Trajet = new OpenLayers.Layer.GML("Trajet", "trajet.kml",{format: OpenLayers.Format.KML, styleMap: styleMapTrajet}); map.addLayers([Trajet]);

Cela permet donc d’éditer une couche vectorielle sans passer par un SIG, faisant de GoogleMaps un web-based SIG. J’utilisais cela en voyage sans avoir emporté d’ordinateur mais en utilisant les cyber-cafés, etc. Il suffit d’éditer ses données sur GoogleMaps et de les transférer sur le serveur de la carte OpenLayers (par ex. en utilisant un logiciel de transfert FTP aussi basé sur le web comme net2ftp.com).

Vous pouvez voir le code-source complet de la carte sur nobohan.be/webmaps/velo/map.html (en tapant CTRL+u), en particulier pour le détail de la carte OpenLayers. L’avantage de cette méthode par rapport à une carte faite avec la GoogleMaps API est d’utiliser OpenLayers et ses capacités (presque) infinies pour personnaliser une webmap.