Introducción
https://github.com/brianmcleer/rightclick-widget
El widget de clic derecho añade herramientas contextuales para mapas a ArcGIS Experience Builder. Cuando un usuario hace clic derecho en el mapa, aparece un menú con varias acciones configurables. Esto permite acceder a funciones como acercar o alejar el zoom, medir, copiar coordenadas, colocar marcadores, añadir texto y realizar geocodificación inversa.
Interacción del usuario final
Una vez implementado, los usuarios pueden hacer clic derecho en cualquier lugar del mapa para abrir un menú contextual. Según la configuración, pueden estar disponibles las siguientes acciones:
Acciones de navegación:
- Acercar / Alejar: Ajusta el nivel de zoom en el punto donde se hizo clic
- Centrar aquí: Desplaza el mapa para centrarlo en el punto seleccionado
Acciones de coordenadas:
- Copiar coordenadas: Copia la ubicación al portapapeles con el sistema de coordenadas configurado
- Trazar coordenadas: Coloca marcadores de coordenadas numerados con estilo y etiquetas de coordenadas configurables
- Colocar marcador: Coloca marcadores sencillos con apariencia personalizable
Acciones gráficas:
- Añadir texto: Coloca elementos 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 la cantidad cuando hay elementos gráficos)
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 de Pictometry usando coordenadas proyectadas
Herramientas de medición:
Servicios de información:
El menú contextual se adapta a la configuración del administrador. Las herramientas se cierran automáticamente después de usarlas o al interactuar con el mapa.
Herramientas de medición
La función 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 de visualización de unidades
- Solo una unidad: Muestra las mediciones en la unidad predeterminada seleccionada
- Mostrar ambas unidades: Muestra las mediciones en la unidad principal y en su equivalente convertido (p. ej., «150,00 pies (45,72 metros)»)
Elementos de la interfaz
- La herramienta de medición de distancias incluye un botón Cerrar
- La herramienta de medición de áreas incluye un botón Cerrar
- Se eliminan los botones predeterminados «Nueva medición»
Trazado de coordenadas y marcadores
El widget ofrece dos tipos de colocación de marcadores:
Marcadores de coordenadas:
- Numerados secuencialmente a partir del 1
- Muestran información de coordenadas configurable en ventanas emergentes
- Admiten varios sistemas de coordenadas (nativo del mapa, WGS84, WKID personalizado)
- Etiquetas de coordenadas opcionales que se muestran en el mapa
- Estilos, colores, contornos y posición de los marcadores configurables
- Admiten grados decimales o el formato de grados/minutos/segundos para latitud/longitud
Marcadores sencillos:
- Marcadores de punto básicos sin numeración
- Apariencia totalmente personalizable, incluidos estilo, tamaño, color, contorno, rotación y desplazamientos
- Admiten ajustes de transparencia
Gráficos de texto:
- Colocación de texto personalizado en los lugares seleccionados
- Familia, tamaño, grosor y color de fuente configurables
- Contornos opcionales para el texto (halo) y fondos
- Persisten durante la sesión del navegador
Configuración para desarrolladores
Selección del widget de mapa
- Conecta el widget de clic derecho con los widgets de mapa de la aplicación
- Activa la función de clic derecho en los mapas seleccionados
Acciones activadas
Cada acción se puede activar o desactivar por separado:
- Acercar
- Alejar
- Centrar aquí
- Copiar coordenadas
- Trazar coordenadas
- Colocar marcador
- Añadir texto
- Abrir en Google Street View
- Abrir en Pictometry
- Medir distancia
- Medir área
- ¿Qué hay aquí?
Configuración del sistema de coordenadas
Se puede configurar el formato de las coordenadas copiadas:
- Usar el sistema de coordenadas del mapa actual
- Usar WGS84 (latitud/longitud)
Configuración del trazado de coordenadas
Opciones completas de configuración de marcadores:
- Sistema de coordenadas: Nativo del mapa, WGS84 o WKID personalizado
- Opciones de formato: Grados decimales o grados/minutos/segundos para latitud/longitud
- Estilo del marcador: Círculo, cuadrado, cruz, X, rombo, triángulo, chincheta
- Propiedades visuales: Tamaño, color, color/grosor del contorno, opacidad, ángulo de rotación
- Posicionamiento: Controles de desplazamiento X/Y para una colocación precisa
- Configuración del texto: Tamaño y color del texto numérico
- Etiquetas: Etiquetas de coordenadas opcionales con desplazamiento, tamaño y color personalizables
- Contenido de la ventana emergente: Activar o desactivar la visualización de coordenadas en las ventanas emergentes de los marcadores
Configuración de marcadores sencillos
Controles de estilo independientes para los marcadores básicos:
- Opciones de estilo: Círculo, cuadrado, cruz, X, rombo, triángulo, chincheta
- Apariencia: Tamaño, color, propiedades del contorno, opacidad
- Posicionamiento: Ángulo de rotación y desplazamientos X/Y
Configuración del texto
Configuración de fuentes y visualización para los gráficos de texto:
- Tipografía: Familia, tamaño y grosor de fuente (normal/negrita)
- Colores: Color del texto y color del contorno (halo)
- Efectos: Tamaño del contorno y color de fondo opcional
- Fondo: Opciones de fondo transparente o de color
Configuración de geocodificación inversa
Configuración de capas de entidades
Configuración avanzada de la función «¿Qué hay aquí?»:
- Administración de capas: Añadir o eliminar capas de entidades con nombres personalizados
- Selección de campos: Elegir los campos específicos que se mostrarán de cada servicio
- Integración de servicios: Carga automática de campos desde las URL de los servicios de entidades
- Opciones de visualización: Configurar alias de campos y agrupación
Configuración de visualización de ventanas emergentes
Opciones de personalización de las ventanas emergentes de información:
- Diseño: Configuración del ancho de la ventana emergente y de la altura máxima
- Organización del contenido: Mostrar u ocultar los nombres de las capas; opción para agrupar por capa
- Visualización de campos: Usar alias de campos o nombres de campos sin modificar
- Estilo: Diseño adaptable con desplazamiento para contenido extenso
Configuración de medición
- Unidades predeterminadas: Seleccionar entre pies, yardas, millas, metros o kilómetros
- Visualización de unidades: Elegir entre mostrar una sola unidad o dos unidades con conversiones
URL de servicios externos
- Integración con Pictometry: Configurar la URL del servicio de Pictometry con parámetros de coordenadas
- Servicios de geocodificación: Establecer los puntos de conexión del servicio de geocodificación inversa
Ubicación del widget
El widget no muestra elementos de interfaz y funciona en segundo plano. Configuración recomendada:
- Establecer el tamaño del widget en 0×0 píxeles
- Colocarlo en una esquina de la disposición que no se utilice
- Usar la opción «Enviar al fondo» en la configuración de la disposición
- Mantener el widget visible y activo
- Recomendado solo para ordenadores; no para vistas en tabletas o teléfonos
Notas técnicas
- Las opciones del menú desplegable de unidades se filtran para mostrar solo las unidades disponibles especificadas
- Se bloquean las selecciones de unidades no válidas y se restablecen las unidades predeterminadas
- El registro en la consola se limita a advertencias y errores
- El widget incluye procedimientos de limpieza para gestionar la memoria
- Los gráficos persisten durante la sesión del navegador, pero se borran al actualizar la página
- Las proyecciones de coordenadas admiten varios sistemas de referencia espacial
- Los metadatos de los campos se cargan automáticamente desde los servicios de entidades configurados
Registro de cambios
12/10/2026: El widget ahora sigue el idioma de la aplicación (?locale=, el selector de idioma, el perfil de ArcGIS o el navegador) en 39 idiomas; también se incluye la guía de ayuda.
¿Tienes tus propios widgets personalizados? La misma herramienta gratuita, exb-i18n-kit, puede traducirlos con un solo comando: localize. Así es como completa cada frase:
- Primero, Esri. Lee las traducciones que ya están en tu instalación de Experience Builder, así que una frase como «Zoom to» usa la misma expresión que los widgets de Esri.
- Términos estándar. Los nombres de unidades, como pies y acres, provienen de Unicode CLDR, los mismos datos que usan los navegadores.
- Memoria de traducción compartida. El resto proviene de un diccionario compartido creado con LibreTranslate, un traductor de código abierto, además de los modelos Opus-MT de Helsinki-NLP para bosnio, croata y serbio. Se ejecuta gratis en GitHub, así que no necesitas una clave de API ni una cuenta.
- Integración. También encuentra textos en inglés codificados fuera del archivo de traducción del widget, como una configuración predeterminada o una guía de ayuda, y los conecta para que también se traduzcan.
Las correcciones manuales siempre prevalecen sobre las de la máquina y nunca se sobrescriben. Algunas traducciones se generan automáticamente; si detectas alguna que no suena bien, responde aquí con una alternativa mejor.
10/9/26:
Se añadió un botón de ayuda en la parte superior del menú de clic derecho que abre una guía breve con búsqueda, y se corrigió el problema por el que el menú se salía de la página al hacer clic derecho cerca del borde inferior o derecho del mapa. Los colores y los iconos ahora siguen el tema de la aplicación; descarga el archivo zip adjunto o consíguelo en GitHub.
23/7/26: Compatibilidad con Experience Builder 1.21 (v1.0.2)
EB Developer Edition 1.21 (JS API 5.x) rompió algunas partes de la interfaz del widget. Todo se ha corregido a continuación. El widget sigue siendo compatible con la versión 1.20.
- Se corrigió el diseño del panel de medición en la versión 1.21: la etiqueta y el valor aparecían juntos en una línea («Distancia378.15 ft») y el panel perdió el relleno y quedó recortado. Ahora el panel tiene estilos independientes de los nombres de clases internas de Esri, por lo que se muestra correctamente en ambas versiones y seguirá funcionando con futuros cambios en el DOM de Esri.
- Se corrigió el estilo de la ventana emergente de «¿Qué hay aquí?» en la versión 1.21: las filas de la lista, los botones Atrás y Acercar a y los enlaces aparecían sin estilo porque ahora la ventana emergente coloca el contenido dentro de una raíz de sombra, inaccesible para las hojas de estilo de la página. Los estilos ahora se aplican directamente al contenido de la ventana emergente. La ventana emergente redimensionable también funciona a través del límite del DOM de sombra de la versión 1.21.
- Modernización interna para JS API 5.x: la carga de módulos se migró del require AMD global al cargador de módulos de Experience Builder; la observación de propiedades se migró a reactiveUtils; y los cálculos de longitud y área recurren automáticamente a los nuevos operadores de geometría si Esri elimina geometryEngine en una versión futura.
- Experiencia de desarrollo: se añadió un tsconfig.json a nivel de widget y se suprimieron falsos positivos de TypeScript que aparecieron en Visual Studio y VS Code después de que la versión 1.21 trasladara varios paquetes de tipos. Solo afecta a la edición; no tiene impacto en tiempo de ejecución.
17/7/26: Corrección de errores: Se corrigió una regresión introducida con la función de pulsación prolongada en dispositivos móviles, que hacía que no se pudiera seleccionar ni copiar el texto de las ventanas emergentes en todas las aplicaciones de Experience Builder que contienen este widget. La supresión del menú de llamada táctil de iOS al mantener pulsado se aplicaba a todo el contenedor MapView, que también contiene el DOM de las ventanas emergentes; como el navegador hereda la propiedad user-select, las ventanas emergentes heredaban esa supresión. Ahora la supresión se limita únicamente a la superficie del lienzo del mapa, por lo que el comportamiento de la pulsación prolongada no cambia y el texto de las ventanas emergentes vuelve a poder seleccionarse y copiarse. Las sesiones activas existentes se limpian al actualizar, sin necesidad de volver a montar el mapa.
3/6/26: Mejoras (solo versión 1.20)
- Añadir compatibilidad para iniciar y abrir Mailing Labels o Property Report cuando estén dentro de un widget de acordeón (Gracias @KeyHunter por la idea y las pruebas)
- Estructura del paquete estandarizada: se añadieron package.json, README.md, LICENSE (Apache 2.0), .gitignore y .npmignore para que las dependencias se instalen automáticamente con el comando estándar `npm install` en la carpeta del cliente. No se necesitan comandos de instalación para cada dependencia.
21/5/26: Mejoras (solo versión 1.20)
- Abrir Mailing Labels con la opción del clic derecho y aplicar un área de influencia antes de enviar.
12/5/26: Mejoras (solo versión 1.20)
- Configuración: importar/exportar XML para poder respaldar las configuraciones o transferirlas entre aplicaciones.
- Configuración/widget: se mejoraron las funciones de «¿Qué hay aquí?» para profundizar más en las capas (ver el video). Admite la configuración predeterminada del mapa web o la posibilidad de insertar Arcade en la configuración.
7/5/26: Se corrigió un error que impedía que Google Street View funcionara en la versión 1.20.
26/3/26: Se resolvió un problema de la versión 1.20. Las versiones 1.19 y 1.20 están disponibles para descargar. Informe de cualquier problema en esta entrada del blog.
25/3/26: No hay cambios incompatibles, pero DE 1.20 causa algunos errores que debo investigar
17/2/2026:
- Añadir la opción de hacer clic con el botón derecho e iniciar Property Report como widget.
10/2/2026:
- Se eliminó la versión 1.18; solo se mantiene la versión 1.19
- Se eliminaron de la lista las unidades de medida innecesarias (pulgadas, centímetros)
- Se eliminó el total de medición predeterminado de Esri para las líneas, ya que causaba duplicados
- Se mejoró la ubicación del menú contextual para evitar que quede oculto cuando se expande una barra lateral
10/12/2025 (solo para la versión 1.19):
Actualización de la tipografía del tema – Todo el texto de los widgets ahora usa la tipografía del tema de Experience Builder para mantener un estilo uniforme.
Mejoras de accesibilidad – Se añadieron varias mejoras conformes con WCAG en los widgets para facilitar el uso y mejorar la accesibilidad.
3/12/2025:
- Se añadió una función que permite usar cualquier sistema de coordenadas para la función Copiar coordenadas, no solo Web Mercator, desde el panel de configuración.
- La nueva función se añadió en la versión 1.19; no se probó en la 1.18. El artículo presenta la versión original 1.18 sin la nueva función y la versión 1.19 con ella. Puede que sea compatible con versiones anteriores y funcione en la 1.18, pero no lo probé.
23/7/2025:
- Se probó el widget en Developer Edition 1.18, publicada el 23/7/25, y funciona con normalidad.
20/6/2025:
- Añadir estilos mejorados para los marcadores con 7 opciones de forma (círculo, cuadrado, cruz, x, rombo, triángulo, chincheta)
- Añadir controles de rotación y opacidad del marcador, y de posición de desplazamiento X/Y
- Añadir funciones de gráficos de texto con controles de fuente personalizados y opciones de contorno y fondo
- Añadir compatibilidad con sistemas de coordenadas personalizados mediante la entrada de WKID
- Añadir opciones de formato de coordenadas (grados decimales o grados/minutos/segundos)
- Añadir la representación sencilla de marcadores, independiente de los marcadores de coordenadas
- Añadir selección completa de campos para capas de entidades, con carga automática de campos
- Añadir opciones de personalización de la visualización de ventanas emergentes (ancho, alto, agrupación, alias de campo)
- Añadir el recuento de gráficos en tiempo real en la opción de borrar todo
- Añadir una vista previa de los marcadores en la interfaz de configuración
- Añadir mejoras en la ubicación y el formato de las etiquetas de coordenadas
- Añadir controles de estilo independientes para los marcadores de coordenadas y los marcadores sencillos
13/6/2025:
- Se corrigió un error por el que a veces aparecía la ventana predeterminada del navegador al hacer clic con el botón derecho, además de la ventana personalizada
- Añadir Pictometry como opción del clic derecho
- Añadir capas de entidades para consultarlas con la función «¿Qué hay aquí?»
Resumen
El widget Right Click permite configurar acciones basadas en el mapa mediante un menú contextual. Admite acercar, realizar mediciones con control de unidades filtrado, obtener coordenadas, colocar marcadores y texto con amplias opciones de estilo, y geocodificación inversa con integración de capas de entidades. Se configura mediante Developer Edition y se aplica a los widgets de mapa conectados.
Los comentarios sobre errores y mejoras pueden enviarse en la sección de comentarios de esta entrada del blog.
