Skill Cartographie Mapbox

Ce skill fournit une expertise cartographique pour vous aider à concevoir des cartes efficaces, belles et fonctionnelles avec Mapbox.

Principes Cartographiques Fondamentaux

Hiérarchie Visuelle

Les cartes doivent guider l'attention du lecteur vers ce qui importe le plus :

Plus important : POIs, localisation utilisateur, points forts du tracé
Secondaire : Routes principales, noms de villes, points de repère
Tertiaire : Routes mineures, limites administratives
Arrière-plan : Eau, usage des sols, terrain

Implémentation :

Utilisez la taille, l'intensité des couleurs et le contraste pour établir la hiérarchie
Éléments primaires : contraste élevé, symboles plus grands, couleurs vives
Éléments d'arrière-plan : contraste faible, couleurs atténuées, texte plus petit

Théorie des Couleurs pour les Cartes

Harmonie Chromatique :

Couleurs analogues : Utilisez des couleurs adjacentes sur la roue chromatique (bleu-vert-turquoise) pour des designs cohésifs
Couleurs complémentaires : Utilisez des couleurs opposées (bleu/orange, rouge/vert) pour un contraste élevé et une emphase
Monochromatique : Une seule teinte avec saturation/luminosité variables pour des designs élégants et minimalistes

Psychologie des Couleurs :

