Leaflet.js : la bibliothèque de cartes la plus légère et simple
Leaflet.js est une bibliothèque JavaScript open source de 42 Ko pour créer des cartes interactives. Contrairement à Google Maps (payant au-delà de 28 500 chargements/mois), Leaflet utilise les tuiles gratuites d’OpenStreetMap. Parfait pour afficher la localisation de votre entreprise, vos zones de livraison, ou des données géographiques.
Installation et première carte
<!-- Ajouter dans le <head> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Le conteneur de la carte -->
<div id="map" style="height: 400px; border-radius: 12px;"></div>// Créer la carte centrée sur Dakar
const map = L.map('map').setView([14.6928, -17.4467], 13);
// Ajouter les tuiles OpenStreetMap (gratuit)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Ajouter un marqueur
L.marker([14.6928, -17.4467])
.addTo(map)
.bindPopup('<b>ITSkillsCenter</b><br>Dakar, Sénégal')
.openPopup();En 10 lignes, vous avez une carte interactive de Dakar avec un marqueur cliquable.
Personnaliser les marqueurs
// Icône personnalisée
const customIcon = L.icon({
iconUrl: 'marker-icon.png',
iconSize: [32, 42],
iconAnchor: [16, 42], // Point d'ancrage (bas du marqueur)
popupAnchor: [0, -42] // Position du popup par rapport au marqueur
});
L.marker([14.6928, -17.4467], { icon: customIcon }).addTo(map);
// Marqueur avec cercle coloré (sans image)
L.circleMarker([14.7167, -17.4677], {
radius: 10,
fillColor: '#e94560',
color: '#fff',
weight: 2,
fillOpacity: 0.8
}).addTo(map).bindPopup('Zone de livraison');Afficher plusieurs points (magasins, agences, etc.)
const lieux = [
{ nom: 'ITSkillsCenter Dakar', lat: 14.6928, lng: -17.4467, type: 'bureau' },
{ nom: 'Agence Thiès', lat: 14.7886, lng: -16.9260, type: 'agence' },
{ nom: 'Point Relais Mbour', lat: 14.4167, lng: -16.9667, type: 'relais' },
{ nom: 'Bureau Saint-Louis', lat: 16.0326, lng: -16.4897, type: 'bureau' }
];
lieux.forEach(lieu => {
const colors = { bureau: '#4a90d9', agence: '#27ae60', relais: '#f39c12' };
L.circleMarker([lieu.lat, lieu.lng], {
radius: 8,
fillColor: colors[lieu.type],
color: '#fff',
weight: 2,
fillOpacity: 0.9
})
.addTo(map)
.bindPopup('<strong>' + lieu.nom + '</strong><br>Type : ' + lieu.type);
});
// Zoomer pour voir tous les marqueurs
const bounds = L.latLngBounds(lieux.map(l => [l.lat, l.lng]));
map.fitBounds(bounds, { padding: [30, 30] });Dessiner des zones (polygones)
// Zone de livraison autour de Dakar
const zoneLivraison = L.polygon([
[14.78, -17.52],
[14.78, -17.38],
[14.62, -17.38],
[14.62, -17.52]
], {
color: '#4a90d9',
fillColor: '#4a90d9',
fillOpacity: 0.15,
weight: 2
}).addTo(map);
zoneLivraison.bindPopup('Zone de livraison gratuite');Géolocalisation : « Où suis-je ? »
document.getElementById('locateBtn').addEventListener('click', () => {
map.locate({ setView: true, maxZoom: 16 });
});
map.on('locationfound', (e) => {
L.marker(e.latlng)
.addTo(map)
.bindPopup('Vous êtes ici !')
.openPopup();
L.circle(e.latlng, { radius: e.accuracy / 2 }).addTo(map);
});
map.on('locationerror', () => {
alert('Impossible de vous localiser. Vérifiez les permissions de géolocalisation.');
});Événements : réagir aux clics sur la carte
// Afficher les coordonnées au clic
map.on('click', (e) => {
const { lat, lng } = e.latlng;
L.popup()
.setLatLng(e.latlng)
.setContent('Coordonnées : ' + lat.toFixed(4) + ', ' + lng.toFixed(4))
.openOn(map);
});Exercice
- Créez une carte du Sénégal avec les 14 capitales régionales comme marqueurs
- Ajoutez un popup avec le nom et la population de chaque ville
- Dessinez une zone polygone autour de votre quartier
- Ajoutez un bouton de géolocalisation
- Bonus : chargez les marqueurs depuis un fichier JSON avec fetch()
