Mise en place d’une solution client (page web utilisant

Leaflet / OpenLayers)

Nous utiliserons l’extension ‘qgis2web’ (https://github.com/tomchadwin/qgis2web)

de QGIS ainsi que ses bibliothèques de programmation Javascript OpenLayers
(http://openlayers.org/) et Leaflet (http://leafletjs.com/) pour afficher des couches
différentes de source différentes.

L’extension ‘qgis2web’ a de nombreuses limitations et ne peut pas faire tout ce que ces
deux puissantes bibliothèques peuvent faire mais c’est un excellent point de départ dans
un processus de cartographie en ligne de base à partir duquel vous pourrez personnaliser
davantage.

On verra aussi brièvement comment programmer soi-même directement avec ses

librairies.

Les tâches dans cette séance sont :

• la création de pages web en utilisant l'extension ‘qgis2web’ (en testant l’exportation

OpenLayers3 ainsi que Leaflet)

• la compréhension de la logique du système

• l'écriture d'une page HTML simple avec Leaflet pour afficher des cartes avec fond
de plan au choix

• (et pour les rapides) utiliser Leaflet et/ou OpenLayers pour accéder à d'autres
sources de données (exemple WMS IGN)

Des exemples des pages sont sur le site du stage (cafesig.ulb.ac.be) : Programmation ►
Langages de programmation & Onglet : HTML-CSS/Java Script/PHP - pour les pages
Web dynamiques, dans la sous-section : Pages HTML exemple

Ainsi vous pouvez sauvegarder ces pages exemples sur votre ordinateur et les ouvrir
dans un éditeur de texte pour modifier certains éléments (retirer une couche, retirer des
contrôles, ajouter un autre contrôle, changer la zone affichée, ajouter une autre couche
WMS d'un autre serveur, etc). Pour voir l’effet, il suffit de recharger la carte dans un
navigateur.

Note !

• Pour voir le contenu html d’une page : Ctrl-U ou via le menu (Développement→
Code source de la page) ou encore via un clic droit (en dehors de la carte)

• Pour éditer un fichier .html, il faut faire un clique-droit sur le fichier -> Ouvrir avec
une autre application et choisir Editeur de texte.
 1. Créer une page web utilisant l'extension ' Qgis2web'

Cette extension est le successeur de qgis-ol3 et combine les exportations vers

OpenLayers3 ainsi que Leaflet.
Pour exemples voir ici : https://anitagraser.com/2015/10/01/quick-webmaps-with-
qgis2web/

Dans QGIS, installer l'extension 'Qgis2web'

• Quand vous avez fait un choix de couches et de symbologie, utilisez le plugin pour
choisir les paramètres et l’apparence désirée (appuyer sur le bouton d’aperçu de
mise à jour) et exporter le tout (après avoir sélectionner un dossier de votre choix).

• Une fois l’exportation terminée, votre navigateur s’ouvrira directement et affichera

votre carte web.

Pour plus de détails référez vous à ce tutoriel (en anglais) :

http://www.qgistutorials.com/fr/docs/web_mapping_with_qgis2web.html
et/ ou cette vidéo (9:20 minutes) :https://www.youtube.com/watch?v=xBdWNT40T9g

2. Utilisation de Leaflet & 3. Openlayer (BONUS)

On peut évidemment programmer soi-même directement avec la librairie Javascript
Leaflet (https://leafletjs.com/) ou OpenLayers (http://openlayers.org/) pour afficher des
couches différentes de source différentes.

Leaflet / OpenLayers est un système client. On se connecte à un serveur Web pour

chercher une page en html. Cette page contient alors des instructions (en Javascript) que
notre navigateur web sur notre machine exécute alors pour composer la carte. N'importe
qui peut donc créer une telle page html avec les instructions de composition de carte, et
tant que les sources de données utilisées pour cette carte sont accessibles n'importe qui
d'autres peut alors afficher cette page dans son navigateur.

Les exemples ci-dessous sont en Leaflet version 1.2 et en OpenLayers version 2. Les
liens vers les versions les plus récentes de la librairie Leaflet sont disponibles sur
http://leafletjs.com/examples/quick-start/
& pour OpenLayers sur http://openlayers.org/en/latest/doc/quickstart.html

Les tâches sont :

• Comprendre la création simple d’une page html sous leaflet ou Openlayers et le

fonctionnement des événements.

• Modifier le script et créer sa 1er carte avec Leaflet ou Openlayers

2.a. Utiliser Leaflet pour accéder à des serveurs OGC
Voici un exemple simple pour la prise en main de leaflet 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple Leaflet</title>
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-
M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqi
SH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script
src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"

integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2
Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<style>#mapid { height: 800px; }</style>
</head>

<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([50.847, 4.350],
13);

var OpenStreetMap_Mapnik =
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution: '&copy; <a
href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
OpenStreetMap_Mapnik.addTo(mymap);

var marker1 = L.marker([50.813257,

4.382554]).addTo(mymap);
var marker2 = L.marker([50.820105,
4.398470]).addTo(mymap);
var marker3 = L.marker([50.813658,
4.268169]).addTo(mymap);

var polygon = L.polygon([

[50.813257, 4.382554],
[50.820105, 4.398470],
[50.813658, 4.268169]
]).addTo(mymap);

marker1.bindPopup("Campus du Solbosch").openPopup();
marker2.bindPopup("Campus de la Plaine");
marker3.bindPopup("Campus Erasme");
 var popup = L.popup()
.setLatLng([50.847, 4.350])
.setContent("Bienvenue sur ma carte.")
.openOn(mymap);

var popup2 = L.popup();

function onMapClick(e) {
popup2
.setLatLng(e.latlng)
.setContent("Vous venez de cliquer sur " +
e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>

En voici l'explication étape(s) par étape(s) à suivre :

• Structure du fichier HTML

Commencer par créer un fichier HTML sur base du template suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple Leaflet</title>

</head>

<body>

</body>
</html>

• Références vers les fichiers de style et script de Leaflet

Ajouter dans l’en-tête (head) de la page web une référence vers les fichiers source
Leaflet :
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-
M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiS
H2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4t
Hj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

• Créer un élément qui servira à afficher la carte

Ajouter dans le corps (body) de la page web un élément div :
<div id="mapid"></div>

Par défaut, l’élément n’a pas de hauteur, il faut donc lui en fixer une en ajoutant une
instruction de style dans l’en-tête :
<style>
 #mapid { height: 700px; }
</style>

• Fixer les paramètres de la carte :

Coordonnées de départ
Ajouter l’instruction suivante pour fixer les coordonnées de latitude, longitude et le niveau
de zoom de départ à l’intérieur des balises script :
<script>
var mymap = L.map('mapid').setView([50.847, 4.350], 13);
</script>

Fond de carte
Choisir un fond de carte parmi ceux proposés sur le Web pour Leaflet. La page suivante
en offre une sélection et permet de les tester avant de les intégrer :
http://leaflet-extras.github.io/leaflet-providers/preview/
Lorsque le choix est fait, copier le morceau de code fourni dans la partie script de la page
web afin de créer un élément avec le fond de carte :
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19, attribution: '&copy; <a
href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
Puis, ajouter cet élément ‘fond de carte’ à la carte créée grâce à l’instruction
addTo(mymap) :
OpenStreetMap_Mapnik.addTo(mymap);

• Ajouter des éléments à la carte

De nombreux éléments peuvent être ajoutés à la carte, tels que des marqueurs, des
polygones, des labels, … Nous couvrirons ici uniquement les plus importants. Une
documentation complète se trouve sur http://leafletjs.com/reference-1.2.0.html
De plus, la page suivante montre de nombreux exemples de ce qui peut être réalisé :
http://leafletjs.com/examples.html
Ajouter des marqueurs
Utiliser des instructions telles que les suivantes pour ajouter des marqueurs :
var marker1 = L.marker([50.813257, 4.382554]).addTo(mymap);
var marker2 = L.marker([50.820105, 4.398470]).addTo(mymap);
var marker3 = L.marker([50.813658, 4.268169]).addTo(mymap);
Ajouter des polygones
L’utilisation de polygones requière d’utiliser les coordonnées de chaque point le
définissant :
var polygon = L.polygon([
[50.813257, 4.382554],
[50.820105, 4.398470],
[50.813658, 4.268169]
]).addTo(mymap);

Ajouter des popups

Sur des marqueurs ou autres éléments existants :
marker1.bindPopup("Campus du Solbosch").openPopup();
marker2.bindPopup("Campus de la Plaine");
marker3.bindPopup("Campus Erasme");
De manière indépendante sur la carte :
var popup = L.popup()
.setLatLng([50.847, 4.350])
.setContent("Bienvenue sur ma carte.")
.openOn(mymap);

Utiliser les événements du navigateur

Leaflet permet également de réagir aux événements causés par le visiteur sur le
navigateur comme des clics, des déplacements, effets de zoom, …
En créant des fonctions Javascript, il est possible de déclencher certains comportements
lorsque l’utilisateur fait quelque chose. Par exemple, afficher une alerte lors d’un clic avec
les coordonnées de l’endroit ciblé :
var popup2 = L.popup();
function onMapClick(e) {
popup2
.setLatLng(e.latlng)
.setContent("Vous venez de cliquer sur " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);

3.a. Utiliser OpenLayers pour accéder à des serveurs OGC

Voici un exemple utilisant le serveur WMS de l'IGN : Pages HTML exemple ->
OpenLayers WMS

<html><body>
<div id="Demo_WMS_IGN"></div>
<script
src="http://www.openlayers.org/api/OpenLayers.js"></script>

<script>
map = new OpenLayers.Map("Demo_WMS_IGN", {maxExtent: new
OpenLayers.Bounds(150000,165000,154000,170000), units: 'meters',
projection:
"EPSG:31370"});
var topo10 = new OpenLayers.Layer.WMS( "IGN Topo 1:10.000",
"http://www.ngi.be/testbed/wms/top10r_l72_fr", {layers:
'0'} );
var topo50 = new OpenLayers.Layer.WMS( "IGN Topo 1:50.000",
"http://www.ngi.be/testbed/wms/top50r_l72_fr", {layers:
'0'} );
var topo100 = new OpenLayers.Layer.WMS( "IGN Topo 1:100.000",
"http://www.ngi.be/testbed/wms/top100r_l72_fr", {layers: '0'}
);
map.addLayers([topo10, topo50, topo100]);
var lonLat = new OpenLayers.LonLat(151131,166852);
map.setCenter(lonLat, 2);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.PanZoomBar());
</script>
</body></html>

En voici l'explication ligne(s) par ligne(s)

<html><body>
Indique que ce qui suit est du HTML et que le corps de la page commence
(</body></html> indique la fin de ces instructions)
<div id="Demo_WMS_IGN"></div>
Création d'un élément qui contiendra la carte et qui s'appelle (arbitrairement)
«Demo_WMS_IGN»
<script
src="http://www.openlayers.org/api/OpenLayers.js"></script>
L'information pour le navigateur sur la localisation du code source de la bibliothèque
OpenLayers utilisée. Ce code source contient les fonctions utilisées dans le reste du code.
<script>
Marque le début de notre script JavaScript, donc de notre «programme» de composition
de carte.
map = new OpenLayers.Map("Demo_WMS_IGN", {maxExtent: new
OpenLayers.Bounds(150000,165000,154000,170000), units: 'meters',
projection:
"EPSG:31370"});
Crée une nouvelle carte OpenLayers avec comme paramètre le nom de l'élément div dans
lequel il faut l'insérer («Demo_WMS_IGN») ainsi que l'information de projection et
d'extension de la zone couverte par la carte (nécessaire pour avoir le paramètre bbox que
vous connaissez déjà). Ici la carte
est directement définie dans le système de projection Lambert belge 1972 (code 31370) et
avec une extension maximale. On ne peut donc pas zoomer au-delà de cette extension.
var topo10 = new OpenLayers.Layer.WMS( "IGN Topo 1:10.000",
"http://www.ngi.be/testbed/wms/top10r_l72_fr", {layers: '0'} );
var topo50 = new OpenLayers.Layer.WMS( "IGN Topo 1:50.000",
"http://www.ngi.be/testbed/wms/top50r_l72_fr", {layers: '0'} );
var topo100 = new OpenLayers.Layer.WMS( "IGN Topo 1:100.000",
"http://www.ngi.be/testbed/wms/top100r_l72_fr", {layers: '0'} );
Création de trois couches en appelant le serveur WMS de l'IGN. Les paramètres sont un
nom arbitraire («IGN Topo 1:10.000»), l'adresse du serveur et la ou les couche(s) que l'on
souhaite afficher. Une adresse de serveur peut contenir plusieurs couches, mais le
serveur de l'IGN ne proposait jusque 2015 qu'une couche (layer = 0) par adresse.
L'information concernant chaque couche est assignée à une variable (topo10, topo50,
topo100).
map.addLayers([topo10, topo50, topo100]);
Ajout des trois couches (représentées par leur variable respective) à la carte.
var lonLat = new OpenLayers.LonLat(151131,166852);
Crée une nouvelle variable lonLat et lui donne les coordonnées d'un point défini en
Lambert belge 1972.
map.setCenter(lonLat, 2);
Centre la carte sur les coordonnés contenues dans la variable lonLat et met le niveau de
zoom à 2.
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.PanZoomBar());
Ajout de trois contrôles sur la page: un outil pour changer l'affichage entre les trois
couches, un outil pour afficher la position de la souris en bas à droite, et une barre de
zoom. Voir http://dev.openlayers.org/releases/OpenLayers2.11/doc/apidocs/files/
OpenLayers-js.html pour une liste de contrôles disponibles (cliquer sur Controls ) droite
<script>
Marque la fin notre script JavaScript, donc de notre «programme» de composition de
carte.

Les tâches sont :

• Sauvegardez la page sur votre ordinateur et ouvrez la dans un éditeur de texte.

• Modifier certains éléments et recharger la carte dans un navigateur pour en voir
l'effet (retirer une couche, retirer des contrôles, ajouter un autre contrôle, changer la
zone affichée, etc)
• Ajouter une autre couche WMS d'un autre serveur (Bruxelles-Environnement,
UrbIS, etc).

