Introduction
https://github.com/brianmcleer/rightclick-widget
Le widget Clic droit ajoute des outils cartographiques contextuels à ArcGIS Experience Builder. Lorsqu’un utilisateur clique avec le bouton droit sur la carte, un menu s’affiche et propose plusieurs actions configurables. Il donne accès à des fonctions comme le zoom, la mesure, la copie de coordonnées, le placement de repères et de texte, ainsi que le géocodage inversé.
Interaction utilisateur
Une fois le widget déployé, les utilisateurs peuvent cliquer avec le bouton droit n’importe où sur la carte pour ouvrir un menu contextuel. Selon la configuration, les actions suivantes peuvent être disponibles :
Actions de navigation :
- Zoom avant / Zoom arrière : ajuste le niveau de zoom à l’emplacement du clic
- Centrer ici : déplace la carte pour centrer l’affichage sur le point cliqué
Actions sur les coordonnées :
- Copier les coordonnées : copie l’emplacement dans le presse-papiers selon le système de coordonnées configuré
- Tracer des coordonnées : place des repères numérotés avec un style et des étiquettes de coordonnées configurables
- Placer un repère : place des repères simples à l’apparence personnalisable
Actions sur les graphiques :
- Ajouter du texte : place sur la carte des graphiques textuels personnalisés avec des propriétés de police configurables
- Effacer tous les graphiques : supprime tous les repères et textes placés (affiche leur nombre lorsqu’il y en a)
Services externes :
- Ouvrir dans Google Street View : ouvre l’emplacement dans Google Street View à l’aide des coordonnées projetées
- Ouvrir dans Pictometry : ouvre l’emplacement dans le visualiseur d’imagerie aérienne Pictometry à l’aide des coordonnées projetées
Outils de mesure :
Services d’information :
Le menu contextuel s’adapte aux paramètres définis par l’administrateur. Les outils se ferment automatiquement après leur utilisation ou lors d’une interaction avec la carte.
Outils de mesure
Les fonctionnalités de mesure comprennent les spécifications suivantes :
Unités disponibles
- Mesures de distance : pieds, yards, miles, mètres, kilomètres
- Mesures de surface : pieds carrés, yards carrés, miles carrés, mètres carrés, kilomètres carrés, acres
Options d’affichage des unités
- Une seule unité : affiche les mesures dans l’unité par défaut sélectionnée
- Afficher les deux unités : affiche les mesures dans l’unité principale et son équivalent converti (par ex. « 150,00 pieds (45,72 mètres) »)
Éléments de l’interface
- L’outil de mesure de distance comprend un bouton Fermer
- L’outil de mesure de surface comprend un bouton Fermer
- Les boutons par défaut « Nouvelle mesure » sont supprimés
Tracé de coordonnées et de repères
Le widget propose deux types de placement de repères :
Repères de coordonnées :
- Numérotés séquentiellement à partir de 1
- Affichage d’informations de coordonnées configurables dans des fenêtres contextuelles
- Prise en charge de plusieurs systèmes de coordonnées (système natif de la carte, WGS84, WKID personnalisé)
- Étiquettes de coordonnées facultatives affichées sur la carte
- Styles, couleurs, contours et positionnement des repères configurables
- Prise en charge du format en degrés décimaux ou en degrés/minutes/secondes pour la latitude et la longitude
Repères simples :
- Repères ponctuels simples sans numérotation
- Apparence entièrement personnalisable, notamment le style, la taille, la couleur, le contour, la rotation et les décalages
- Prise en charge du réglage de la transparence
Graphiques textuels :
- Placement de texte personnalisé aux emplacements cliqués
- Famille, taille, graisse et couleur de police configurables
- Contours de texte (halo) et arrière-plans facultatifs
- Conservés pendant la session du navigateur
Configuration pour les développeurs
Sélection du widget Carte
- Connecte le widget Clic droit aux widgets Carte de l’application
- Active la fonctionnalité de clic droit sur les cartes sélectionnées
Actions activées
Chaque action peut être activée ou désactivée individuellement :
- Zoom avant
- Zoom arrière
- Centrer ici
- Copier les coordonnées
- Tracer des coordonnées
- Placer un repère
- Ajouter du texte
- Ouvrir dans Google Street View
- Ouvrir dans Pictometry
- Mesurer une distance
- Mesurer une surface
- Que trouve-t-on ici ?
Paramètres du système de coordonnées
Le format des coordonnées copiées peut être configuré :
- Utiliser le système de coordonnées de la carte actuelle
- Utiliser WGS84 (latitude/longitude)
Paramètres de tracé des coordonnées
Options complètes de configuration des repères :
- Système de coordonnées: système natif de la carte, WGS84 ou WKID personnalisé
- Options de format: degrés décimaux ou degrés/minutes/secondes pour la latitude et la longitude
- Style du repère: cercle, carré, croix, X, losange, triangle, épingle
- Propriétés visuelles: taille, couleur, couleur/épaisseur du contour, opacité, angle de rotation
- Positionnement: réglage des décalages X/Y pour un placement précis
- Paramètres du texte: taille et couleur du texte des numéros
- Étiquettes: étiquettes de coordonnées facultatives avec décalage, taille et couleur personnalisables
- Contenu de la fenêtre contextuelle: afficher ou masquer les coordonnées dans les fenêtres contextuelles des repères
Paramètres des repères simples
Commandes de style indépendantes pour les repères simples :
- Options de style: cercle, carré, croix, X, losange, triangle, épingle
- Apparence: taille, couleur, propriétés du contour, opacité
- Positionnement: angle de rotation et décalages X/Y
Paramètres du texte
Configuration de la police et de l’affichage des graphiques textuels :
- Typographie: famille, taille et graisse de police (normal/gras)
- Couleurs: couleur du texte et couleur du contour (halo)
- Effets: épaisseur du contour, couleur d’arrière-plan facultative
- Arrière-plan: options d’arrière-plan transparent ou coloré
Configuration du géocodage inversé
Configuration des couches d’entités
Paramètres avancés de la fonctionnalité « Que trouve-t-on ici ? » :
- Gestion des couches: ajouter/supprimer des couches d’entités avec des noms personnalisés
- Sélection des champs: choisir les champs à afficher pour chaque service
- Intégration des services: chargement automatique des champs à partir des URL des services d’entités
- Options d’affichage: configurer les alias et le regroupement des champs
Paramètres d’affichage des fenêtres contextuelles
Options de personnalisation des fenêtres contextuelles d’information :
- Mise en page: paramètres de largeur et de hauteur maximale des fenêtres contextuelles
- Organisation du contenu: afficher/masquer les noms des couches, option de regroupement par couche
- Affichage des champs: utiliser les alias ou les noms bruts des champs
- Style: conception adaptative avec défilement pour les contenus volumineux
Paramètres de mesure
- Unités par défaut : choisissez parmi les pieds, les yards, les miles, les mètres ou les kilomètres
- Affichage des unités : choisissez d’afficher une seule unité ou deux unités avec conversion
URL des services externes
- Intégration de Pictometry: configurer l’URL du service Pictometry avec les paramètres de coordonnées
- Services de géocodage: définir les points de terminaison du service de géocodage inversé
Placement du widget
Le widget n’affiche aucun élément d’interface et fonctionne en arrière-plan. Configuration recommandée :
- Définir la taille du widget sur 0 × 0 pixel
- Le placer dans un coin inutilisé de la mise en page
- Utiliser l’option « Envoyer à l’arrière-plan » dans les paramètres de mise en page
- Garder le widget visible et actif
- Recommandé uniquement sur ordinateur, pas sur les appareils mobiles ou les tablettes
Remarques techniques
- Les options de la liste déroulante des unités sont filtrées pour n’afficher que les unités disponibles spécifiées
- Les unités non valides sont refusées et remplacées par les unités par défaut
- Les messages de la console sont limités aux avertissements et aux erreurs
- Le widget comprend des procédures de nettoyage pour la gestion de la mémoire
- Les graphiques sont conservés pendant la session du navigateur, mais effacés à l’actualisation de la page
- Les projections de coordonnées prennent en charge plusieurs systèmes de référence spatiale
- Les métadonnées des champs sont chargées automatiquement à partir des services d’entités configurés
Historique des modifications
10/12/2026 : Le widget suit désormais la langue de l’application (?locale=, le sélecteur de langue, le profil ArcGIS ou le navigateur) dans 39 langues ; guide d’aide inclus.
Vous avez créé vos propres widgets personnalisés ? Le même outil gratuit, exb-i18n-kit, peut les traduire avec une seule commande : localize. Voici comment il traduit chaque expression :
- Esri d’abord. Il lit les traductions déjà présentes dans votre installation d’Experience Builder ; ainsi, une expression comme « Zoom to » reprend la formulation utilisée par les widgets Esri eux-mêmes.
- Termes normalisés. Les noms d’unités comme pieds et acres proviennent d’Unicode CLDR, la même base de données qu’utilisent les navigateurs.
- Mémoire de traduction partagée. Les éléments restants proviennent d’un dictionnaire partagé créé avec LibreTranslate, un traducteur open source, ainsi qu’avec les modèles Opus-MT de Helsinki-NLP pour le bosniaque, le croate et le serbe. L’outil fonctionne gratuitement sur GitHub : vous n’avez donc besoin ni de clé API ni de compte.
- Connexion. Il repère également les textes anglais codés en dur en dehors du fichier de traduction du widget, comme un paramètre par défaut ou un guide d’aide, et les relie au système pour qu’ils soient eux aussi traduits.
Les corrections manuelles sont toujours prioritaires sur celles de la machine et ne sont jamais écrasées. Certaines traductions sont générées par une machine ; si vous en repérez une qui ne convient pas, répondez ici en suggérant une meilleure formulation.
9/10/26 :
Ajout d’un bouton Aide en haut du menu contextuel qui ouvre un guide court consultable ; correction du menu qui dépassait de la page lorsque l’on cliquait avec le bouton droit près du bas ou du bord droit de la carte. Les couleurs et les icônes suivent désormais le thème de votre application ; téléchargez le fichier zip joint ou récupérez-le sur GitHub.
7/23/26 : Compatibilité avec Experience Builder 1.21 (v1.0.2)
L’édition développeur d’EB 1.21 (API JS 5.x) a provoqué des problèmes dans certaines parties de l’interface du widget. Tous les problèmes ci-dessous ont été résolus. Le widget reste compatible avec la version 1.20.
- Correction de la mise en page du panneau de mesure dans la version 1.21 : le libellé et la valeur se retrouvaient sur une seule ligne (« Distance378.15 ft »), et le panneau avait perdu ses marges intérieures et était coupé. Le style du panneau est désormais indépendant des noms de classes internes d’Esri ; il s’affiche donc correctement dans les deux versions et résistera aux futures modifications du DOM d’Esri.
- Correction du style de la fenêtre contextuelle « Que trouve-t-on ici ? » dans la version 1.21 : les lignes de la liste, les boutons Retour et Zoom sur, ainsi que les liens, n’étaient pas stylisés, car la fenêtre contextuelle place désormais son contenu dans un DOM fantôme inaccessible aux feuilles de style de la page. Les styles sont maintenant appliqués directement au contenu de la fenêtre contextuelle. La fenêtre contextuelle redimensionnable fonctionne également au-delà de la limite du DOM fantôme de la version 1.21.
- Modernisation interne pour l’API JS 5.x : le chargement des modules est passé de la fonction globale AMD require au chargeur de modules d’Experience Builder, l’observation des propriétés utilise désormais reactiveUtils et les calculs de longueur et de surface recourent automatiquement aux nouveaux opérateurs géométriques si Esri supprime geometryEngine dans une prochaine version.
- Expérience développeur : ajout d’un fichier tsconfig.json au niveau du widget et suppression des faux positifs TypeScript apparus dans Visual Studio et VS Code après le déplacement de plusieurs packages de types dans la version 1.21. Cela concerne uniquement l’édition et n’a aucun effet à l’exécution.
7/17/26 : Correction de bogue : Correction d’une régression introduite par la fonctionnalité d’appui prolongé sur mobile, qui rendait le texte des fenêtres contextuelles impossible à sélectionner et à copier dans toutes les applications Experience Builder contenant ce widget. La désactivation de l’infobulle tactile lors d’un appui prolongé sous iOS s’appliquait à l’ensemble du conteneur MapView, qui contient également le DOM des fenêtres contextuelles. Comme la propriété user-select est héritée dans le navigateur, les fenêtres contextuelles héritaient de cette désactivation. Celle-ci est désormais limitée à la surface de la carte : le comportement de l’appui prolongé reste inchangé, et le texte des fenêtres contextuelles peut de nouveau être sélectionné et copié. Les sessions en cours sont corrigées lors de la mise à niveau, sans qu’il soit nécessaire de remonter la carte.
03/06/26 : Améliorations (version 1.20 uniquement)
- Ajout de la prise en charge du lancement et de l’ouverture des étiquettes d’adresses ou du rapport de propriété lorsqu’ils sont imbriqués dans un widget accordéon (merci @KeyHunter pour l’idée et les tests)
- Structure de package standardisée : ajout de package.json, README.md, LICENSE (Apache 2.0), .gitignore et .npmignore afin que les dépendances s’installent automatiquement avec la commande standard `npm install` dans le dossier client. Aucune commande d’installation propre à chaque dépendance n’est nécessaire.
21/05/26 : Améliorations (version 1.20 uniquement)
- Ouvrir le widget Étiquettes d’adresses avec l’option du clic droit et appliquer une zone tampon avant l’envoi.
12/05/26 : Améliorations (version 1.20 uniquement)
- Paramètres : importation/exportation XML pour sauvegarder les configurations de paramètres ou les transférer entre applications.
- Paramètres/Widget : amélioration des fonctionnalités « Que trouve-t-on ici ? » pour explorer plus en détail les couches (voir la vidéo). Prise en charge des paramètres par défaut de la carte Web ou de l’intégration d’Arcade dans la configuration des paramètres.
07/05/26 : correction d’un bug empêchant Google Street View de fonctionner avec la version 1.20.
26/03/26 : problème résolu pour la version 1.20. Les versions 1.19 et 1.20 sont disponibles au téléchargement. Veuillez signaler tout problème dans cet article de blog.
25/03/26 - Aucun changement majeur, mais DE 1.20 génère quelques bugs que je dois examiner
17/02/2026 :
10/02/2026 :
- Suppression de la version 1.18 ; seule la version 1.19 est désormais maintenue
- Suppression des unités de mesure inutiles de la liste de sélection (pouces, centimètres)
- Suppression du total de mesure Esri par défaut pour les lignes, car il entraînait une duplication
- Amélioration du positionnement du menu contextuel pour éviter qu’il soit masqué lorsqu’une barre latérale est déployée
10/12/2025 (version 1.19 uniquement) :
Mise à jour de la typographie du thème – Tout le texte des widgets utilise désormais la typographie du thème d’Experience Builder pour une présentation cohérente.
Améliorations de l’accessibilité – Ajout de plusieurs mises à jour conformes aux WCAG dans les widgets afin d’améliorer leur convivialité et leur accessibilité.
03/12/2025 :
- Ajout d’une fonction permettant d’utiliser n’importe quel système de coordonnées pour la fonction de copie des coordonnées, et pas uniquement Web Mercator dans le panneau des paramètres.
- Nouvelle fonction ajoutée dans la version 1.19 ; non testée dans la version 1.18. L’article présente la version originale 1.18 sans cette nouvelle fonction, puis la version 1.19 avec celle-ci. Elle est peut-être rétrocompatible avec la version 1.18, mais je ne l’ai pas testée.
23/07/2025 :
- Widget testé avec Developer Edition 1.18, publiée le 23/07/25 ; il fonctionne normalement.
20/06/2025 :
- Ajout d’un style de marqueur amélioré avec 7 formes différentes (cercle, carré, croix, x, losange, triangle, épingle)
- Ajout de réglages pour la rotation et l’opacité des marqueurs, ainsi que leur positionnement par décalage X/Y
- Ajout de fonctionnalités de graphiques textuels avec réglages de police personnalisés, contours et options d’arrière-plan
- Ajout de la prise en charge des systèmes de coordonnées personnalisés via la saisie du WKID
- Ajout d’options de format de coordonnées (degrés décimaux ou degrés/minutes/secondes)
- Ajout du traçage simple de marqueurs, distinct des marqueurs de coordonnées
- Ajout d’une sélection complète de champs pour les couches d’entités, avec chargement automatique des champs
- Ajout d’options de personnalisation de l’affichage des fenêtres contextuelles (largeur, hauteur, regroupement, alias de champs)
- Ajout du décompte des graphiques en temps réel dans l’option Tout effacer
- Ajout d’un aperçu des marqueurs dans l’interface des paramètres
- Amélioration du positionnement et du formatage des étiquettes de coordonnées
- Ajout de réglages de style distincts pour les marqueurs de coordonnées et les marqueurs simples
13/06/2025 :
- Correction d’un bug où la fenêtre par défaut du navigateur apparaissait parfois lors d’un clic droit, en plus de la fenêtre personnalisée
- Ajout de Pictometry comme option de clic droit
- Ajout de couches d’entités à interroger avec la fonction « Que trouve-t-on ici ? »
Résumé
Le widget Clic droit permet de configurer des actions cartographiques accessibles depuis un menu contextuel. Il prend en charge le zoom, les mesures avec filtrage des unités, la récupération des coordonnées, le placement de marqueurs et de texte avec de nombreuses options de style, ainsi que le géocodage inversé avec intégration des couches d’entités. La configuration est disponible dans Developer Edition et s’applique aux widgets de carte connectés.
Vous pouvez envoyer vos commentaires sur les bugs et les améliorations dans la section des commentaires de cet article de blog.
