Blog SIG & Territoires

Introduction

La bibliothèque JavaScript libre Leaflet est un pilier de la cartographie web. Avec l’annonce de la version 2.0 (alpha) en mai 2025, c’est un tournant technologique qui se dessine : modernisation du code, abandon des anciens navigateurs, passage complet aux modules ES 6. Cet article explore les changements majeurs, ce que cela implique pour les développeurs, et comment s’y préparer.
(Leaflet)

Contexte

Leaflet a depuis sa création offert une solution légère, performante et extensible pour les cartes interactives. Jusqu’à présent, la version 1.x avait permis une adoption massive dans les projets web, mobiles, et dans les plugins SIG. Avec l’évolution rapide du web (modules ES, navigateurs evergreen, pointer events…), une remise à plat devenait nécessaire.
(Leaflet)

Nouveautés majeures de la v2.0

Parmi les nouveautés les plus marquantes :

• Passage complet à l’ESM (modules ES 6) et arrêt du format UMD/global L. (Leaflet)
• Abandon du support pour Internet Explorer et des anciens polyfills de navigateurs. (GitHub)
• Adoption des PointerEvents à la place des événements Mouse et Touch. (Lat × Long)
• Nouveau nom alias : LeafletMap pour Map. (GitHub)
• Nettoyage de l’API : suppression de méthodes obsolètes, modernisation des classes. (Leaflet)
• Migration des icônes vers layers.svg, amélioration de l’attribution automatique OpenStreetMap si non fournie. (Leaflet)

Impacts pour les développeurs / utilisateurs

• Le bundler/packager doit être adapté (import ES plutôt que inclusion via <script>).
• Les plugins anciens peuvent ne pas fonctionner sans mise à jour ou polyfill.
• Gain de performance et maintenabilité car le code se concentre sur les navigateurs modernes.
• Possibilité d’utiliser le module ES, ce qui permet une meilleure « tree‐shaking » et des builds plus légers.
• Sur certains projets (entreprises, collectivités), l’abandon du support IE peut nécessiter une phase de transition.

Migrer vers la version 2.0 : ce qu’il faut savoir

• Vérifier la compatibilité des plugins utilisés.
• Adapter le code : ex. remplacement de L.marker() par new Marker(), usage de modules importés. (GitHub)
• Modifier l’inclusion depuis un <script> classique à <script type="module"> ou utiliser un bundler. (Leaflet)
• Si maintien du support IE ou anciens navigateurs, prévoir un fallback ou rester en version 1.x jusqu’à migration complète.

Limites & précautions

• Il s’agit pour l’instant d’une version alpha, donc à utiliser plutôt pour tests que en production.
• Tous plugins ou thèmes ne seront pas immédiatement compatibles.
• Bien que le code soit modernisé, certains usages très spécialisés ou très anciens pourraient rencontrer des limitations.
• Documentation et exemples seront à jour progressivement.

Exemple minimal — Leaflet 2.0 (ES Module)

Exemple minimal en script type= »module » . En développement, vous pouvez pointer vers une distribution ESM en CDN (ou mieux : installer leaflet via npm et bundler).

Remarque : remplacez les URLs CDN par celles de la release stable lorsque disponible.

CaptionText

<!-- Head (CSS) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@2.0.0-alpha/dist/leaflet.css">

<!-- Body -->
<div id="map" style="width:100%;height:480px"></div>

<!-- Module JS (Leaflet 2 en ESM) -->
<script type="module">
  // Exemple : si Leaflet 2 publie une distribution ESM accessible via CDN
  // (Remplacez l'URL par la distribution ESM officielle ou import depuis votre bundle)
  import * as L from 'https://cdn.jsdelivr.net/npm/leaflet@2.0.0-alpha/dist/leaflet.esm.js';

  // Crée la carte
  const map = L.map('map').setView([45.764, 4.8357], 13); // ex. Lyon

  // Tile layer OpenStreetMap
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  // Marqueur minimal
  const marker = L.marker([45.764, 4.8357]).addTo(map);
  marker.bindPopup('Point d\'exemple — Leaflet 2.0').openPopup();
</script>

Si vous utilisez un bundler (recommandé) :

// npm install leaflet@^2.0.0-alpha
import * as L from 'leaflet';
const map = L.map('map').setView([45.764,4.8357],13); // etc.

Conclusion

La version 2.0 de Leaflet marque un changement de paradigme pour la cartographie web : passage aux standards modernes, modularité, gain de performance. Pour les développeurs et intégrateurs SIG, c’est une excellente nouvelle — à condition de planifier la migration. À l’ère où l’on attend des cartes rapides, interactives et adaptatives (mobile + desktop), Leaflet 2.0 est un pas important.
Reste à suivre la sortie stable complète, mais dès maintenant, explorer cette version peut donner un avantage dans les projets cartographiques à venir.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois