Introduction
https://github.com/brianmcleer/rightclick-widget
Le widget Right Click ajoute des outils contextuels de carte à ArcGIS Experience Builder. Lorsqu'un utilisateur effectue un clic droit sur la carte, un menu apparaît offrant un ensemble d'actions configurables. Cela donne accès à des fonctions telles que le zoom, la mesure, la copie de coordonnées, le tracé de marqueurs, le placement de texte et la géocodification inverse.
Interaction utilisateur finale
Une fois déployés, les utilisateurs peuvent cliquer 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 sur le point cliqué
Actions sur les coordonnées :
- Copier les coordonnées : copie l'emplacement dans le presse-papiers en utilisant le système de coordonnées configuré
- Tracer des coordonnées : place des marqueurs numérotés avec style configurable et étiquettes de coordonnées
- Placer un marqueur : place des marqueurs simples avec apparence personnalisable
Actions graphiques :
- Ajouter du texte : place des graphiques textuels personnalisés sur la carte avec propriétés de police configurables
- Effacer tous les graphiques : supprime tous les marqueurs et textes placés (affiche le nombre lorsque des graphiques sont présents)
Services externes :
- Ouvrir dans Google Street View : ouvre l'emplacement dans Google Street View en utilisant les coordonnées projetées
- Ouvrir dans Pictometry : ouvre l'emplacement dans le visualiseur d'imagerie aérienne Pictometry en utilisant les coordonnées projetées
Outils de mesure :
Services d'information :
Le menu contextuel s'adapte selon les paramètres administrateur. Les outils se ferment automatiquement après utilisation ou lors d'une interaction avec la carte.
Outils de mesure
La fonctionnalité de mesure inclut 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
- Unité unique seulement : 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 (ex. « 150,00 pieds (45,72 mètres) »)
Éléments d'interface
- L'outil de mesure de distance inclut un bouton Fermer
- L'outil de mesure de surface inclut un bouton Fermer
- Les boutons "Nouvelle mesure" par défaut sont supprimés
Tracé des coordonnées et marqueurs
Le widget propose deux types de placement de marqueurs :
Marqueurs de coordonnées :
- Numérotés séquentiellement à partir de 1
- Affiche des informations configurables sur les coordonnées dans des popups
- Supporte plusieurs systèmes de coordonnées (natif carte, WGS84, WKID personnalisé)
- Étiquettes optionnelles affichées sur la carte pour les coordonnées
- Styles, couleurs, contours et positionnement configurables des marqueurs
- Supporte degrés décimaux ou format degrés/minutes/secondes pour lat/lon
Marqueurs simples :
- Marqueurs ponctuels basiques sans numérotation
- Apparence entièrement personnalisable incluant style, taille, couleur, contour, rotation et décalages
- Supporte les réglages de transparence
Graphiques textuels :
- Placement personnalisé du texte aux emplacements cliqués
- Famille de police, taille, poids et couleur configurables
- Contours (halo) et arrière-plans optionnels pour le texte
- Persistant durant la session du navigateur
Configuration développeur
Sélection du widget carte
- Connecte le widget Right Click aux widgets carte dans l'application
- Active la fonctionnalité 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 marqueur
- Ajouter du texte
- Ouvrir dans Google Street View
- Ouvrir dans Pictometry
- Mesurer distance
- Mesurer surface
- Qu'y a-t-il ici ?
Paramètres du système de coordonnées
Le format pour copier les coordonnées peut être configuré :
- Use the current map's coordinate system
- Use WGS84 (latitude/longitude)
Plot Coordinates Settings
Comprehensive marker configuration options:
- Coordinate System: Map native, WGS84, or custom WKID
- Format Options: Decimal degrees or degrees/minutes/seconds for lat/lon
- Marker Style: Circle, Square, Cross, X, Diamond, Triangle, Pin
- Visual Properties: Size, color, outline color/width, opacity, rotation angle
- Positioning: X/Y offset controls for precise placement
- Text Settings: Number text size and color
- Labels: Optional coordinate labels with customizable offset, size, and color
- Popup Content: Toggle coordinate display in marker popups
Simple Marker Settings
Independent styling controls for basic markers:
- Style Options: Circle, Square, Cross, X, Diamond, Triangle, Pin
- Appearance: Size, color, outline properties, opacity
- Positioning: Rotation angle and X/Y offsets
Text Settings
Font and display configuration for text graphics:
- Typography: Font family, size, weight (normal/bold)
- Colors: Text color and outline (halo) color
- Effects: Outline size, optional background color
- Background: Transparent or colored background options
Reverse Geocoding Configuration
Feature Layer Configuration
Advanced settings for "What's Here?" functionality:
- Layer Management: Add/remove feature layers with custom names
- Field Selection: Choose specific fields to display from each service
- Service Integration: Automatic field loading from Feature Service URLs
- Display Options: Configure field aliases and grouping
Popup Display Settings
Customization options for information popups:
- Layout: Popup width and maximum height settings
- Content Organization: Show/hide layer names, group by layer option
- Field Display: Use field aliases or raw field names
- Styling: Responsive design with scrolling for large content
Measurement Settings
- Default Units: Select from Feet, Yards, Miles, Meters, or Kilometers
- Unit Display: Choose between single unit display or dual unit display with conversions
External Service URLs
- Pictometry Integration: Configure Pictometry service URL with coordinate parameters
- Geocoding Services: Set reverse geocoding service endpoints
Widget Placement
The widget does not display interface components and operates in the background. Recommended configuration:
- Set widget size to 0×0 pixels
- Place in unused corner of the layout
- Use "Send to back" option in layout settings
- Keep widget visible and active
- Recommended for desktop only, not for tablet/phone viewers
Technical Notes
- Unit dropdown options are filtered to show only the specified available units
- Invalid unit selections are blocked and revert to default units
- Console logging is limited to warnings and errors
- Widget includes cleanup procedures for memory management
- Graphics persist during browser session but are cleared on page refresh
- Coordinate projections support multiple spatial reference systems
- Field metadata is automatically loaded from configured Feature Services
Changelog
9/10/26:
Added a Help button at the top of the right-click menu that opens a short searchable guide, and fixed the menu running off the page when you right click near the bottom or right edge of the map. Colors and icons now follow your app's theme; download the attached zip or grab it from GitHub.
7/23/26: Experience Builder 1.21 compatibility (v1.0.2)
EB Developer Edition 1.21 (JS API 5.x) broke parts of the widget UI. All resolved below. The widget remains compatible with 1.20.
- Fixed the measurement panel layout in 1.21: the label and value ran together on one line ("Distance378.15 ft") and the panel lost its padding and was cut off. The panel is now styled independently of Esri's internal class names, so it renders correctly on both versions and will survive future Esri DOM changes.
- Fixed What's Here popup styling in 1.21: list rows, the Back and Zoom to buttons, and links rendered unstyled because the popup now places content inside a shadow root that page-level stylesheets cannot reach. Styles are now applied directly to the popup content. The resizable popup also works across the 1.21 shadow DOM boundary.
- Internal modernization for JS API 5.x: module loading migrated from the global AMD require to the Experience Builder module loader, property watching migrated to reactiveUtils, and length/area calculations fall back to the new geometry operators automatically if Esri removes geometryEngine in a future release.
- Developer experience: added a widget-level tsconfig.json and suppressed TypeScript false positives that appeared in Visual Studio and VS Code after 1.21 relocated several type packages. Editing only, no runtime impact.
7/17/26: Bugfix: Fixed a regression introduced with the mobile long-press feature that made popup text un-selectable and un-copyable in every Experience Builder app containing this widget. The iOS long-press touch-callout suppression was being applied to the entire MapView container, which also holds the popup DOM; because user-select is inherited in the browser, popups inherited the suppression. The suppression is now scoped to the map canvas surface only, so long-press behavior is unchanged and popup text is selectable and copyable again. Existing live sessions are cleaned up on upgrade without needing a map remount.
6/03/26: Enhancements (1.20 version only)
- Add support to launch and open Mailing Labels or Property Report when they are nested in accordion widget (Thank you @KeyHunter for idea and testing)
- Standardized package structure: added package.json, README.md, LICENSE (Apache 2.0), .gitignore, and .npmignore so dependencies install automatically with the standard `npm install` in the client folder. No per-dependency install commands needed.
5/21/26: Enhancements (1.20 version only)
- Open Mailing Labels widget avec option clic droit et application d'un tampon avant l'envoi.
5/12/26 : Améliorations (version 1.20 uniquement)
- Paramètres : Importer/Exporter XML pour sauvegarder ou transférer les configurations entre applications.
- Paramètres/Widget : Capacités améliorées de « What's here? » pour explorer davantage les couches (voir vidéo). Prend en charge les paramètres par défaut du webmap ou peut intégrer Arcade dans la configuration des paramètres.
5/7/26 : Correction du bug avec Google Street View ne fonctionnant pas sur la version 1.20.
3/26/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.
3/25/26 - Pas de changements majeurs, mais DE 1.20 crée quelques bugs que je dois dépanner
17/2/2026 :
10/2/2026 :
- Suppression de la version 1.18, maintien uniquement de la version 1.19
- Suppression des unités de mesure inutiles dans la liste (pouces, centimètres)
- Suppression du total de mesure Esri par défaut pour les lignes car cela causait des doublons
- Amélioration du placement du menu contextuel pour éviter qu'il soit caché lorsqu'une barre latérale est déployée
10/12/2025 (pour la 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 Experience Builder pour un style cohérent.
Améliorations de l'accessibilité – Ajout de plusieurs mises à jour conformes aux WCAG sur les widgets pour une meilleure utilisabilité et accessibilité.
03/12/2025 :
- Ajout d'une fonction permettant d'utiliser n'importe quel système de coordonnées pour la fonction Copier les coordonnées, pas seulement Web Mercator dans le panneau des paramètres.
- Nouvelle fonction ajoutée en 1.19, non testée en 1.18. Article version originale 1.18 sans nouvelle fonction et version 1.19 avec nouvelle fonction. Peut être rétrocompatible en 1.18 mais je n'ai pas testé.
23/07/2025 :
- Widget testé sur Developer Edition 1.18 sortie le 23/07/25 et fonctionne normalement.
20/06/2025 :
- Ajout d'un style amélioré des marqueurs avec 7 options de forme différentes (cercle, carré, croix, x, losange, triangle, épingle)
- Ajout des contrôles de rotation, opacité et décalage X/Y des marqueurs
- Ajout de la fonctionnalité graphique texte avec contrôle personnalisé des polices, contours et options d'arrière-plan
- Ajout du support des systèmes de coordonnées personnalisés via saisie WKID
- Ajout des options de format de coordonnées (degrés décimaux vs degrés/minutes/secondes)
- Ajout du tracé simple de marqueurs séparé des marqueurs de coordonnées
- Ajout d'une sélection complète des champs pour les couches d'entités avec chargement automatique des champs
- Ajout d'options personnalisables d'affichage popup (largeur, hauteur, regroupement, alias de champs)
- Ajout du comptage en temps réel des graphiques dans l'option tout effacer
- Ajout d'une prévisualisation des marqueurs dans l'interface des paramètres
- Ajout d'un positionnement et formatage améliorés des étiquettes de coordonnées
- Ajout de contrôles de style séparés pour les marqueurs de coordonnées vs marqueurs simples
13/06/2025 :
- Correction d'un bug où la fenêtre par défaut du navigateur apparaissait parfois au clic droit en plus de la fenêtre personnalisée clic droit
- Ajout de Pictometry comme option clic droit
- Ajout des couches d'entités à la fonction What's Here? pour pouvoir interroger ces couches
Résumé
Le widget Right Click permet des actions configurables basées sur la carte via un menu contextuel. Il prend en charge le zoom, les mesures avec contrôle filtré des unités, la récupération des coordonnées, le placement de marqueurs et textes avec options étendues de style, ainsi que le géocodage inversé avec intégration des couches d'entités. La configuration est disponible via Developer Edition et s'applique aux widgets cartographiques connectés.
Les retours sur bugs et améliorations peuvent être soumis dans la section commentaires de cet article de blog.
