Webmapping

Exo1: Logiciels de webmapping - Clients web

Une carte simple avec un client web

Dans cet exercice, nous réalisons une webmap simple montrant la localisation du campus ULg d'Arlon en utilisant un client cartographique, LeafletJS (option 1) puis OpenLayers2 (option 2). Cet exercice sert donc de comparaison entre LeafletJS et OpenLayers2, deux libraires majeures des cartes sur internet.

Option 1: Leaflet

LeafletJS est un client cartographique. Il fournit un environnement de navigation et d'affichage de données géographiques dans une page internet. LeafletJS est une librairie de fonctions Javascript. Ce n'est donc pas un logiciel à installer sur son ordinateur, mais simplement une librairie à télécharger et à placer sur son serveur. On peut également ne pas la télécharger mais l'appeler directement depuis le site de LeafletJS dans la page internet (HTML) que l'on crée, ce que nous ferons dans cet exemple.

Leaflet est un client cartographique relativement récent et simple à utiliser, mais est beaucoup plus limité qu'OpenLayers dans ses fonctionnalités natives. Nous verrons qu'une carte similaire est faite en beaucoup moins de lignes de codes qu'OpenLayers et de manière plus intuitive!

Nous allons créer une carte internet très simple centrée sur Arlon, avec un fond d'OpenStreetMap, en affichant un popup qui donnera des informations sur le campus d'Arlon. Pour utiliser LeafletJS, il faut écrire quelques lignes de code en HTML et en Javascript, des languages informatiques utilisés pour des sites internet. Pour créer une carte internet, il ne vous sera pas nécessaire de maitriser l'HTML ou le Javascript car il suffit bien souvent de copier-coller et de s'inspirer d'autres exemples de cartes LeafletJS sur le web.

1. Premièrement, (1) nous appelons la librairie LeafletJS depuis le site de LeafletJS et (2) nous insérons notre future carte Leaflet 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 = L.map('map').setView([latitude, longitude], zoom);" dans une balise HTML "script". L'objet map est créé et nous choississons directement sur quelles coordonnées géographiques (latitude,longitude) la carte va se centrer et à quel niveau de zoom. Attention de ne pas confondre latitude et longitude et leur ordre! 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 comme fond de carte. J'ai choisi ici une couche d'OpenStreetMap.

Le résultat, c'est ici.

4. Enfin, nous ajoutons le marker avec son popup à l'endroit voulu en une seule ligne: L.marker([49.679, 5.82]).addTo(map).bindPopup("Arlon Campus Environnement");!

Le résultat, c'est ici.



Option 2: OpenLayers

Comme LeafletJS, OpenLayers est un client cartographique sous la forme d'une librairie Javascript. Cet exemple utilise la version 2 d'OpenLayers. A noter que la version 3 d'OpenLayers a été totalement réécrite et qu'il n'y a aucune compatibilité entre les deux versions. La version 3 d'OpenLayers s'apparente donc à un nouveau logiciel. Cfr cet article pour une comparaison entre LeafletJS, OpenLayers2 et OpenLayers 3.

Il existe en outre de nombreux tutoriels sur OpenLayers, notamment en français. Attention de bien vérifier quelle version d'OpenLayers (2 ou 3) est utilisée dans ces tutoriels.

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 d'OpenStreetMap. Dans la fonction "init()", nous ajoutons la couche OpenStreetMap à 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 la couche OpenStreetMap, soit le "spherical Mercator", désigné par le code EPSG:3857.

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

4. Nous ajoutons un point sur la carte à travers une couche appelée "Arlon". Cette couche se voit ajoutée un point ("ArlonXY") défini avec des coordonnées géographiques (Longitude, Latitude) qui sont transformées dans le système de projection de la carte, à savoir l'EPSG:3857. On définit également un style pour le point avec l'objet "styleArlon". 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. Dernière chose, nous ajoutons un popup avec le nom et l'adresse du campus, avec une série de lignes de code.

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.

En conclusion, il est clair que Leaflet parait plus simple et concis qu'OpenLayers. Mais il faut faire remarquer que Leaflet utilisé seul est relativement limité pour des applications plus poussées.