Navigation
Navigation
Nom fonctionnel: Navigation
À quoi sert ce widget ?
Regroupe les actions de navigation essentielles pour se déplacer efficacement dans la carte.
Conseil: un viewer “trop outillé” devient vite bruyant. Activez ce widget uniquement s’il sert un parcours utilisateur clair.
Quand l’activer
- Quand l’utilisateur doit piloter sa vue (zoom, couches, plein écran, repérage).
- Quand vous voulez des contrôles cohérents et immédiatement compréhensibles, quel que soit le moteur cartographique.
- Quand vous cherchez à réduire les frictions (moins de clics, moins d’aller-retour, plus de lisibilité).
En clair
- Côté utilisateur: Le confort d’usage augmente fortement dès la première prise en main.
- Côté intégration: Vérifiez la cohérence entre projection, échelle, coordonnées et basemaps.
Prise en main
Accéder au widget
- Ouvrez le widget depuis la barre d’outils (ou via son bouton dédié).
- Vérifiez son emplacement et sa lisibilité (desktop et mobile).
Le configurer sans se tromper
- Choisissez un conteneur adapté (toolbar, drawer, dialog) pour éviter de masquer la carte.
- Validez les interactions avec les autres widgets (raccourcis, activation simultanée, conflits).
Ce que l’utilisateur voit
- Regroupement des contrôles de déplacement et zoom carte.
- Accès rapide aux actions de recentrage selon l’implémentation.
- Comportement pensé pour une prise en main immédiate.
Parcours utilisateur (le plus courant)
- Utilisez les contrôles pour naviguer précisément dans la zone utile.
- Recentrez la carte avant d’ouvrir un outil d’analyse.
- Combinez avec échelle et curseur pour un pilotage précis.
Exemples concrets
- Accélérer la lecture de carte (moins de clics pour zoomer, afficher/masquer, contextualiser).
- Donner un repère clair à l’utilisateur (échelle, coordonnées, état de la vue).
- Réduire les frictions sur les actions répétitives (plein écran, recentrage, bascule de contexte).
Configuration (aperçu)
| Option | Type | Défaut | Description |
|---|---|---|---|
widgetId | string | - | Identifiant unique de l’instance Navigation. |
active | boolean | false | Active l’ouverture du widget au démarrage. |
inToolbar | boolean ou objet ou string | selon widget | Définit si le widget est visible dans une toolbar, et sous quelle forme. |
container | string ou objet | selon widget | Choisit le conteneur de rendu (drawer, dialog, floating, toolbar-tabs, hidden). |
Pour le détail complet (et toujours à jour), utilisez la référence technique et le schéma ci-dessous.
Liens techniques et code
- Référence technique du widget: Référence technique du widget
- Schéma principal:
schemas/navigationConfigSchema - API technique du widget:
types/NavigationConfig - Code source (déclaration):
packages/common/src/lib/widgets/navigation/navigation.declaration.ts - Code source (config):
packages/common/src/lib/widgets/navigation/navigation.config.ts
Exemple minimal (copier-coller)
{ "widgetId": "navigation", "widgetClass": "Navigation", "active": false, "inToolbar": true, "config": {}}Exemple avancé
{ "widgetId": "navigation-advanced", "widgetClass": "Navigation", "active": true, "handleOpenAtStartup": false, "inToolbar": { "type": "button", "toolbarId": "default-toolbar", "order": 10 }, "onActivate": { "deactivate": { "classes": [] } }, "config": {}}Points d’attention
- Un bouton peut être bien configuré mais masqué par le conteneur.
- La géolocalisation dépend des permissions navigateur et du HTTPS.
- Le comportement peut différer légèrement entre moteurs cartographiques.
Dépannage
| Symptôme | Vérification rapide |
|---|---|
| Le bouton est visible mais inactif. | Vérifiez l’état active et les interactions concurrentes. |
| Le recentrage est imprécis. | Contrôlez la projection et les coordonnées utilisées. |
FAQ
Ces widgets sont-ils adaptés au mobile ?
Oui, avec des ajustements d’ergonomie selon la taille écran.
Peut-on les regrouper dans la même toolbar ?
Oui, c’est recommandé pour un parcours simple.
Captures à ajouter
- (Capture à ajouter)
/assets/screenshots/TODO/navigation-01.png: widget ouvert avec configuration standard. - (Capture à ajouter)
/assets/screenshots/TODO/navigation-02.png: interaction principale et résultat attendu.
Liens PDF source
US016 - Navigation_ee187d2aa3db4c76bb7a93aeb6450994-120226-0857-98.pdf