Sur Geomatick, on a jusqu’ici utilisé l’API d’OpenLayers pour la réalisation de cartographies dynamiques sur internet. L’autre API très utilisée en webmapping est Leaflet. Cette dernière se compose d’un fichier de style CSS et d’un fichier JavaScript où l’on retrouve les classes et méthodes détaillées dans une documentation claire. L’objectif de ce tutoriel est d’introduire certaines classes afin de réaliser rapidement une cartographie avec quelques fonctionnalités.
1. Réalisation d’une carte simple avec Leaflet
On commence par la programmation d’une carte simple avec le chargement des fichiers CSS et JavaScript de Leaflet. On instancie la carte en JavaScript qui est chargée dans le corps du code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-language" content="fr-FR" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Introduction à Leaflet - Geomatick</title>
<!-- Leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<!-- Leaflet Libraries -->
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
<style>
#map{
width:100%;
height:600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialisation de la carte
var map = L.map('map').fitWorld().setZoom(2);
</script>
</body>
</html>On ajoute les méthodes fitWorld() et setZoom() à l’objet de la carte qui permettent de régler la vue de la carte à l’échelle du monde avec un certain niveau de zoom. Il est possible de régler la vue en centrant la carte avec des coordonnées et le niveau de zoom par la méthode setView().
2. Ajout d’une donnée vectorielle
La création d’un point (ou marqueur) sur la carte est définie par la classe L.marker() pour laquelle on précise la latitude et longitude suivie d’options tels l’icon, le titre. Pour les autres données vectorielles, chaque type de vecteur a sa propre classe listée ci-après :
- Polyline
- Polygon
- Rectangle
- Circle
- CircleMarker
Ces formes sont basées sur les coordonnées géographiques de chaque sommet pour les lignes et les polygones ou du centre pour les cercles. Ici, on ajoute un rectangle de couleur rouge :
// Limites géographiques du rectangle : lon min, lat min et lon max, lat max
var limites = [[42, -5], [51, 9]];
// Déclaration du vecteur
var rectangle = L.rectangle(limites, {color: "red", weight: 3}).addTo(map);On note que l’ajout de l’objet du vecteur dans l’objet de la carte est généré par la méthode addTo(). Il est aussi possible d’utiliser la méthode addLayer tel que map.addLayer(vector).
3. Ajout d’une donnée raster
Leaflet prend en compte les données tuilées tileLayer, dont les protocoles HTTP WMS tileLayer.WMS et des éléments autres superposées à la carte ImageOverlay (par exemple des photos). On peut donc ajouter facilement des flux de données issus de serveur cartographique. On prend l’exemple de la couche SIG ‘tiger_roads’ chargée lors de l’installation de GeoServer :
var wms = L.tileLayer.wms("http://localhost/geoserver/wms", {
layers: 'tiger:tiger_roads',
format: 'image/png',
transparent: true,
attribution: "Tiger Roads"
}).addTo(map);Pour la démonstration, on charge le fonds de carte d’OpenStreetMap :
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{tile}', {tile: 'osm'}).addTo(map);4. Ajout de contrôles sur la carte
Plusieurs contrôles L.control sont disponibles sur l’API : on retrouve l’attribution de la carte, le contrôle des couches, l’échelle et les zoom. Le contrôle des couches L.control.layers charge un objet composé des variables du noms des couches et des objets correspondant aux couches SIG.
// Contrôle des couches
var layers = {
"titre couche 1": objet couche 1,
"titre couche 2": objet couche 2,
...
};
L.control.layers(layers).addTo(map);
// Echelle
L.control.scale().addTo(map);
// Attribution
L.control.attribution().setPrefix('Geomatick').addTo(map);Dans ce tutoriel, l’utilisation de Leaflet a permis de cartographier des couches SIG de sources vectorielle et raster. On a pu agrémenter la carte de contrôles tels l’échelle et la liste des couches. A travers cette introduction, l’API paraît stable, légère et instinctive et elle permet de mettre en place des fonctionnalités facilement. L’API Leaflet gardera-t-elle le cap pour des conceptions de webmapping plus complexes?
