ScaleBar
ScaleBar
Nom fonctionnel: Échelle
À quoi sert ce widget ?
Affiche l’échelle de carte pour contextualiser immédiatement les distances réelles.
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
- Affichage d’échelle graphique synchronisé avec le zoom.
- Lecture immédiate de l’ordre de grandeur des distances.
- Composant léger, utile en permanence.
Parcours utilisateur (le plus courant)
- Vérifiez l’échelle avant toute mesure ou interprétation.
- Contrôlez les variations lors du zoom/dézoom.
- Utilisez-la comme repère dans les captures ou rapports.
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 ScaleBar. |
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/scaleBarConfigSchema - API technique du widget:
types/ScaleBarConfig - Code source (déclaration):
packages/common/src/lib/widgets/scale-bar/scale-bar.declaration.ts - Code source (config):
packages/common/src/lib/widgets/scale-bar/scale-bar.config.ts
Exemple minimal (copier-coller)
{ "widgetId": "scale-bar", "widgetClass": "ScaleBar", "active": false, "inToolbar": true, "config": {}}Exemple avancé
{ "widgetId": "scale-bar-advanced", "widgetClass": "ScaleBar", "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/scale-bar-01.png: widget ouvert avec configuration standard. - (Capture à ajouter)
/assets/screenshots/TODO/scale-bar-02.png: interaction principale et résultat attendu.
Liens PDF source
US017 - Echelle_7d025fe1b3f34b1cbd1eaa1f568e95b7-120226-0857-100.pdf