Parmi les librairies de cartographie Javascript, 3 librairies essaient de se tailler la part du lion :
- Google Map Javascript API
- openLayers 2 (et depuis peu 3.0)
- Leaflet
Tout le monde connait google map et son business basé sur la publicité. Ce qui sous entend que Google peut décider d’un jour à l’autre d’intégrer des pubs dans vos cartes, c’est pourquoi je ne traiterai pas de cette librairie ici.
Par contre, OpenLayer et Leaflet sont toutes les deux Open sources donc aucun risque de les voir intégrer des publicités dans les cartes (du moins pas sans prévenir).
Je vais donc essayer de départager ces 2 dernières.
Points de comparaison :
Pour moi, les points principaux qui font qu’une librairie de cartographie est meilleure qu’une autre sont :
- Open Source
- Facile à utiliser
- “Smoothy” ou sympathique visuellement.
Et des librairies que l’on peut inclure dans ces 3 catégories il y en a un paquet (plus de 44 d’après un article de 2012 en espagnol). Mais je n’ai sélectionné que ces 3 la car ça me semble les 3 les plus pertinentes du moment.
OpenLayers
OpenLayers est la librairie qui possède le plus d’ancienneté parmi les librairies Open Source, et par conséquent c’est sans doute la plus utilisée.
Elle possède un très large choix de fonctionnalités qui permettent de faire à peu près tout ce qu’il est possible d’imaginer aujourd’hui.
Mais ces fonctionnalités ont un prix : le poids de la librairie : 1 Mo ! Ce qui n’est pas l’idéal pour une application mobile par exemple.
Mais les développeurs d’OpenLayers, connaissant bien ce problème de poids, ont sortis une toute nouvelle version : OpenLayers 3.0 qui propose beaucoup d’améliorations des performances et une diminution de la quantité du code (113.000 lignes contre 126.000 dans la versions 2.0).
Pour utiliser la librairie, il vous suffit d’inclure les lignes suivantes dans le header du html :
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css"> <script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
et les lignes suivantes dans le corps de votre page :
<div id="mapOL3" style="width: 100%, height: 400px"></div>
<script> new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View2D({ center: [0, 0], zoom: 2 }), target: 'mapOL3' }); </script>
Ce que je reproche personnellement à OpenLayer, c’est, en plus de son poids, son utilisation qui n’est pas toujours évidente et intuitive.
Vous pouvez trouver des exemples de projets créés avec OpenLayers 3.0 sur la page suivante : http://openlayers.org/en/master/examples/
Leaflet
Leaflet est la jeune librairie (5 ans quand même) qui fait parler d’elle de plus en plus dans le domaine de la cartographie.
Elle prône la rapidité de mouvement sur les cartes, un poids plume (123 Ko ), et une librairie relativement intuitive. Elle vous permet de créer une carte très rapidement.
Cela sous entend par contre qu’elle ne possède pas toutes les fonctionnalités que propose OpenLayers. Mais les fonctionnalités manquantes ne sont pas nombreuses et sont souvent des points qui sont utilisés dans des cas très poussés. De plus Leaflet s’enrichie très régulièrement et propose un grand nombre de plugins (liste des plugins à cette adresse).
Ce découpage par plugins est un gros plus de Leaflet. Cela permet d’avoir une librairie de base qui ne pèse pas lourd et qui s’exécute rapidement. Puis en fonction des projets les développeurs peuvent ajouter les plugins qui les intéressent (pour une application mobile ce n’est pas anodin !).
Pour utiliser la librairie, il faut inclure les lignes suivantes dans le header html :
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
et les lignes suivantes dans le corps de votre page :
<div id="map" style="width: 600px; height: 400px"></div>
Vous pouvez trouver une liste d’exemples et de tutoriels à l’adresse suivante : http://leafletjs.com/examples.html
Conclusion
OpenLayers est une librairie mature et possède une expérience reconnue ainsi qu’une large communauté.
Elle propose également une tonne de fonctionnalités en tout genre, et les mises à jours sont plus régulières que Leaflet (comparaison des commits).
Avec la version 3.0, ses performances et sont poids ont également été grandement améliorés, et les développeurs continuent dans ce sens.
Si vous souhaiter intégrer une carte avec des fonctionnalités un peu poussées, je conseille donc d’utiliser OpenLayers.
Leaflet est le petit nouveau et le plus ‘excitant’ à utiliser pour ma part.
Cette librairie est plus simple à utiliser, flexible, et efficace !
Elle permet de faire a peu près tout ce que peut faire OpenLayers et est surtout beaucoup plus légère et beaucoup adaptée à une utilisation mobile.
Et avec la liste des plugins mis à disposition qui ne cesse de s’agrandir, vous trouverez forcement ce que vous voulez.
Pour ma part, j’ai déjà eut l’occasion de tester les 2, et sur mes derniers projets je suis passé uniquement sur Leaflet et je n’ai encore jamais été bloqué par une fonctionnalité manquante.