Contenu <\/p>\nToggle<\/span>

Introduction<\/a><\/li>
Contexte<\/a><\/li>
Nouveaut\u00e9s majeures de la v2.0<\/a><\/li>
Impacts pour les d\u00e9veloppeurs \/ utilisateurs<\/a><\/li>
Migrer vers la version 2.0 : ce qu\u2019il faut savoir<\/a><\/li>
Limites & pr\u00e9cautions<\/a><\/li><\/ul><\/li>
Exemple minimal \u2014 Leaflet 2.0 (ES Module)<\/a><\/li>
Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n
<\/span>Introduction<\/span><\/h3>\n\n\n\n
La biblioth\u00e8que JavaScript libre Leaflet<\/a> est un pilier de la cartographie web. Avec l\u2019annonce de la version 2.0 (alpha) en mai 2025, c\u2019est 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\u00e9veloppeurs, et comment s\u2019y pr\u00e9parer.
(Leaflet<\/a>)<\/p>\n\n\n\n
\n\n\n\n
<\/span>Contexte<\/span><\/h3>\n\n\n\n
Leaflet a depuis sa cr\u00e9ation offert une solution l\u00e9g\u00e8re, performante et extensible pour les cartes interactives. Jusqu\u2019\u00e0 pr\u00e9sent, la version 1.x avait permis une adoption massive dans les projets web, mobiles, et dans les plugins SIG. Avec l\u2019\u00e9volution rapide du web (modules ES, navigateurs evergreen, pointer events\u2026), une remise \u00e0 plat devenait n\u00e9cessaire.
(Leaflet<\/a>)<\/p>\n\n\n\n
\n\n\n\n
<\/span>Nouveaut\u00e9s majeures de la v2.0<\/span><\/h3>\n\n\n\n
Parmi les nouveaut\u00e9s les plus marquantes :<\/p>\n\n\n\n
- Passage complet \u00e0 l\u2019ESM (modules ES 6) et arr\u00eat du format UMD\/global L<\/code>. (Leaflet<\/a>)<\/li>\n\n\n\n
- Abandon du support pour Internet Explorer et des anciens polyfills de navigateurs. (GitHub<\/a>)<\/li>\n\n\n\n
- Adoption des PointerEvents<\/code> \u00e0 la place des \u00e9v\u00e9nements Mouse<\/code> et Touch<\/code>. (Lat \u00d7 Long<\/a>)<\/li>\n\n\n\n
- Nouveau nom alias : LeafletMap<\/code> pour Map<\/code>. (GitHub<\/a>)<\/li>\n\n\n\n
- Nettoyage de l\u2019API : suppression de m\u00e9thodes obsol\u00e8tes, modernisation des classes. (Leaflet<\/a>)<\/li>\n\n\n\n
- Migration des ic\u00f4nes vers layers.svg<\/code>, am\u00e9lioration de l\u2019attribution automatique OpenStreetMap si non fournie. (Leaflet<\/a>)<\/li>\n<\/ul>\n\n\n\n \n\n\n\n<\/span>Impacts pour les d\u00e9veloppeurs \/ utilisateurs<\/span><\/h3>\n\n\n\n\nLe bundler\/packager doit \u00eatre adapt\u00e9 (import ES plut\u00f4t que inclusion via <script><\/code>).<\/li>\n\n\n\n Les plugins anciens peuvent ne pas fonctionner sans mise \u00e0 jour ou polyfill.<\/li>\n\n\n\n Gain de performance et maintenabilit\u00e9 car le code se concentre sur les navigateurs modernes.<\/li>\n\n\n\n Possibilit\u00e9 d\u2019utiliser le module ES, ce qui permet une meilleure \u00ab tree\u2010shaking \u00bb et des builds plus l\u00e9gers.<\/li>\n\n\n\nSur certains projets (entreprises, collectivit\u00e9s), l\u2019abandon du support IE peut n\u00e9cessiter une phase de transition.<\/li>\n<\/ul>\n\n\n\n \n\n\n\n<\/span>Migrer vers la version 2.0 : ce qu\u2019il faut savoir<\/span><\/h3>\n\n\n\n\nV\u00e9rifier la compatibilit\u00e9 des plugins utilis\u00e9s.<\/li>\n\n\n\nAdapter le code : ex. remplacement de L.marker()<\/code> par new Marker()<\/code>, usage de modules import\u00e9s. (GitHub<\/a>)<\/li>\n\n\n\n Modifier l\u2019inclusion depuis un <script><\/code> classique \u00e0 <script type=\"module\"><\/code> ou utiliser un bundler. (Leaflet<\/a>)<\/li>\n\n\n\n Si maintien du support IE ou anciens navigateurs, pr\u00e9voir un fallback ou rester en version 1.x jusqu\u2019\u00e0 migration compl\u00e8te.<\/li>\n<\/ul>\n\n\n\n \n\n\n\n<\/span>Limites & pr\u00e9cautions<\/span><\/h3>\n\n\n\n\nIl s\u2019agit pour l\u2019instant d\u2019une version alpha<\/strong>, donc \u00e0 utiliser plut\u00f4t pour tests que en production.<\/li>\n\n\n\n Tous plugins ou th\u00e8mes ne seront pas imm\u00e9diatement compatibles.<\/li>\n\n\n\n Bien que le code soit modernis\u00e9, certains usages tr\u00e8s sp\u00e9cialis\u00e9s ou tr\u00e8s anciens pourraient rencontrer des limitations.<\/li>\n\n\n\n Documentation et exemples seront \u00e0 jour progressivement.<\/li>\n<\/ul>\n\n\n\n \n\n\n\n<\/span>Exemple minimal \u2014 Leaflet 2.0 (ES Module)<\/span><\/h2>\n\n\n\nExemple minimal en script type=\u00a0\u00bbmodule\u00a0\u00bb<\/em><\/strong> . En d\u00e9veloppement, vous pouvez pointer vers une distribution ESM en CDN (ou mieux : installer leaflet via npm et bundler).<\/p>\n\n\n\n Remarque : remplacez les URLs CDN par celles de la release stable lorsque disponible.<\/p>\n\n\n <\/div>CaptionText<\/div><\/div><\/div><\/p>\n\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@2.0.0-alpha\/dist\/leaflet.css\">\n\n\n<div id=\"map\" style=\"width:100%;height:480px\"><\/div>\n\n\n<script type=\"module\">\n \/\/ Exemple : si Leaflet 2 publie une distribution ESM accessible via CDN\n \/\/ (Remplacez l'URL par la distribution ESM officielle ou import depuis votre bundle)\n import * as L from 'https:\/\/cdn.jsdelivr.net\/npm\/leaflet@2.0.0-alpha\/dist\/leaflet.esm.js';\n\n \/\/ Cr\u00e9e la carte\n const map = L.map('map').setView([45.764, 4.8357], 13); \/\/ ex. Lyon\n\n \/\/ Tile layer OpenStreetMap\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19,\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ Marqueur minimal\n const marker = L.marker([45.764, 4.8357]).addTo(map);\n marker.bindPopup('Point d\\'exemple \u2014 Leaflet 2.0').openPopup();\n<\/script>\n\nSi vous utilisez un bundler (recommand\u00e9) :\n\n\/\/ npm install leaflet@^2.0.0-alpha\nimport * as L from 'leaflet';\nconst map = L.map('map').setView([45.764,4.8357],13); \/\/ etc.<\/code><\/pre>\n\n\n\n<\/div><\/div>\n\n\n\n \n\n\n\n<\/span>Conclusion<\/span><\/h2>\n\n\n\nLa version 2.0 de Leaflet marque un changement de paradigme<\/strong> pour la cartographie web : passage aux standards modernes, modularit\u00e9, gain de performance. Pour les d\u00e9veloppeurs et int\u00e9grateurs SIG, c\u2019est une excellente nouvelle \u2014 \u00e0 condition de planifier la migration. \u00c0 l\u2019\u00e8re o\u00f9 l\u2019on attend des cartes rapides, interactives et adaptatives (mobile + desktop), Leaflet 2.0 est un pas important. Reste \u00e0 suivre la sortie stable compl\u00e8te, mais d\u00e8s maintenant, explorer cette version peut donner un avantage dans les projets cartographiques \u00e0 venir.<\/p>\n\n\n\n \n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":" Introduction La biblioth\u00e8que JavaScript libre Leaflet est un pilier de la cartographie web. Avec l\u2019annonce de la version 2.0 (alpha) en mai 2025, c\u2019est un tournant technologique qui se dessine : modernisation du code, abandon des…<\/p>\n","protected":false},"author":1,"featured_media":13823,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[2929],"tags":[3801,1903,3803,412,286],"class_list":["post-15902","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping","tag-2-0","tag-cartographie","tag-javascript","tag-leaflet","tag-web"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/05\/image_mbtiles_leaflet.jpg?fit=1024%2C1024&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-48u","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/15902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=15902"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/15902\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13823"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=15902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=15902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=15902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/span>Migrer vers la version 2.0 : ce qu\u2019il faut savoir<\/span><\/h3>\n\n\n\n\nV\u00e9rifier la compatibilit\u00e9 des plugins utilis\u00e9s.<\/li>\n\n\n\n