MAPCN : des composants de carte prêts à l’emploi pour React
📌 MAPCN est une collection de composants de carte interactifs conçus pour React, construits sur MapLibre GL et stylés avec Tailwind CSS. Le projet fournit des blocs de carte qu’on intègre directement dans une application React ou Next.js, sans avoir à construire une carte depuis zéro. Chaque composant est personnalisable, accessible, et compatible avec shadcn/ui.
L’idée est de proposer des cartes qui ressemblent à ce qu’on trouve dans des applications modernes — un tableau de bord d’analyse par région, un suivi de livraison en temps réel, un parcours de course à pied avec statistiques, ou une carte de stations de recharge pour véhicules électriques. Ces exemples sont disponibles sous forme de blocs complets qu’on peut installer et adapter. L’ensemble suit la même logique que shadcn/ui : on copie le composant dans son projet, et on le modifie à sa guise.
- 🗺️ Composants de carte interactifs pour React
- 🎨 Stylés avec Tailwind CSS et compatibles shadcn/ui
- 🌙 Support du thème clair et sombre
- 📊 Blocs prêts à l’emploi (analyse, livraison, parcours, recharge)
- 🔧 Personnalisables et accessibles
- 📦 Gratuit et open source
Les composants couvrent les usages courants des cartes dans les applications web. Un bloc analytique superpose des indicateurs chiffrés sur une carte interactive. Un bloc suivi affiche un trajet de livraison avec des points d’étape. Un bloc parcours montre un tracé de course avec la distance, la durée et les calories. Chaque bloc est construit avec les mêmes briques de base — le composant de carte, les marqueurs, les contrôles — qu’on peut assembler différemment selon ses besoins.
Le projet s’appuie sur MapLibre GL pour le rendu des cartes, ce qui permet des interactions fluides — zoom, déplacement, animations de vol vers un point. Le style visuel est géré par Tailwind CSS, ce qui rend chaque élément ajustable directement dans le code. Le support du thème sombre est intégré, avec détection automatique des préférences système.
MAPCN s’inscrit dans une logique de composants copiables plutôt que de bibliothèque installée. On ne charge pas un paquet complet : on prend ce dont on a besoin, on le dépose dans son projet, et on l’adapte. L’approche est la même que shadcn/ui, dont le projet suit les conventions. L’ensemble vise à réduire le temps passé à construire des interfaces cartographiques en proposant des points de départ solides, visuellement aboutis, et directement modifiables.
