Comment installer Leaflet ?

Leaflet ne s'installe pas à proprement parler. En revanche, pour pouvoir utiliser ses fonctionnalités et que vos cartes s'affichent, s'actualisent et interagissent correctement, votre page web doit accéder aux fichiers de la bibliothèque.

Pour cela vous devez faire appel à deux fichiers spécifiques : un fichier de styles CSS (leaflet.css) et un fichier JavaScript (leaflet.js).

<link rel="stylesheet" href="libs/leaflet.css" />
<script src="libs/leaflet.js"></script>

La première ligne correspond à la CSS, et doit donc être placée en début de fichier HTML, dans le head (généralement avant votre propre CSS, mais cela n'a souvent pas d'importance). La seconde, elle, sera plutôt en fin de fichier, donc proche de la fermeture du body (et avant les références à nos fichiers, et ceci est crucial par contre).

Installation en local

Il est possible de télécharger un fichier ZIP de la bibliothèque et de la charger directement depuis votre projet. Cette version locale sera plus rapide (mais il faudra tout de même être connecté à Internet pour charger les tuiles, images des fonds de cartes).

Sur la page de téléchargement du site officiel, récupérez l'archive ZIP et décompressez-la. Le dossier images contient des éléments d'interface, dont le marqueur (marker-icon.png) ; vous pouvez vous en inspirer pour en créer de nouveaux. La CSS de Leaflet est également fournie (évitez de la modifier, il est préférable de la laisser intacte pour qu'en cas de mise à jour vous ne perdiez pas vos modifications ; mais vous pouvez éventuellement modifier certaines classes depuis votre propre CSS).

+--  leaflet/
| +--  images/
| +--  leaflet-src.esm.js
| +--  leaflet-src.js
| +--  leaflet.css
| +--  leaflet.js

Pour le JavaScript, en plus des sources (que vous pouvez explorer, mais cela reste technique) sont livrées deux versions de Leaflet, une classique et une ESM (pour utiliser les modules, ce que nous ne ferons pas). Et chaque fichier avec son .map pour le débuggage. Déplaçons le tout dans notre dossier libs pour une meilleure organisation (en gardant le dossier images également).

Cette installation en locale peut être reproduite sur un serveur distant qui vous appartient. Le cas échéant, fournissez les liens complets.

Utilisation de la version CDN

Traditionnellement, les bibliothèques JavaScript s'utilisent via un CDN (Content Delivery Network), c'est-à-dire un lien vers un ou plusieurs fichiers hébergés sur des réseaux à hautes performances, permettant de charger les éléments rapidement. C'est la méthode conseillée en production.

Vous trouverez sur le site officiel de Leaflet les références des CDN conseillés, qui peuvent changer selon les versions.

La version CDN donne souvent des adresses à rallonge, comme :

<link rel="stylesheet" 
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
    crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
    crossorigin=""></script>

Installation en local vs CDN

L’utilisation de la version CDN, en revanche, est vivement recommandée en production. Elle offre plusieurs avantages, parmi lesquels :

• la vitesse de chargement : le CDN va chercher les données les plus proches, cela réduit les temps de latence ;
• la mise en cache : si un visiteur a déjà visité votre site (ou un autre), il aura déjà le fichier dans son navigateur, ce qui réduit la charge sur le serveur d'origine et accélère le chargement pour l'utilisateur.

En phase d’apprentissage, l’installation en local de Leaflet permet de s’y familiariser. À plus grande échelle, les grosses organisations pourront quant à elles apprécier garder la main sur les bibliothèques qu’elles utilisent.