Personnaliser le style d'une carte : pourquoi et comment ?
Une carte par défaut, c'est fonctionnel. Mais une carte aux couleurs de votre marque, avec les bonnes informations mises en avant et un rendu cohérent avec votre interface, c'est un avantage compétitif.
La personnalisation du style cartographique est rendue possible par les tuiles vectorielles et les spécifications de style MapLibre/Mapbox.
Pourquoi personnaliser sa carte ?
1. Cohérence visuelle avec votre marque
Votre application a une identité : couleurs, typographie, ton graphique. La carte ne devrait pas être un élément étranger au milieu de votre UI.
Exemples :
- une app immobilière peut utiliser des tons beiges et dorés,
- une app de livraison peut privilégier un style épuré et contrasté,
- une app touristique peut opter pour un rendu coloré et chaleureux.
2. Mettre en avant l'information pertinente
Selon votre cas d'usage, certaines couches sont essentielles et d'autres sont du bruit :
- pour la livraison : afficher les routes et les numéros, masquer les parcs et lacs,
- pour le tourisme : mettre en avant les POI culturels, les hôtels et les plages,
- pour l'immobilier : afficher les quartiers, les écoles, les transports.
3. Mode sombre
Le mode sombre n'est plus un gadget — c'est une attente utilisateur. Une carte personnalisable permet de créer un thème sombre adapté à votre design system.
80% des utilisateurs mobile utilisent le mode sombre. Votre carte doit suivre.
Comment fonctionne un style de carte ?
La spécification de style
Un style de carte est un fichier JSON qui décrit comment chaque élément géographique doit être rendu. Il suit la spécification MapLibre Style Spec (compatible Mapbox).
Les composants d'un style :
- Sources : d'où viennent les données (URL des tuiles TMaps)
- Layers (couches) : chaque type d'élément géographique
- Paint properties : couleurs, opacité, largeur de trait
- Layout properties : visibilité, police, taille de texte
- Filters : conditions pour afficher ou masquer des éléments
Les éléments personnalisables
Fond de carte
- couleur de fond (terre, eau),
- style des zones vertes (parcs, forêts),
- rendu des zones bâties.
Routes et voiries
- couleur par type de route (autoroute, nationale, locale),
- largeur de trait selon le niveau de zoom,
- style des ronds-points et intersections.
Labels et texte
- police de caractères,
- taille selon le zoom,
- couleur et halo (contour) pour la lisibilité,
- langue des labels (arabe, français, bilingue).
Bâtiments
- couleur des emprises bâties,
- extrusion 3D (bâtiments en volume),
- opacité selon le zoom.
Points d'intérêt
- icônes personnalisées,
- filtrage par catégorie,
- visibilité selon le niveau de zoom.
Exemples de styles courants
Style Clair (Light)
- fond blanc/gris très clair,
- routes en gris moyen,
- eau en bleu pastel,
- labels en noir,
- idéal pour les dashboards et outils professionnels.
Style Sombre (Dark)
- fond noir/gris foncé,
- routes en gris clair,
- eau en bleu nuit,
- labels en blanc,
- parfait pour les applications de tracking et monitoring.
Style Satellite Hybride
- fond satellite,
- routes et labels superposés,
- utile pour l'immobilier et l'agriculture.
Style Navigation
- contraste élevé,
- routes mises en avant,
- couleurs vives pour les directions,
- optimisé pour la lisibilité en conduite.
Bonnes pratiques de personnalisation
✔️ Contraste et lisibilité
Assurez-vous que les labels restent lisibles sur tous les fonds. Utilisez des halos (contours blancs ou noirs) autour du texte.
✔️ Cohérence entre les niveaux de zoom
Le style doit être cohérent du zoom 1 (vue pays) au zoom 18 (vue rue). Chaque élément doit apparaître au bon moment.
✔️ Performance
Trop de couches visibles = rendu plus lent. Masquez les éléments non essentiels pour votre cas d'usage.
✔️ Accessibilité
Évitez les combinaisons de couleurs problématiques pour les daltoniens (rouge/vert). Utilisez des contrastes suffisants.
✔️ Test sur mobile
Le rendu peut varier entre desktop et mobile. Testez systématiquement sur de vrais appareils.
L'outil de personnalisation TMaps
TMaps propose un éditeur de styles qui permet de :
- partir d'un style de base (clair, sombre, navigation),
- modifier chaque couche visuellement,
- prévisualiser en temps réel sur la carte de Tunisie,
- exporter le style JSON pour l'intégrer dans votre application,
- partager des styles entre membres de l'équipe.
Styles prédéfinis disponibles :
| Style | Usage principal | Caractéristiques |
|---|---|---|
| TMaps Light | Dashboards, portails | Épuré, professionnel |
| TMaps Dark | Tracking, monitoring | Sombre, contrasté |
| TMaps Navigation | Apps de mobilité | Haute lisibilité |
| TMaps Satellite | Immobilier, agriculture | Imagerie + labels |
| TMaps Minimal | Interfaces épurées | Très simplifié |
Comment appliquer un style personnalisé
Étape 1 : Choisir un style de base
Partez d'un des styles prédéfinis TMaps plutôt que de zéro.
Étape 2 : Identifier les modifications
Listez les changements nécessaires : couleurs principales, couches à masquer, labels à modifier.
Étape 3 : Éditer le style
Utilisez l'éditeur TMaps ou modifiez directement le fichier JSON.
Étape 4 : Intégrer dans votre application
Référencez l'URL du style dans votre configuration MapLibre.
Étape 5 : Tester et itérer
Vérifiez le rendu à différents niveaux de zoom, sur différents appareils, en mode clair et sombre.
Conclusion
La personnalisation du style cartographique est un levier de différenciation souvent sous-exploité. Une carte qui s'intègre parfaitement à votre interface renforce la crédibilité de votre produit et améliore l'expérience utilisateur.
Avec les tuiles vectorielles TMaps et la spécification MapLibre, cette personnalisation est à la portée de tout développeur.