Introducción
https://github.com/brianmcleer/rightclick-widget
El widget Right Click añade herramientas contextuales de mapa a ArcGIS Experience Builder. Cuando un usuario hace clic derecho en el mapa, aparece un menú que ofrece un conjunto de acciones configurables. Esto proporciona acceso a funciones como zoom, medición, copia de coordenadas, trazado de marcadores, colocación de texto y geocodificación inversa.
Interacción del usuario final
Una vez desplegado, los usuarios pueden hacer clic derecho en cualquier lugar del mapa para abrir un menú contextual. Dependiendo de la configuración, las siguientes acciones pueden estar disponibles:
Acciones de navegación:
- Acercar / Alejar: Ajusta el nivel de zoom en la ubicación del clic
- Centrar aquí: Desplaza el mapa para centrarlo en el punto clicado
Acciones de coordenadas:
- Copiar coordenadas: Copia la ubicación al portapapeles usando el sistema de coordenadas configurado
- Trazar coordenadas: Coloca marcadores numerados con estilo configurable y etiquetas de coordenadas
- Trazar marcador: Coloca marcadores simples con apariencia personalizable
Acciones gráficas:
- Agregar texto: Coloca gráficos de texto personalizados en el mapa con propiedades de fuente configurables
- Borrar todos los gráficos: Elimina todos los marcadores y textos colocados (muestra el conteo cuando hay gráficos presentes)
Servicios externos:
- Abrir en Google Street View: Abre la ubicación en Google Street View usando coordenadas proyectadas
- Abrir en Pictometry: Abre la ubicación en el visor de imágenes aéreas Pictometry usando coordenadas proyectadas
Herramientas de medición:
Servicios de información:
El menú contextual se adapta según la configuración del administrador. Las herramientas se cierran automáticamente tras su uso o al interactuar con el mapa.
Herramientas de medición
La funcionalidad de medición incluye las siguientes especificaciones:
Unidades disponibles
- Mediciones de distancia: Pies, Yardas, Millas, Metros, Kilómetros
- Mediciones de área: Pies cuadrados, Yardas cuadradas, Millas cuadradas, Metros cuadrados, Kilómetros cuadrados, Acres
Opciones para mostrar unidades
- Solo una unidad: Muestra las mediciones en la unidad predeterminada seleccionada
- Mostrar ambas unidades: Muestra las mediciones tanto en la unidad principal como su equivalente convertido (por ejemplo, "150.00 pies (45.72 metros)")
Elementos de interfaz
- La herramienta de medición de distancia incluye un botón Cerrar
- La herramienta de medición de área incluye un botón Cerrar
- Se eliminan los botones predeterminados "Nueva medición"
Trazado de coordenadas y marcadores
El widget proporciona dos tipos de colocación de marcadores:
Marcadores de coordenadas:
- Numerados secuencialmente comenzando desde 1
- Muestra información configurable de coordenadas en ventanas emergentes
- Soporta múltiples sistemas de coordenadas (nativo del mapa, WGS84, WKID personalizado)
- Etiquetas opcionales de coordenadas mostradas en el mapa
- Estilos configurables para marcadores, colores, contornos y posicionamiento
- Soporta grados decimales o formato grados/minutos/segundos para latitud/longitud
Marcadores simples:
- Marcadores básicos sin numeración
- Apariencia totalmente personalizable incluyendo estilo, tamaño, color, contorno, rotación y desplazamientos
- Soporta configuraciones de transparencia
Gráficos de texto:
- Colocación personalizada de texto en ubicaciones clicadas
- Familia tipográfica configurable, tamaño, peso y color
- Contornos opcionales (halo) y fondos para texto
- Persistente durante la sesión del navegador
Configuración para desarrolladores
Selección del widget del mapa
- Conecta el widget Right Click con widgets del mapa en la aplicación
- Habilita la funcionalidad clic derecho en mapas seleccionados
Acciones habilitadas
Cada acción puede activarse o desactivarse individualmente:
- Acercar zoom (Zoom In)
- Alejar zoom (Zoom Out)
- Centrar aquí (Center Here)
- Copiar coordenadas (Copy Coordinates)
- Trazar coordenadas (Plot Coordinates)
- Trazar marcador (Plot Marker)
- Agregar texto (Add Text)
- Abrir en Google Street View (Open in Google Street View)
- Abrir en Pictometry (Open in Pictometry)
- Medir distancia (Measure Distance)
- Medir área (Measure Area)
- ¿Qué hay aquí? (What's Here?)
Configuración del sistema de coordenadas
El formato para las coordenadas copiadas puede configurarse:
- Usar el sistema de coordenadas actual del mapa
- Usar WGS84 (latitud/longitud)
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 con opción de clic derecho y aplicar un buffer antes de enviar.
5/12/26: Mejoras (solo versión 1.20)
- Configuración: Importar/Exportar XML para que las configuraciones se puedan respaldar o transferir entre aplicaciones.
- Configuración/Widget: Capacidades mejoradas de "¿Qué hay aquí?" para profundizar más en las capas (ver video). Soporta configuraciones predeterminadas desde webmap o puede incrustar Arcade en la configuración de ajustes.
5/7/26: Corrección de error con Google Street View que no funcionaba en la versión 1.20.
3/26/26: Problema resuelto para 1.20. Versiones 1.19 y 1.20 disponibles para descargar. Por favor reporte cualquier problema en esta publicación del blog.
3/25/26 - Sin cambios disruptivos, pero DE 1.20 crea algunos errores que necesito investigar
17/2/2026:
10/2/2026:
- Eliminada versión 1.18, manteniendo solo la versión 1.19
- Eliminadas unidades de medida inútiles de la lista (pulgadas, centímetros)
- Eliminado total predeterminado de medición Esri para líneas ya que causaba duplicación
- Mejorada la ubicación del menú contextual para evitar que se oculte cuando una barra lateral está expandida
10/12/2025 (solo para versión 1.19):
Actualización de Tipografía del Tema – Todo el texto del widget ahora usa la Tipografía del Tema de Experience Builder para un estilo consistente.
Mejoras de Accesibilidad – Se añadieron múltiples actualizaciones compatibles con WCAG en los widgets para mejor usabilidad y accesibilidad.
03/12/2025:
- Añadida función para permitir cualquier sistema de coordenadas en la función Copiar Coordenadas, no solo Web Mercator en el panel de configuración.
- Nueva función añadida en 1.19, no probada en 1.18. Artículo original versión 1.18 sin nueva función y versión 1.19 con nueva función. Puede ser compatible hacia atrás en 1.18 pero no lo probé.
23/07/2025:
- Probado widget en Developer Edition 1.18 lanzado el 23/07/25 y el widget funciona normalmente.
20/06/2025:
- Agregar estilo mejorado de marcador con 7 opciones diferentes de forma (círculo, cuadrado, cruz, x, diamante, triángulo, pin)
- Agregar controles de rotación del marcador, opacidad y posicionamiento desplazado X/Y
- Agregar funcionalidad gráfica de texto con controles personalizados de fuente, contornos y opciones de fondo
- Agregar soporte para sistemas de coordenadas personalizados mediante entrada WKID
- Agregar opciones de formato de coordenadas (grados decimales vs grados/minutos/segundos)
- Agregar trazado simple de marcadores separado de marcadores de coordenadas
- Agregar selección completa de campos para capas de entidades con carga automática de campos
- Agregar opciones personalizadas para mostrar popups (ancho, alto, agrupación, alias de campos)
- Agregar conteo en tiempo real de gráficos en opción borrar todo
- Agregar funcionalidad de vista previa del marcador en interfaz de configuración
- Agregar posicionamiento y formato mejorados para etiquetas de coordenadas
- Agregar controles separados de estilo para marcadores de coordenadas vs marcadores simples
13/06/2025:
- Resolver un error donde a veces aparece la ventana predeterminada del navegador al hacer clic derecho además de la ventana personalizada del clic derecho
- Agregar Pictometry como opción al hacer clic derecho
- Agregar capas de entidades a la función ¿Qué hay aquí? para poder consultarlas
Resumen
El widget Right Click permite acciones configurables basadas en mapas a través de un menú contextual. Soporta zoom, mediciones con control filtrado de unidades, obtención de coordenadas, colocación de marcadores y texto con amplias opciones de estilo, y geocodificación inversa con integración a capas de entidades. La configuración está disponible a través de Developer Edition y se aplica a widgets conectados al mapa.
Los comentarios sobre errores y mejoras pueden enviarse en la sección de comentarios de esta publicación del blog.
