Webmapping

Exo2: Logiciels de webmapping - Serveurs web

Une carte avec MapServer + LeafletJS ou OpenLayers

Dans cet exercice, nous affichons une image raster dans une webmap en utilisant un serveur cartographique, MapServer, puis en l'intégrant dans un client cartographique, LeafletJS ou bien Openlayers.

1. MapServer

MapServer est un serveur cartographique. Il permet de déployer des données géographiques pour faire des cartes qui s'insèrent dans des applications de webmapping.

Installation de MapServer:

MapServer est un serveur cartographique. Il fonctionne donc dans un serveur web! Installer un serveur web sur votre ordinateur est relativement facile. Pour utiliser MapServer, nous vous conseillons d'installer le tout (serveur web + MapServer) avec la distribution d'OSGEo4W sous Windows. OSGeo4W est un petit programme permettant d'installer une série de logiciels libres dans le domaine du géospatial. Il est téléchargeable ici.

Une fois installé sur votre ordinateur, vous pouvez vérifier l'installation en se rendant sur l'adresse suivante dans un navigateur: http://localhost/cgi-bin/mapserv.exe?. Vous devez obtenir le message suivant: "No query information to decode. QUERY_STRING is set, but empty".

Nous recommandons d'utiliser une version récente de Firefox ou Google Chrome comme navigateur. Utiliser des versions anciennes ou Internet Explorer rend la contruction d'une application de webmapping plus difficile.

Une carte simple avec MapServer:

MapServer est un moteur cartographique qui transforme simplement des données géographiques brutes en images à travers une requête dans un navigateur internet et en utisant un fichier .map. Nous allons commencer par construire un fichier .map très simple permettant d'afficher une image satellite du continent Européen (fichier raster) et les frontières des pays (fichier vectoriel).

1. Il faut tout d'abord définir le système de projection, l'étendue, et d'autres paramètres généraux. Ces paramètres s'écrivent dans l'objet MAP. Dans l'exemple ci-dessous, chaque paramètre est expliqué briévement dans un commentaire (après le caractère "#").

Un mot sur le système de projection: Le système de projection se définit en se référant à un code EPSG (European Petroleum Survey Group). Chaque système de projection connu est référencé par un code EPSG standardisé et sont décrit dans le très bon site de référence spatialreference.org. Dans notre cas, et dans presque toute les applications de webmapping, nous utilisons le système de projection EPSG:3857 (ou EPSG:900913) inventé par Google pour GoogleMaps mais repris notamment par OpenStreetMap et d'autres fournisseurs de données. Ce système de projection s'appelle le WGS 84/Pseudo-Mercator.

2. Ensuite, il faut ajouter le bloc 'WEB' qui contient lui-même un bloc 'METADATA' qui contient quelques informations nécessaires pour le déployement du raster sur le web. En particulier nous choississons un nom de carte dans "wms_title" et nous définissons le système de coordonnées de la carte dans "wms_srs".

3. Ensuite, nous allons ajouter une couche raster que nous voulons déployer sur notre application, en ajoutant un objet 'LAYER' qui renseigne sur les caractéristiques de la couche que nous ajoutons. Nous commençons par ajouter une couche raster qui est en fait un fichier TIFF nommé "spot_vgt_Europe". Nous donnons le nom "spot_vgt" à la couche, qui peut donc être différent du nom de fichier TIFF, bien que ce ne soit pas nécessaire. Il est primordial ici d'indiquer le bon système de coordonnées de la couche tel qu'il est connu. Pour plus d'informations sur les autres paramètres (e.g., OFFSITE), nous renvoyons à la documentation du map-file de MapServer.

Le résultat peut être vu en tapant la requête suivante dans un navigateur: http://localhost/cgi-bin/mapserv?map=/var/www/cours-www/mapserver/carte3.map&layer=spot_vgt&mode=map

4. Ajoutons maintenant un shapefile des frontières des pays à notre carte. Pour cela, nous définissons un nouvel objet LAYER qui contient aussi un bloc STYLE qui permet de définir la symbologie du shapefile que nous ajoutons. Ce shapefile possède un autre système de projection (EPSG:4326, WGS1984). Il faut donc mettre toujours le système de projection de la couche dans l'objet LAYER et ce shapefile va être automatiquement reprojeté par MapServer dans le système de projection de la carte, càd en EPSG:3857. Enfin, il est important de noter que nous pouvons décider d'afficher uniquemenent les frontières des pays en mettant TYPE LINE même si le fichier shapefile originel contient des polygones et non des lignes.

Nous avons maintenant les deux couches se superposant: http://localhost/cgi-bin/mapserv?map=/var/www/cours-www/mapserver/carte4.map&layer=spot_vgt&layer=Europe&mode=map

Comme tel, avec cet exercice, MapServer ne fournit pas une application complète de webmapping. Mais nous avons créé un WMS que nous pouvons utiliser dans un client de webmapping, ce que nous allons faire avec le client webmapping le plus répandu: OpenLayers.

2. Option 1: LeafletJS

Nous allons créer une webmap avec LeafletJS en affichant le WMS que nous avons créé précédemment avec MapServer. Nous y ajouterons les couches d'OpenStreetMap également. Les deux premières étapes sont identiques au premier exercice.

