Leaflet.js est la bibliothèque de cartes la plus simple que vous trouverez

Google Maps est certainement le widget de carte embarquable le plus populaire pour les concepteurs de sites Web. Mais qu'en est-il de l' ajout de fonctionnalités personnalisées telles que des info-bulles et des repères de broche?

C'est où une bibliothèque impressionnante comme Leaflet.js aide une tonne.

C'est un projet open source complètement gratuit créé à l'origine par un des gars de Mapbox, Vladimir Agafonkin. Depuis lors, Leaflet a grandi pour inclure des dizaines de contributeurs à travers le monde.

Il est fréquemment mis à jour avec des corrections de bugs et de nouvelles fonctionnalités qui améliorent l'implémentation globale sur n'importe quel site Web. C'est de loin ma bibliothèque cartographique préférée en raison de sa force et de son esthétique.

Il a tellement de fonctionnalités que je ne pourrais pas tous les énumérer, mais voici les plus intéressantes :

• Accélération matérielle mobile
• Marqueurs de punaises, superpositions de formes et infobulles
• Zoom personnalisé et animation panoramique
• Aucune dépendance JS
• Prise en charge de tous les principaux navigateurs, y compris IE7 +

La mise en œuvre est un peu difficile car vous devez entrer des coordonnées et définir la taille de la carte .

Les utilisateurs peuvent toujours effectuer un zoom arrière et effectuer un panoramique, afin que la vue puisse toujours changer. Mais c'est aussi basé sur comment vous définissez la carte sur la page.

Il y a une énorme page de documentation pleine d'informations pour chaque aspect de Leaflet. Malheureusement, c'est tellement dense que je ne peux pas recommander de plonger dedans parce que vous allez probablement vous perdre. Au lieu de cela, consultez la page tutoriels Leaflet qui comprend également un guide de démarrage rapide pour les débutants.

Vous apprendrez à intégrer des cartes, à modifier la taille / la position et à ajouter des graphiques personnalisés, tels que des cercles ou des marqueurs.

Ce guide d'introduction peut vous apprendre tout ce dont vous avez besoin pour utiliser Leaflet sur un blog, un site Web d'entreprise ou tout autre projet à venir.

Il y a de nombreuses bonnes raisons d'utiliser Google Maps: c'est puissant, fiable et gratuit. Mais Leaflet est livré avec beaucoup plus de fonctionnalités et vous avez seulement besoin d' ajouter les fichiers CSS / JS à votre page Web pour commencer. Vous pouvez même trouver des copies hébergées en ligne si vous préférez emprunter la route CDN.

Ne laissez pas la documentation vous effrayer. Vous pouvez apprendre beaucoup de choses, mais toutes les fonctionnalités ne sont pas nécessaires pour une configuration de base de Leaflet.

Et il ne prend pas beaucoup pour créer une carte incroyable à partir de zéro . Jetez un oeil à cette démo Codepen créée en utilisant Leaflet.js & API Google Maps .