Tutoriel : Intégrer une carte interactive sur un site avec Leaflet

Depuis l'arrivée de Google Maps en 2005, Les cartes intéractives sont monnaies courantes sur le web, presque devenues des outils indispensables.

Mais depuis 2018 et la flambée des prix de l'API de Maps chez Google, les alternatives gratuites et open-source se sont consolidées et offres aujourd'hui des possibilités toutes aussi intéressantes.

LeafletJS

Leaflet est une bibliothèque Javascript open-source de gestion de cartes intéractives.

Leaflet permet entre autres de :

• Charger différentes cartes avec différents styles
• Tracer des zones (polygones, cercles) sur la carte
• Ajouter des centres d'intérêts (pinpoints)
• Gérer les intéractions (clics) et afficher des popups

Fournisseurs de cartes

Attention, il ne faut pas confondre Leaflet avec un fournisseur de carte. Leaflet est une bibliothèque chargée d'afficher et de gérer les intéractions avec une carte qu'on lui fourni.

Cette confusion vient notamment du fait que la solution de Google fournie à la fois la carte et la bibliothèque d'affichage.

Ces fournisseurs mettent à dispositions des Tiles (des tuiles en français) qui correspondent à des images d'une zone du monde selon la latitude, la longitude et le zoom.

Certains fournisseurs sont gratuits, comme OpenStreet Map, d'autres sont payants mais avec des offres gratuites suffisantes pour la majorités des sites, comme MapBox par exemple.

L'avatange des fournisseurs payant est qu'ils fournissent général de nombreux styles de cartes et même la possibilité de les personnaliser.

Afficher une carte simple

Pour afficher une carte avec Leaflet basée sur les données gratuites d'OpenStreet Map, il suffit de quelques lignes comme dans l'exemple ci-dessous :

<!-- index.html -->
<div id="mapid" style="width: 600px; height: 400px;"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<script type="text/javascript">
  var map = L.map('mapid').setView([51.505, -0.06], 20);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

Pour se faire, il suffit de créer un élément HTML qui contiendra la carte, et d'inclure les fichiers CSS et JS de Leaflet.

Une fois la bibliothèque chargée, la méthode L.map(...) nous permettra de lier l'id de l'élément précédemment créé, puis de charger la carte avec la méthode L.tileLayer(...) en lui passant un template d'URL !

Dans le template d'URL, on peut voir 4 variables :

• {s} qui correspond au style de la carte (ici on utilise celui par défaut)
• {x}, {y} et {z} correspondent aux coordonnées qui seront injectées par Leaflet à chaque fois que l'utilisateur bougera la carte

À noter qu'il est obligatoire de mentionner OpenStreet Map, même si la carte est gratuite.

Démo

Voici le résultat du code ci-dessus :

Intégrer une carte dans un projet réel

En plus de l'exemple basique présenté juste avant, je vous ai préparé un exemple de carte plus poussé, avec la possibilité d'utiliser des cartes personnalisées avec MapBox et où l'on charge la librairie avec NPM et packagé avec Vite.

Ce projet d'exemple est disponible sur Github à l'adresse suivante : https://github.com/NicolasBrondin/basic-map-leaflet