3.b. Utiliser OpenLayers pour accéder à d'autres sources de

données (OpenStreetMaps, Google Maps)
OpenLayers avec OpenStreetMap

OpenStreetMap (OSM - http://www.openstreetmap.org/) est un effort collectif de

rassembler/créer des informations cartographiques libre d'accès. Pour une partie du
monde la couverture est très bonne, parfois même meilleure que Google Maps. Dans
certains cas, des administrations publiques alimentent OpenStreetMap.

Un exemple de l'utilisation d'OpenStreetMap avec OpenLayers : Pages HTML exemple ->

Openlayers OpenStreetMap

<html><body>
<div id="demoMap"></div>
<script
src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script
src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></scrip
t>
<script>
var lonLat = new
OpenLayers.LonLat(4.39790,50.82010).transform(new
OpenLayers.Projection("EPSG:4326"), new
OpenLayers.Projection("EPSG:900913"));
map = new OpenLayers.Map("demoMap");
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(lonLat, 18);

var markers = new OpenLayers.Layer.Markers( "Markers" );

map.addLayer(markers);

markers.addMarker(new OpenLayers.Marker(lonLat));
</script>
</body></html>

En voici l'explication ligne(s) par ligne(s):

<html><body>
Indique que ce qui suit est du HTML et que le corps de la page
commence(</body></html> indique la fin de ces instructions)
<div id="demoMap"></div>
Création d'un élément qui contiendra la carte et qui s'appelle (arbitrairement) «demoMap»
<script
src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script
src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></scrip
t>
L'information pour le navigateur sur la localisation du code source des bibliothèques
utilisées. Ce code source contient les fonctions utilisées dans le reste du code.

map = new OpenLayers.Map("demoMap");

Crée une nouvelle carte OpenLayers avec comme paramètre le nom de l'élément div dans
lequel il faut l'insérer («demoMap»).

map.addLayer(new OpenLayers.Layer.OSM());
Ajoute à la carte une nouvelle couche OpenStreetMap (OSM).
map.setCenter(lonLat, 18);
Centre la carte sur les coordonnés contenues dans la variable lonLat et met le niveau de
zoom à 18.

La variable lonLat avait été créée plus haut par:

var lonLat = new
OpenLayers.LonLat(4.39790,50.82010).transform(new
OpenLayers.Projection("EPSG:4326"), new
OpenLayers.Projection("EPSG:900913"));
qui prend des coordonnés en longitude-latitude en datum WGS84 (4.39790, 50.82010), en
fait des coordonnés utilisables par OpenLayers( OpenLayers.LonLat() ) et les transforment
en coordonnés Mercator avec la sphère comme éllipsoïde (projection utilisée par
OpenStreetMap, Google, etc – code 900913) avec .transform().

Si vous voulez remplacer cette coordonnée par une autre définie, par exemple, par une
adresse, vous pouvez faire ce que l'on appelle un géocodage de cette adresse. Une
manière de le faire est via l'API Google (voir ci-dessous), soit en formulant soi-même
l'interrogration par URL, soit en passant par des sites proposant ce genre de service,
comme par exemple http://batchgeo.com/fr/
(en cherchant «batch geocoding» dans Google, on peut en trouver d'autres).

var markers = new OpenLayers.Layer.Markers( "Markers" );

map.addLayer(markers);
Ajoute une couche de «marqueurs» à la carte.
markers.addMarker(new OpenLayers.Marker(lonLat));
Ajoute un marqueur aux coordonnés contenues dans la variables lonLat.

OpenLayers avec Google Map

On peut utiliser OpenLayers pour se connecter aux couches carto mises à disposition par
Google : Pages HTML exemple -> Openlayers Google Maps

La logique est assez similaire à l'exemple précédent. Voici quelques différences notables:
 var gsat = new OpenLayers.Layer.Google( "Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
Création d'une variable « gsat» définissant une nouvelle couche de type Google, ici de
type SATELLITE.

map.addLayers([gsat, gphy, gmap, ghyb]);

L'ajout de toutes les couches créées dans la carte. La première couche de la liste s'affiche
par défaut.

4. API Google Maps

OpenLayers et Leaflet ne sont évidemment pas la seule option du côté client. Une autre
solution souvent utilisée est l'accès directe via une interface de programmation (API) liée à
Google Maps (http://code.google.com/apis/maps/index.html). Nous n'irons pas dans les
détails, mais pour voir un exemple de son utilisation sous la version Javascript, pas
fondamentalement différent dans sa logique d'OpenLayers: Pages HTML exemple -> API
Google
(Passez avec la souris au-dessus du «marqueur» pour voir un petit message ;-) )

L'API Google Maps est aussi derrière une bonne partie des sites de géocodage en ligne. Il
est d'ailleurs possible de faire du géocodage à la volée en Javascript (donc en entrant
une adresse dans votre script au lieu d'une coordonnée). Pour plus d'information,
consultez la documentation et la multitude de didacticiels en ligne.

N.B. En fait, nous avons déjà fait appel à cet API dans la version OpenLayers avec Google
puisque OpenLayers doit utiliser quelques fonctions de Google pour pouvoir accéder aux
cartes de cet opérateur:
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>