Pourquoi et comment intégrer Leaflet au lieu de GMaps?

Publié le 21/05/2024

Avantages de Leaflet

Coût et Licence : Leaflet est totalement gratuit et n’impose aucune restriction d’utilisation, contrairement à Google Maps qui peut devenir coûteux pour les sites à fort trafic.
Personnalisation : Leaflet permet une grande flexibilité avec de nombreuses options de personnalisation. Vous pouvez facilement modifier le style de la carte, ajouter des marqueurs personnalisés, et utiliser divers plugins pour étendre ses fonctionnalités.
Confidentialité et RGPD : Leaflet assure que les données personnelles de vos visiteurs ne sont pas collectées par des tiers, respectant ainsi le RGPD.
Performances : Leaflet est léger et performant, offrant un chargement rapide même sur des connexions lentes, améliorant ainsi l’expérience utilisateur.
Fournisseurs de Cartes : Leaflet fonctionne avec divers fournisseurs de cartes, tels qu’OpenStreetMap, offrant une grande flexibilité dans le choix des cartes et de leurs styles.

Tutoriel d’Installation de Leaflet

Préparer la Page

Inclure les Fichiers CSS et JavaScript Ajoutez les fichiers nécessaires dans la section <head> de votre page web.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

Créer une Div pour la Carte Insérez une balise <div> avec un id spécifique à l’endroit où vous voulez placer la carte.

<div id="mapid" style="width: 600px; height: 400px;"></div>

Assurez-vous que la <div> qui contiendra la carte a une hauteur définie en CSS :

#mapid {
  height: 400px;
}

Charger la Carte avec JavaScript

Ajoutez le code suivant à la fin de votre <body>.

<script type="text/javascript">
  var map = L.map('mapid').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

Ajouter des Éléments Supplémentaires

Placer un Marqueur

<script type="text/javascript">
  var marker = L.marker([51.505, -0.09]).addTo(map);
</script>

Ajouter un Popup

<script type="text/javascript">
  marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
</script>

Placer un Cercle

<script type="text/javascript">
  var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
  }).addTo(map);
</script>

Ajouter l’Échelle de la Carte

<script type="text/javascript">
  L.control.scale().addTo(map);
</script>

Désactiver le Zoom avec la Molette de la Souris

<script type="text/javascript">
  map.scrollWheelZoom.disable();
</script>

Conclusion

Leaflet est une alternative remarquable à Google Maps, offrant une solution gratuite, flexible et respectueuse de la vie privée pour vos cartes interactives.

Vous pouvez créer des cartes avec une grande liberté d’utilisation, rapides et élégantes sur le même principe que Google Maps, mais en évitant les frais de l’API. Combiné à du développement sur mesure, vous pouvez aisément définir des zones géographiques, des listes de marqueurs, et les rendre interactives.

La mise en place des fonctionnalités avancées est peut être plus technique, mais l’avantage est là : une bibliothèque de cartographie qui respecte la vie privée de vos visiteurs et qui restera gratuite !