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