TECHNOLOGIES / Leaflet
Leaflet : la cartographie interactive dans nos logiciels métier
Leaflet est une bibliothèque JavaScript open source pour les cartes web interactives. Légère (38 Ko), sans dépendance et compatible mobile, elle est notre référence pour intégrer des cartes dans les logiciels sur mesure.
Chez SmartBooster, Leaflet est couplé à un écosystème de services : Leaflet-Draw pour le dessin, Turf.js pour les calculs géographiques, les APIs gouvernementales françaises pour le géocodage et les contours administratifs, OSRM pour le routage.
PRÉSENTATION
Qu'est-ce que Leaflet ?
Leaflet est une bibliothèque JavaScript open source publiée sous licence BSD. Elle fournit une API simple pour créer des cartes interactives dans un navigateur : affichage de fonds de carte en tuiles, placement de marqueurs, dessins de formes, gestion des événements et des popups.
Son architecture repose sur le concept de couches superposées : un fond de carte (OpenStreetMap, ArcGIS, Mapbox, IGN...) sert de base, et des couches vectorielles s'y ajoutent pour afficher les données métier. Chaque couche est indépendante et peut être activée ou retirée dynamiquement.
L'écosystème de plugins étend les capacités de base : Leaflet-Draw ajoute le dessin interactif de formes, Leaflet.markercluster regroupe les marqueurs proches, et les extensions Géoportail donnent accès aux fonds de carte IGN officiels.
POURQUOI LEAFLET
Ce qui en fait notre bibliothèque cartographique de référence
Leaflet répond aux contraintes réelles des logiciels métier : légèreté, pas de coût de licence, extensibilité et intégration directe dans Vue.js.
Bibliothèque légère et rapide
38 Ko minifiés, sans dépendance. Leaflet charge vite et fonctionne sur tous les navigateurs y compris mobiles. Idéal pour des applications métier embarquant une carte sans alourdir le bundle.
Open source, sans clé API obligatoire
Leaflet est une bibliothèque MIT. Le fond de carte OpenStreetMap est gratuit et libre. Pas de coût de licence, pas de quota par défaut pour les usages métier standards.
Ecosystème de plugins riche
Leaflet-Draw pour le dessin de formes, Leaflet.markercluster pour le groupement de marqueurs, Geoportal Extensions pour les fonds IGN. L'outil s'étend selon le besoin sans changer de bibliothèque.
Intégration Vue.js native
Leaflet s'intègre directement dans un composant Vue via onMounted et onUnmounted. Les données métier pilotent la carte sans couche d'abstraction supplémentaire.
Choix du fond de carte selon le contexte
OpenStreetMap, ArcGIS satellite, Mapbox, Géoportail IGN : chaque projet choisit le fond adapté à son usage, avec une bascule possible en cours d'utilisation.
Calculs géographiques avec Turf.js
Surfaces (polygones, rectangles, cercles), distances, appartenance point-polygone, isochrones : Turf.js étend Leaflet avec des calculs géodésiques précis sans appel serveur.
NOTRE USAGE
Ce que nous construisons avec Leaflet
De la simple localisation à la planification territoriale, Leaflet porte les fonctionnalités cartographiques de nos logiciels sur mesure.
Carte interactive avec dessin et calculs
Notre composant Leaflet de référence intègre Leaflet-Draw pour le dessin de polygones, rectangles et cercles, avec calcul automatique de la surface (Turf.js) affiché dans le popup de chaque forme.
Les marqueurs sont placés au clic ou depuis une adresse saisie. L'adresse postale est récupérée automatiquement par géocodage inverse via l'API Adresse du gouvernement, sans aucune clé API requise pour le territoire français.
Le menu d'actions à droite de la carte est entièrement personnalisable : emplacement, couleur, forme des boutons, et la fonction derrière chaque action est codée à la main pour coller exactement au besoin métier.
Marqueurs avec géocodage inverse automatique
Au clic sur la carte, les coordonnées (latitude, longitude) sont récupérées et l'adresse postale est obtenue automatiquement via l'API Adresse du gouvernement. Le popup affiche l'adresse complète sans saisie manuelle.
Dessin de zones avec Leaflet-Draw
L'extension Leaflet-Draw permet de tracer des polygones, rectangles, cercles et polylignes directement sur la carte. Les textes sont intégralement traduits en français et la surface est calculée automatiquement avec Turf.js.
Calcul d'itinéraire et distance
L'itinéraire routier entre deux points est calculé via OSRM (Open Source Routing Machine) basé sur OpenStreetMap. La distance à vol d'oiseau utilise la formule de Haversine via Turf.js, sans appel réseau.
Données territoriales et planification
Les contours des communes (API Geo gouv.fr) et des départements (OpenDataSoft) s'affichent en superposition sur la carte. Chaque zone peut recevoir un style distinct (couleur, opacité) pour représenter des territoires commerciaux, des zones de chalandise ou des secteurs d'intervention.
Le calcul isochrone (zone accessible en voiture en 1h) utilise OpenRouteService ou l'API Mapbox selon la configuration. La vérification qu'un point est dans une surface dessinée est faite côté client avec Turf.js, sans appel réseau supplémentaire.
Zones isochrones (accessibilité en 1h)
OpenRouteService ou l'API Mapbox Isochrone calculent la zone géographique accessible en voiture depuis un point donné. Utile pour les logiciels de planification commerciale ou de gestion d'interventions terrain.
Contours administratifs français
Les contours des communes sont récupérés via l'API Geo du gouvernement, les départements via OpenDataSoft. Ces données permettent d'afficher des zones réglementaires ou commerciales alignées sur le découpage administratif réel.
Vérification point dans une surface
Turf.js vérifie si un marqueur se trouve à l'intérieur d'un polygone dessiné sur la carte. Le résultat s'affiche directement en popup sur chaque point.
SERVICES UTILISÉS
L'écosystème de services autour de Leaflet
Leaflet est une interface de rendu : les données géographiques viennent de services spécialisés, gratuits ou avec compte selon l'usage.
OpenStreetMap
Fond de carte collaboratif et gratuit. Notre couche de tuiles par défaut, sans clé API ni quota. Couverture mondiale, données détaillées en France.
API Adresse (data.gouv.fr)
Géocodage et géocodage inverse gratuits pour le territoire français. Utilisé pour obtenir l'adresse depuis des coordonnées et inversement.
API Geo (geo.api.gouv.fr)
Données administratives françaises : communes, départements, régions. Fournit les contours GeoJSON des communes à partir d'un code INSEE.
OSRM
Calcul d'itinéraires routiers open source basé sur OpenStreetMap. Retourne le tracé GeoJSON, la distance et la durée de trajet. Gratuit.
Turf.js
Bibliothèque de calculs géographiques côté client : surfaces, distances, appartenance point-polygone, lignes d'isodistance. Aucun appel réseau.
OpenRouteService / Mapbox
Calcul isochrone (zones accessibles en N minutes). OpenRouteService est gratuit avec compte, Mapbox est payant au-delà des quotas gratuits.
Géoportail (IGN)
Fonds de carte officiels français : Plan IGN et orthophotos haute résolution. Intégré via geoportal-extensions-leaflet, clé API gratuite requise.
OpenDataSoft
Contours GeoJSON des départements français via l'API publique. Utilisé pour afficher le découpage départemental sur la carte.
ArcGIS (Esri)
Fond de carte satellite World Imagery. Accessible gratuitement pour un usage non commercial sous conditions d'attribution.
Pour aller plus loin
Documentation utile
Documentation officielle de toutes les classes, méthodes et options de Leaflet.
Catalogue officiel des plugins : dessin, clustering, heatmaps, recherche, export...
Documentation de la bibliothèque de calculs géospatiaux utilisée avec Leaflet.
Documentation de l'API de géocodage gratuite pour le territoire français.
Pour aller plus loin
Approfondir votre réflexion
Zones tracées, isochrones, store locator, clustering : les cas d'usage métier que nous construisons avec Leaflet dans les logiciels sur mesure.
Le fond de carte open source utilisé par défaut avec Leaflet. Données mondiales collaboratives, libres et gratuites.
Leaflet est intégré dans des composants Vue.js dans nos projets Symfony. Le cycle de vie Vue pilote l'initialisation et le nettoyage de la carte.
La cartographie interactive est une fonctionnalité récurrente des logiciels métier : gestion de chantiers, planification d'interventions, zones commerciales.
Vous avez un projet ?
Contactez-nous pour savoir comment nous pouvons vous aider.