Leaflet, la librairie de cartes JavaScript

Qu'est-ce que Leaflet ?

Leaflet est une librairie JavaScript open source qui affiche des cartes interactives dans le navigateur. Elle pèse environ 42 Ko de JavaScript, n'a aucune dépendance externe et fonctionne sur tous les navigateurs desktop et mobiles courants. Créée en 2010 par Volodymyr Agafonkin, elle est aujourd'hui maintenue par une communauté de contributeurs et sert de socle cartographique à des sites comme GitHub, Flickr ou le Washington Post.

À quoi sert Leaflet ?

Leaflet sert à poser une carte manipulable dans une page : zoom, déplacement, marqueurs, popups, tracés vectoriels, couches GeoJSON. Elle ne fournit ni les données ni les images de fond : elle consomme un serveur de tuiles externe, OpenStreetMap par défaut, mais aussi Mapbox, IGN, Stadia ou un serveur WMS interne. C'est ce découplage qui la rend utile en agence : la carte reste la même, seul le fournisseur de tuiles change selon le budget ou les contraintes RGPD du client.

Comment fonctionne une carte Leaflet ?

Une carte Leaflet se construit en trois temps : un conteneur HTML, une couche de tuiles, puis les objets posés dessus.

Exemple minimal, stack Leaflet 1.9.4 en HTML statique, sans build ni bundler :

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map" style="height: 400px"></div>

<script>
  const map = L.map('map').setView([43.6047, 1.4442], 13);

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  L.marker([43.6047, 1.4442]).addTo(map).bindPopup('Toulouse');
</script>

Le conteneur doit avoir une hauteur CSS explicite, sinon la carte se calcule sur une hauteur nulle et rien ne s'affiche.

Quand faut-il utiliser Leaflet ?

Adapté Pas adapté
Carte de contact, points de vente, itinéraire simple Rendu 3D, inclinaison, extrusion de bâtiments
Affichage de GeoJSON métier, quelques milliers de points Millions d'entités sans clustering ni tuiles vectorielles
Projet sans budget API cartographique Géocodage, calcul d'itinéraire, isochrones natifs
Contrainte de poids et de dépendances minimales Besoin d'un écosystème de styles vectoriels complet

Pour la 3D et les tuiles vectorielles, MapLibre GL JS répond mieux au besoin. Pour du géocodage ou du routage, Leaflet impose de brancher un service tiers ou un plugin.

Quelle différence entre Leaflet 1.9 et Leaflet 2.0 ?

Critère Leaflet 1.9.4 Leaflet 2.0.0-alpha.1
Statut Stable depuis mai 2023 Préversion, août 2025
Format UMD, objet global L ESM, imports explicites
Instanciation L.marker(latlng) new Marker(latlng)
Événements Souris et tactile séparés Pointer Events unifiés
Navigateurs Internet Explorer 9 à 11 inclus Navigateurs evergreen uniquement

La version 2.0 supprime les méthodes fabriques et le global L du paquet principal, ce qui casse la plupart des plugins écrits pour la v1. Un fichier leaflet-global.js et un polyfill communautaire assurent la transition. En production, la 1.9.4 reste la version de référence tant que la 2.0 n'est pas stabilisée.

Sources