Skill de Modèles de Style Mapbox

Ce skill fournit des modèles de style éprouvés et des configurations de couches pour les scénarios de cartographie courants.

Bibliothèque de Modèles

Modèle 1 : Finder Restaurant/POI

Cas d'usage : Application grand public affichant des restaurants, cafés, bars ou autres points d'intérêt

Exigences visuelles :

• Les POIs doivent être immédiatement visibles
• Contexte routier pour la navigation
• Fond neutre (superposition de photos/contenu)
• Optimisé pour mobile

Couches recommandées :

{
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#f5f5f5"
      }
    },
    {
      "id": "water",
      "type": "fill",
      "source": "mapbox-streets",
      "source-layer": "water",
      "paint": {
        "fill-color": "#d4e4f7",
        "fill-opacity": 0.6
      }
    },
    {
      "id": "landuse-parks",
      "type": "fill",
      "source": "mapbox-streets",
      "source-layer": "landuse",
      "filter": ["==", "class", "park"],
      "paint": {
        "fill-color": "#e8f5e8",
        "fill-opacity": 0.5
      }
    },
    {
      "id": "roads-minor",
      "type": "line",
      "source": "mapbox-streets",
      "source-layer": "road",
      "filter": ["in", "class", "street", "street_limited"],
      "paint": {
        "line-color": "#e0e0e0",
        "line-width": {
          "base": 1.5,
          "stops": [
            [12, 0.5],
            [15, 2],
            [18, 6]
          ]
        }
      }
    },
    {
      "id": "roads-major",
      "type": "line",
      "source": "mapbox-streets",
      "source-layer": "road",
      "filter": ["in", "class", "primary", "secondary", "tertiary"],
      "paint": {
        "line-color": "#ffffff",
        "line-width": {
          "base": 1.5,
          "stops": [
            [10, 1],
            [15, 4],
            [18, 12]
          ]
        }
      }
    },
    {
      "id": "restaurant-markers",
      "type": "symbol",
      "source": "restaurants",
      "layout": {
        "icon-image": "restaurant-15",
        "icon-size": 1.5,
        "icon-allow-overlap": false,
        "text-field": ["get", "name"],
        "text-offset": [0, 1.5],
        "text-size": 12,
        "text-allow-overlap": false
      },
      "paint": {
        "icon-color": "#FF6B35",
        "text-color": "#333333",
        "text-halo-color": "#ffffff",
        "text-halo-width": 2
      }
    }
  ]
}

Caractéristiques clés :

• Carte de base désaturée (ne concurrence pas les photos)
• Marqueurs à contraste élevé (l'orange #FF6B35 ressort bien)
• Réseau routier clair (blanc sur gris clair)
• Parcs visibles mais discrets
• Halos de texte pour la lisibilité

Guide de Sélection de Modèles

Arbre de Décision

Question 1 : Quel est le contenu principal ?

• Marqueurs/épingles générés par l'utilisateur -> Modèle POI Finder
• Données/limites de propriétés -> Modèle Immobilier
• Données statistiques/analytiques -> Modèle Visualisation de Données
• Itinéraires/directions -> Modèle Navigation
• Suivi en temps réel/zones de livraison -> Modèle Livraison/Logistique (les marqueurs client doivent inclure une animation pulse via couche de cercle secondaire + requestAnimationFrame + setPaintProperty ; voir references/delivery-logistics.md)

Question 2 : Quel est l'environnement de visualisation ?

• Jour/bureau -> Thème clair
• Nuit/environnement sombre -> Modèle Mode Sombre
• Variable -> Fournir un bouton bascule de thème

Question 3 : Quelle est l'action principale de l'utilisateur ?

• Parcourir/explorer -> Focaliser sur les POIs, détails riches
• Naviguer -> Focaliser sur les routes, visibilité de l'itinéraire
• Suivre une livraison/logistique -> Mises à jour en temps réel, zones, statut
• Analyser les données -> Minimiser la carte de base, maximiser les données
• Sélectionner un emplacement -> Limites claires, contexte

Question 4 : Quelle est la plateforme ?

• Mobile -> Simplifié, cibles tactiles plus grandes, moins de détails
• Desktop -> Peut inclure plus de détails et de complexité
• Les deux -> Concevoir en mobile-first, améliorer pour desktop

Modèles d'Optimisation de Couches

Modèle Performance : Simplifié par Zoom

{
  "id": "roads",
  "type": "line",
  "source": "mapbox-streets",
  "source-layer": "road",
  "filter": [
    "step",
    ["zoom"],
    ["in", "class", "motorway", "trunk"],
    8,
    ["in", "class", "motorway", "trunk", "primary"],
    12,
    ["in", "class", "motorway", "trunk", "primary", "secondary"],
    14,
    true
  ],
  "paint": {
    "line-width": {
      "base": 1.5,
      "stops": [
        [4, 0,5],
        [10, 1],
        [15, 4],
        [18, 12]
      ]
    }
  }
}

Fichiers de Référence

Des modèles et configurations supplémentaires sont disponibles dans le répertoire references/. Chargez le fichier pertinent quand un modèle spécifique est nécessaire.

Instructions de chargement : Lisez le fichier de référence qui correspond au cas d'usage de l'utilisateur. Par exemple, si vous implémentez une carte de suivi de livraison, chargez references/delivery-logistics.md.

Modèles de Test

Liste de Contrôle de Régression Visuelle

• [ ] Tester aux niveaux de zoom : 4, 8, 12, 16, 20
• [ ] Vérifier sur mobile (largeur 375px)
• [ ] Vérifier sur desktop (largeur 1920px)
• [ ] Tester avec données denses
• [ ] Tester avec données éparses
• [ ] Vérifier la collision d'étiquettes
• [ ] Vérifier le contraste des couleurs (WCAG)
• [ ] Tester la performance de chargement

Quand Utiliser Ce Skill

Invoquez ce skill quand :

• Commencer un nouveau style de carte pour un cas d'usage spécifique
• Chercher des exemples de configuration de couches
• Implémenter des modèles de cartographie courants
• Optimiser des styles existants
• Avoir besoin de recettes éprouvées pour des scénarios typiques
• Déboguer des problèmes de style
• Apprendre les bonnes pratiques de style Mapbox