Leaflet est une bibliothèque JavaScript légère conçue pour créer des cartes interactives et compatibles avec les appareils mobiles. Sa légèreté se traduit par une petite taille de code, tout en exploitant les capacités des navigateurs modernes grâce à HTML5 et CSS3, tout en restant accessible sur les navigateurs plus anciens. Leaflet offre une API riche en fonctionnalités, facile à utiliser et bien documentée, qui peut être étendue grâce à une multitude de plugins.
Architecture Générale de Leaflet
Leaflet adopte une approche orientée objet. La classe centrale, Map, représente le conteneur de la carte. Diversse classes étendues à partir de Map et Layer gèrent la visualisation des données cartographiques et des superpositions. Le mécanisme d'événements facilite l'interaction avec la carte.
L'architecture de Leaflet visualise la carte comme un conteneur principal (Map). Ce conteneur héberge des couches de données cartographiques et des couches de superpositions, qui sont rendues par empilement. Des éléments supplémentaires comme des contrôles de carte et des événements sont associés aux classes de visualisation (Map, Layer) pour gérer et interagir avec la carte. La base de Leaflet repose sur la prise en charge de diverses sources de données, y compris les tuiles cartographiques, les données vectorielles et les données de superposition, qui sont rendues par des couches étendues.
API Principale de Leaflet
La documentation officielle de Leaflet fournit des détails complets sur son API. Bien que la documentation originale soit en anglais, une version française est désormais disponible, facilitant l'apprentissage des concepts de Leaflet.
Configuration de l'Environnement de Développement
Méthodes d'Inclusion
Leaflet peut être intégré de quatre manières principales : via un CDN hébergé, en téléchargeant les fichiers, en utilisant un gestionnaire de paquets JavaScript, ou en le compilant à partir des sources.
Utilisation d'un CDN Hébergé
La version stable la plus récente de Leaflet est accessible via plusiuers CDN. Pour l'utiliser, ajoutez les liens suivants au début de votre fichier HTML :
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin="">
Utilisation des Fichiers Téléchargés
Vous pouvez télécharger Leaflet depuis le site officiel. Les fichiers essentiels à inclure dans votre projet sont :
leaflet.js: Le code JavaScript compressé de Leaflet.leaflet-src.js: Le code JavaScript décompressé et lisible, utile pour le débogage.leaflet.css: Le fichier de style de Leaflet.- Le dossier
images: Contient les images référencées parleaflet.css. Ce dossier doit être placé au même niveau queleaflet.css.
Après avoir téléchargé et extrait les fichiers, référencez-les dans votre HTML :
<link rel="stylesheet" href="/chemin/vers/leaflet.css" />
<script src="/chemin/vers/leaflet.js"></script>
Utilisation d'un Gestionnaire de Paquets JavaScript
Si vous utilisez npm, installez Leaflet avec la commande :
npm install leaflet
Structure de Répertoire
Pour un projet frontend sans interaction backend complexe, une structure de répertoire typique pourrait être :
libs/: Contient les bibliothèques externes, comme Leaflet.public/: Pour les ressources statiques (images, icônes, etc.).js/: Pour vos propres fichiers JavaScript respectant les conventions Leaflet.
Choix de l'Éditeur
Le choix de l'éditeur de code (par exemple, VS Code, WebStorm) est une préférence personnelle. VS Code, avec son écosystème de plugins, est un choix populaire et pratique.
Démo d'Introduction : Afficher une Carte
Cette démo vise à afficher une carte interactive dans une page web en utilisant Leaflet et une source de tuiles cartographiques comme "星图地球" (StarMap Earth).
Étape 1 : Inclusion de Leaflet
Dans votre fichier HTML principal (par exemple, index.html), incluez les fichiers CSS et JavaScript de Leaflet. Si vous avez téléchargé Leaflet, utilisez les chemins locaux :
<!-- Inclusion du style Leaflet -->
<link rel="stylesheet" href="libs/leaflet/leaflet.css" />
<!-- Inclusion du script Leaflet -->
<script src="libs/leaflet/leaflet.js"></script>
Étape 2 : Création du Conteneur de Carte
Dans le corps de votre HTML, créez un élément div qui servira de conteneur pour la carte. Il est crucial de définir une hauteur explicite pour cet élément afin que Leaflet puisse le dimensionner correctement.
<div id="map" style="height: 600px;"></div>
Étape 3 : Initialisation de la Carte
Dans une balise <script>, créez et initialisez l'objet carte. Liez-le au div créé précédemment, définissez la position centrale et le niveau de zoom.
const map = L.map('map').setView([32.40, 119.40], 18); // Coordonnées et zoom initiaux
Par défaut, les interactions souris/tactiles et les contrôles de zoom sont activés. La méthode setView() positionne le centre de la carte et définit son niveau de zoom. Le format des coordonnées est [latitude, longitude].
Étape 4 : Ajout d'une Couche de Tuiles
Utilisez L.TileLayer pour ajouter une couche de tuiles à la carte. Spécifiez l'URL du service de tuiles et ajoutez la couche à la carte avec la méthode addTo().
// Ajout de la couche d'imagerie StarMap Earth
const imgLayer = L.tileLayer('https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=VOTRE_TOKEN', {
maxZoom: 18
}).addTo(map);
// Ajout de la couche d'annotations StarMap Earth
const annoLayer = L.tileLayer('https://tiles1.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=VOTRE_TOKEN', {
maxZoom: 18
}).addTo(map);
L.TileLayer est polyvalent et peut charger divers types de cartes. L'URL du service est un paramètre essentiel. Notez que l'utilisation de certains services comme StarMap Earth nécessite une clé API ou un token.
L'utilisation de const pour déclarer des variables est une pratique courante en ES6 lorsque la variable n'est pas destinée à être réassignée. Il est recommandé d'utiliser let ou const plutôt que var.