Tag: Leaflet

Une carte avec Leaflet, OpenLayers 2 et OpenLayers 3

Je reprends la comparaison faite dans cet article de 2013 entre OpenLayers 2 et Leaflet, en y ajoutant OpenLayers 3. Voici donc le même concept de carte simple contenant des icônes et des popups s’affichant lors d’un click sur ces icônes. Toutes les cartes ont le même fond: le rendu standard d’OpenStreetMap. Elles ont aussi toutes la même couche de points, en format GML pour la carte OpenLayers 2 et en format geoJSON pour Leaflet et OpenLayers3. Voilà le résultat, faites CTRL+U sur les cartes en plein écran avec firefox et Chrome pour voir et comparer les codes!

 

Leaflet (en + grand)
OpenLayers2 (en + grand)
OpenLayers3 (en + grand)

Mon avis sur OpenLayers3:

  • Cela fait quelques années que cette librairie est annoncée, mais son usage ne semble pas vraiment décoller. En tout cas, il est difficile de trouver sur le web une documentation simple (en français ou anglais) sur son usage. Les tutoriaux officiels du site sont très pauvres.
  • Je trouve que le code est extrêmement compliqué pour des choses aussi simples qu’afficher un popup ou changer le curseur de la souris sur les icônes!
  • Il est aussi nécessaire de faire appel à certaines librairies extérieures pour des fonctions simples (popups et curseur), comme jQuery et bootstrap.

Bref, pas convaincu pour l’instant! En tout cas, il est clair que pour une carte simple, la meilleure librairie est Leaflet (la plus simple, la plus facile, la plus responsive).

Une webmap simple avec Leaflet

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.