Carte du Maroc
خريطة المغربMorocco map
Bêta
src/dsm/components/morocco-map.tsxLa carte des douze régions du Royaume, territoire entier, sous forme de SVG accessible : sélecteur de région, carte choroplèthe pour des chiffres par région, repères (agences, centres d'accueil) avec fenêtre contextuelle, ou simple illustration. Les noms de régions existent dans les quatre locales.
Import
import { MoroccoMap } from "@/dsm/components/morocco-map";Exemples
Sélecteur de région
Carte contrôlée avec numéros de région et légende dynamique.
LTR
Rabat-Salé-Kénitra · Chef-lieu : Rabat
La liste et la carte sont équivalentes.
Carte choroplèthe
Un indicateur par région, cinq paliers dans la couleur primaire, légende automatique.
LTR
Démarches en ligne abouties en 2026, par région
22 k1.082 k
Survolez ou sélectionnez une région
Repères et fenêtres contextuelles
Des lieux (agences, centres d'accueil) placés par coordonnées GPS ; chaque repère ouvre une fenêtre contextuelle.
LTR
Centres d'accueil — cliquez sur un repère
Illustration
Carte non interactive avec noms de régions, pour une page institutionnelle.
LTR
Usage
Quand l'utiliser
- Utilisez la carte comme sélecteur quand l'utilisateur raisonne géographiquement (« dans quelle région se trouve votre commune ? »), en gardant toujours une liste ou un `Select` équivalent à côté.
- Utilisez la variante choroplèthe pour comparer un indicateur entre régions (délais, volumes, couverture) ; les cinq paliers sont calculés automatiquement.
- Utilisez les repères (`pins`) pour situer des lieux physiques — agences, centres d'accueil, guichets — avec l'adresse et les horaires dans la fenêtre contextuelle ; `projectMoroccoPoint` place n'importe quelle coordonnée GPS.
Quand ne pas l'utiliser
- N'affichez jamais une carte du Royaume amputée d'une partie du territoire : le composant embarque les douze régions et ne permet pas d'en retirer.
- N'utilisez pas la carte comme unique moyen de choisir une région : sur mobile ou au lecteur d'écran, un `Select` reste plus efficace.
- Ne l'utilisez pas pour une précision infra-régionale (provinces, communes) : les tracés sont simplifiés pour l'affichage, pas pour la mesure.
Accessibilité & langues
Accessibilité
- En mode interactif, chaque région est un `role="button"` focusable avec `aria-pressed` et un libellé complet (nom et valeur) ; Entrée et Espace sélectionnent.
- La légende sous la carte est une zone `aria-live` qui annonce la région survolée ou sélectionnée.
- Les repères sont de vrais boutons HTML superposés à la carte : focus visible, activation clavier, et fenêtre contextuelle Base UI (Échap pour fermer).
- La couleur n'est jamais la seule information : les valeurs sont dans les libellés et la légende, et les numéros de région peuvent être imprimés sur la carte.
RTL & multilingue
- La géométrie ne se retourne pas ; seuls les textes (libellés, légende) suivent la locale et la direction d'écriture.
- Les noms de régions sont fournis en arabe, amazighe, français et anglais ; les noms amazighs attendent une relecture par un locuteur natif.
- Fond de carte : geoBoundaries (gbOpen, MAR ADM1), licence ODbL 1.0, simplifié pour l'affichage.
Propriétés
MoroccoMap
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| value | MoroccoRegionId | null | — | Région sélectionnée (contrôlé). |
| defaultValue | MoroccoRegionId | null | null | Région sélectionnée par défaut (non contrôlé). |
| onValueChange | (id, region) => void | — | Appelé à la sélection ; un second clic désélectionne (id = null). |
| values | Partial<Record<MoroccoRegionId, number>> | — | Valeur numérique par région, rendue en cinq paliers de la couleur primaire. |
| formatValue | (value, region) => ReactNode | — | Formatage des valeurs (par défaut Intl.NumberFormat de la locale). |
| labels | "none" | "code" | "name" | none | Texte imprimé dans chaque région. Les noms ne tiennent qu'en grande taille. |
| interactive | boolean | true si onValueChange | Rend les régions focusables et cliquables. |
| caption | boolean | true | Légende vivante sous la carte (région survolée ou sélectionnée). |
| legend | boolean | true | Échelle des paliers quand `values` est fourni. |
| pins | MoroccoMapPin[] | — | Repères superposés à la carte ; chacun ouvre une fenêtre contextuelle. |
| pinLabels | boolean | false | Affiche le libellé de chaque repère à côté du marqueur. |
MoroccoMapPin
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id* | string | — | Identifiant unique du repère. |
| coords* | [longitude, latitude] | — | Position GPS ; les chef-lieux sont disponibles via `moroccoRegions[].capitalCoords`. |
| label* | string | — | Nom du lieu : titre de la fenêtre et nom accessible du bouton. |
| description | ReactNode | — | Sous-titre de la fenêtre contextuelle. |
| content | ReactNode | — | Contenu libre de la fenêtre (adresse, horaires, liens). |
| tone | "rouge" | "primary" | "ink" | rouge | Couleur du marqueur. |
moroccoRegions (@/dsm/data/morocco-regions)
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id | MoroccoRegionId | — | Identifiant stable (ex. `casablanca-settat`). |
| code | string | — | Numéro officiel de la région, 01 à 12. |
| name | Record<Locale, string> | — | Nom dans les quatre locales. |
| capital | string | — | Chef-lieu de la région. |
| capitalCoords | [longitude, latitude] | — | Position GPS du chef-lieu, prête pour un repère. |