Bleu : Eau, confiance, calme, professionnel (par défaut pour les plans d'eau)
Vert : Parcs, nature, croissance, écologique (végétation, parcs)
Rouge/Orange : Urgent, important, restauration (alertes, restaurants)
Jaune : Attention, mise en évidence, avertissement (signaux d'alerte, éléments sélectionnés)
Gris : Neutre, arrière-plan, routes (infrastructure)

Accessibilité :

Assurez un ratio de contraste de 4,5:1 pour le texte (WCAG AA)
Ne vous fiez pas uniquement à la couleur pour transmettre l'information
Testez les designs avec des simulateurs de daltonisme
Évitez les combinaisons rouge/vert pour les distinctions critiques

Modèles de Palette Couleur :

Thème Clair (Jour/Professionnel) :

{
  "background": "#f5f5f5",
  "water": "#a0c8f0",
  "parks": "#d4e7c5",
  "roads": "#ffffff",
  "buildings": "#e0e0e0",
  "text": "#333333"
}

Thème Sombre (Mode Nuit) :

{
  "background": "#1a1a1a",
  "water": "#0d47a1",
  "parks": "#2e7d32",
  "roads": "#3a3a3a",
  "buildings": "#2d2d2d",
  "text": "#ffffff"
}

Règle couleur des routes pour les thèmes sombres : Les routes doivent utiliser un gris neutre sombre (#3a3a3a), visiblement distinct de l'arrière-plan mais non coloré. Ne stylisez jamais les routes avec de l'ambre, du bleu ou d'autres teintes — réservez la couleur aux couches de données applicatives (tracés, marqueurs). Les routes de base colorées et les couches de données colorées entreront en concurrence visuelle. Les routes locales qui se fondent dans l'arrière-plan (#1e1e1e sur #1a1a1a) créent un problème de « labels flottants » où les noms de rues apparaissent sans route visible en dessous.

Contraste Élevé (Accessibilité) :

{
  "background": "#000000",
  "water": "#0066ff",
  "parks": "#00ff00",
  "roads": "#ffffff",
  "buildings": "#808080",
  "text": "#ffffff"
}

Vintage/Rétro :

{
  "background": "#f4e8d0",
  "water": "#b8d4d4",
  "parks": "#c8d4a4",
  "roads": "#d4c4a8",
  "buildings": "#e4d4c4",
  "text": "#4a3828"
}

Typographie à l'Échelle de la Carte

Sélection de Police :

Sans-serif (Roboto, Open Sans) : Moderne, épuré, haute lisibilité à petite taille - utilisez pour les libellés
Serif (Noto Serif) : Traditionnel, formel - utilisez avec parcimonie pour les titres ou cartes historiques
Monospace : Données techniques, coordonnées

Taille du Texte :

Libellés de lieux (villes, POIs) : 11-14px
Libellés de rues : 9-11px
Libellés d'éléments (parcs) : 10-12px
Titre de la carte : 16-20px
Attribution : 8-9px

Placement des Libellés :

Libellés ponctuels : Centré ou légèrement décalé (évitez le chevauchement avec le symbole)
Libellés de lignes : Suivez la courbe de la ligne, répétez pour les longs éléments
Libellés de zones : Centré dans le polygone, dimensionné convenablement
Priorisez : Les éléments majeurs sont étiquetés en premier, les éléments mineurs si l'espace le permet

Stratégie de Niveaux de Zoom

Zoom 0-4 (Monde à Continent) :

Limites pays majeures
Noms d'océans et de mers
Capitales seulement

Zoom 5-8 (Pays à État) :

Limites d'État/province
Grandes villes
Routes principales
Grands plans d'eau

Zoom 9-11 (Aire Métropolitaine) :

Limites de ville
Quartiers
Toutes les autoroutes et routes principales
Parcs et points de repère

Zoom 12-15 (Quartier) :

Toutes les rues
Empreintes des bâtiments
POIs (restaurants, magasins)
Noms de rues

Note : Le style Streets hébergé de Mapbox affiche par défaut la plupart des POIs autour du zoom 14. Pour les styles personnalisés, commencez les POIs au zoom 12 — c'est l'échelle du quartier où la densité est gérable et les utilisateurs naviguent. Le zoom 14 est tardif ; le zoom 10 (échelle métropolitaine) est bien trop précoce et crée un encombrement d'icônes sévère.

Zoom 16-22 (Niveau Rue) :

Tous les détails
Numéros de maison
Parkings
POIs granulaires

Conseils d'Implémentation Spécifiques à Mapbox

Bonnes Pratiques de Couches de Style

Ordre des Couches (de bas en haut) :

Arrière-plan (couleur unie ou motif)
Utilisation des terres (parcs, résidentiel, commercial)
Plans d'eau (océans, lacs, rivières)
Terrain/hillshade (si utilisation de l'élévation)
Bâtiments (empreintes 3D ou 2D)
Routes (autoroutes → rues locales)
Limites (lignes pays, État)
Libellés (noms de lieux, noms de rues)
Symboles POI
Contenu généré par l'utilisateur (tracés, marqueurs)

Erreur courante : Les développeurs placent souvent la ligne de tracé ou les marqueurs actifs de leur application en dessous des symboles POI, en raisonnant que « les POIs doivent rester visibles ». C'est l'inverse — le contenu généré par l'utilisateur (votre tracé, localisation sélectionnée, position utilisateur) est la couche la plus importante et doit s'afficher au-dessus de tout, y compris les POIs. Une ligne de tracé qui couvre une icône POI est acceptable ; un tracé obscurci par des icônes POI ne l'est pas.

Considérations du Contexte de la Carte

Connaître Votre Audience :

Grand public : Simplifiez, utilisez des motifs familiers (style Google/Apple)
Utilisateurs techniques : Incluez plus de détails, couches techniques, précision des données
Experts du domaine : Montrez des données spécialisées, utilisez la symbologie spécifique au domaine

Considérations Plateforme :

Mobile : Cibles tactiles plus grandes (44x44px minimum), designs plus simples, lisibles à distance de lecture
Desktop : Peut inclure plus de détails, interactions au survol, superpositions complexes
Impression : Contraste plus élevé, texte plus grand, considérez l'espace couleur CMYK
Extérieur/Lumineux : Contraste plus élevé, évitez les gris subtils

Optimisation par Cas d'Usage :

Navigation : Mettez en avant les routes, hiérarchie claire, visibilité du tracé
Visualisation de données : Carte de base atténuée, laissez les données ressortir
Narration : Guidez l'attention du lecteur, établissez l'ambiance avec les couleurs
Sélection de localisation : Montrez clairement les POIs, fournissez du contexte
Analyse : Incluez les couches pertinentes, maintenez la clarté à différents zooms

Fichiers de Référence

Pour des conseils détaillés sur des sujets spécifiques, chargez ces références selon vos besoins :

references/scenarios.md — Conseils pour scénarios courants (Finder Restaurants, Immobilier, Visualisation de Données, Navigation)
references/performance-testing.md — Optimisation des performances, checklist de test et erreurs courantes à éviter

Quand Utiliser Ce Skill

Invoquez ce skill quand :

Concevoir un nouveau style de carte
Choisir des couleurs pour les éléments de carte
Prendre des décisions sur la hiérarchie visuelle
Optimiser pour des cas d'usage spécifiques
Dépanner les problèmes de visibilité
Assurer l'accessibilité
Créer des cartes à thème (mode sombre, vintage, etc.)

mapbox-cartography