Si vous avez lu mon article (ici), j’utilise l’API Google map pour afficher une carte interactive et stylisée afin de présenter un lieu ou une adresse postale. Mais l’API Google MAP est à présent limitée au nombre de visiteurs sur votre site qui en possède une. Dès lors, existe-t-il une alternative ? J’ai choisi Leaflet.
La raison
Comprenons-nous bien,. Il faut déjà avoir beaucoup de visiteurs pour que votre carte Google Map soit bloquée par son fournisseur. Néanmoins, comme la librairie javascript est potentiellement payante, toute une série de sites-web ont vu leur carte Google Map se figer et accompagner d’un message d’erreur si celle-ci n’était pas initialisée avec une clé unique associée à votre nom de domaine (ou l’URL de votre page). Dans ces conditions, pourquoi ne pas chercher une alternative ? J’ai essayé « leaflet« .
Leaflet
Comme Google Map, la librairie javascript est Open-source.
Voilà en quelques lignes, ce que cela peut donner :
https://codepen.io/lintermediaire/embed/KKzXRQX
Explication du code
En fait, l’outil ressemble très fort à celui de Google Map ;
À la ligne 4, vous initialisez la carte Leaflet en spécifiant l’élément html à cibler (#map sans l’hashtag) et les coordonnées latitudes & longitudes de la carte afin de la centrer sur le point que vous voulez.
Ligne 6 : Vous initialisez le style de la carte et le zoom par défaut au chargement de votre page (ici, il est à 16).
Ligne 11 à 28 : vous initialisez ici le/les marqueur/s qui s’affichera(ont) sur votre carte.
La popup du marqueur est initialisée à la ligne 56.
Conclusion
Leaflet présente une belle alternative à Google Map et fonctionne bien dans l’ensemble. Ces librairies fonctionnent en fait de la même manière ; ils prennent soin de séparer la carte et les marqueurs qui peuvent être bouclés si ces derniers sont multiples et gardent le même style.
C’est d’ailleurs là que le l’outil perd des points à mon sens ; l’installation des différents « pints » n’est pas si facile à mettre en place.
Bien sûr, on sent bien que Leaflet est moins bien équipé que l’outil du géant Google. C’est le cas lorsque l’on veut styliser la carte, où dans le cas de Leaflet, il faut espérer qu’un internaute ait pu prendre le temps de le faire et de mettre son code en ligne … Au niveau de la performance, Leaflet semble mettre plus de temps à charger. Mais le résultat est là ; une librairie de cartographie qui ne prend pas les données de vos visiteurs et qui restera gratuite !