1. Dans les lignes HTML ci-dessous, (1) nous appelons la librairie LeafletJS et (2) nous insérons notre future carte dans une balise HTML "div" en l'appelant par "id=map".

2. Ensuite, nous créons une carte (un objet "map") en ajoutant la ligne "map = L.map('map').setView([49, 5], 6);" dans une balise HTML "script". La carte est d'emblée centrée avec la méthode .setView([longitude, latitude], zoom) où "[longitude, latitude]" sont les coordonnées géographiques du centre de la carte et "zoom" est le niveau de zoom spécifié. Cette balise script est de type Javascript et contiendra tout le code LeafletJS de notre carte. Nous mettons le code dans une fonction 'init()' qui est appelée dans la balise HTML "body" au démarrage de la page, afin que le script en Javascript puisse démarrer lors de l'ouverture de la page.

3. Ensuite, nous ajoutons une couche OpenStreetMap.

Nous pouvons déjà voir le résultat ici.

4. Pour finir, nous ajoutons la couche de données géographiques que nous avons créé précédement avec MapServer. Cette couche créée avec MapServer obéit au protocole WMS. Enfin, nous ajoutons également un bouton sélectionneur de couches qui se met sur la carte par défaut en haut à droite.

Le résultat, c'est ici.

5. Dans l'étape précédente, nous avons ajouté une couche vectorielle à travers MapServer (la couche "Europe"). Mais un résultat similaire peut être obtenu d'une autre façon. En effet, une couche vectorielle peut être directement ajouté dans LeafletJS sans passer par MapServer. Nous pouvons exporter la couche vectorielle en geojson avec ArcGIS (ou avec QGIS). Sauver ensuite cette couche dans un dossier "geojson" à la racine de votre répertoire. Il faut ajouter le chemin du fichier geoJSON ("geojson/EuropeWGS84.geojson.js") dans une balise "script" dans l'entête de la page HTML pour que celle-ci charge la donnée. Ensuite la couche est ajoutée directement avec une fonction LeafletJS, tout en lui attribuant un style (càd la couleur, l'épaisseur des traits, etc.):

Le résultat, c'est ici.

En cas de bug avec LeafletJS, comme pour tout développement de page web, il vous est conseillé d'utiliser la console Javascript sur Google Chrome (CTRL+SHIFT+J) ou le plugin Firebug sur Firefox.

3. Option 2: OpenLayers

Nous allons créer une webmap avec OpenLayers en affichant le WMS que nous avons créé précédemment avec MapServer. Nous y ajouterons les couches de GoogleMaps également. Les deux premières étapes sont identiques au premier exercice vu plus haut.

1. Dans les lignes HTML ci-dessous, (1) nous appelons la librairie OpenLayers depuis le site d'OpenLayers et (2) nous insérons notre future carte OpenLayers dans une balise HTML "div" en l'appelant par "id=map".

2. Ensuite, nous créons une carte (un objet "map") en ajoutant la ligne "var map = new OpenLayers.Map('map');" dans une balise HTML "script". Cette balise script est de type Javascript et contiendra tout le code OpenLayers de notre carte. Nous mettons le code dans une fonction 'init()' qui est appelée dans la balise HTML "body" au démarrage de la page, afin que le script en Javascript puisse démarrer lors de l'ouverture de la page.

3. Ensuite, nous ajoutons une couche souvent bien utilisée dans les webmaps, à savoir une couche de GoogleMaps. Pour cela, nous devons ajouter une ligne d'appel à un script provenant des serveurs de Google. Puis, dans la fonction "init()", nous ajoutons la couche standard de Google (type NORMAL) à notre carte et nous la désignons comme couche de base ("isBaseLayer:true"). Nous avons aussi ajouté un système de projection à l'objet 'map' qui doit être celui de notre couche WMS, soit EPSG:900913. Enfin, nous fixons l'étendue à l'ouverture de la carte sur l'Europe en reprennant l'étendue qui était spécifiée dans le fichier .map de MapServer (EXTENT).

Nous pouvons déjà voir le résultat ici.

4. Pour finir, nous ajoutons la couche de données géographiques que nous avons créé précédement avec MapServer. Cette couche créée avec MapServer obéit au protocole WMS. Enfin, nous ajoutons également un bouton sélectionneur de couches ("LayerSwitcher") qui se met sur la carte par défaut en haut à droite.

Le résultat, c'est ici.

5. Dans l'étape précédente, nous avons ajouté une couche vectorielle à travers MapServer. Mais un résultat similaire peut être obtenu d'une autre façon. En effet, une couche vectorielle peut être directement ajouté dans OpenLayers sans passer par MapServer. Nous commençons par exporter la couche vectorielle en kmz/kml avec ArcGIS (ou en gml avec QGIS). Ensuite la couche est ajoutée directement avec une fonction OpenLayers:

Le résultat, c'est ici.

En cas de bug avec OpenLayers, comme pour tout développement de page web, il vous est conseillé d'utiliser la console Javascript sur Google Chrome (CTRL+SHIFT+J) ou le plugin Firebug sur Firefox. Enfin, la communauté d'OpenLayers est énormément développée, avec des blogs techniques sur l'utilisation de la librairie, des forums (par ex. forumsig en français, partie Cartographie sur le web), des listes d'emails, des questions répondues sur gis.stackexchange.com, etc.