Introdução
https://github.com/brianmcleer/rightclick-widget
O widget Right Click adiciona ferramentas contextuais de mapa ao ArcGIS Experience Builder. Quando um usuário clica com o botão direito no mapa, um menu aparece oferecendo um conjunto de ações configuráveis. Isso fornece acesso a funções como zoom, medição, cópia de coordenadas, plotagem de marcadores, colocação de texto e geocodificação reversa.
Interação do Usuário Final
Uma vez implantado, os usuários podem clicar com o botão direito em qualquer lugar do mapa para abrir um menu de contexto. Dependendo da configuração, as seguintes ações podem estar disponíveis:
Ações de Navegação:
- Zoom In / Zoom Out: Ajusta o nível de zoom no local do clique
- Centralizar Aqui: Move o mapa para centralizar no ponto clicado
Ações de Coordenadas:
- Copiar Coordenadas: Copia a localização para a área de transferência usando o sistema de coordenadas configurado
- Plotar Coordenadas: Coloca marcadores numerados com estilo configurável e rótulos de coordenadas
- Plotar Marcador: Coloca marcadores simples com aparência personalizável
Ações Gráficas:
- Adicionar Texto: Coloca gráficos de texto personalizados no mapa com propriedades de fonte configuráveis
- Limpar Todos os Gráficos: Remove todos os marcadores e textos colocados (exibe contagem quando gráficos estão presentes)
Serviços Externos:
- Abrir no Google Street View: Abre a localização no Google Street View usando coordenadas projetadas
- Abrir no Pictometry: Abre a localização no visualizador de imagens aéreas Pictometry usando coordenadas projetadas
Ferramentas de Medição:
Serviços de Informação:
O menu contextual se adapta com base nas configurações do administrador. As ferramentas fecham automaticamente após uso ou na interação com o mapa.
Ferramentas de Medição
A funcionalidade de medição inclui as seguintes especificações:
Unidades Disponíveis
- Medições de distância: Pés, Jardas, Milhas, Metros, Quilômetros
- Medições de área: Pés Quadrados, Jardas Quadradas, Milhas Quadradas, Metros Quadrados, Quilômetros Quadrados, Acres (acres)
Opções de Exibição das Unidades
- Apenas Unidade Única: Exibe medições na unidade padrão selecionada
- Mostrar Ambas as Unidades: Exibe medições na unidade principal e seu equivalente convertido (ex.: "150,00 pés (45,72 metros)")
Elementos da Interface
- A ferramenta de medição de distância inclui um botão Fechar
- A ferramenta de medição de área inclui um botão Fechar
- Botões padrão "Nova medição" são removidos
Plotagem de Coordenadas e Marcadores
O widget oferece dois tipos de colocação de marcadores:
Marcadores de Coordenadas:
- Numerados sequencialmente começando do 1
- Exibe informações configuráveis das coordenadas em popups
- Suporta múltiplos sistemas de coordenadas (nativo do mapa, WGS84, WKID personalizado)
- Rótulos opcionais das coordenadas exibidos no mapa
- Estilos configuráveis dos marcadores, cores, contornos e posicionamento
- Suporta graus decimais ou formato graus/minutos/segundos para latitude/longitude
Marcadores Simples:
- Marcadores básicos sem numeração
- Aparência totalmente personalizável incluindo estilo, tamanho, cor, contorno, rotação e deslocamentos
- Suporta configurações de transparência
Gráficos de Texto:
- Colocação personalizada de texto nos locais clicados
- Configuração da família da fonte, tamanho, peso e cor do texto
- Contornos opcionais do texto (halo) e fundos
- Persistente durante a sessão do navegador
Configuração para Desenvolvedores
Seleção do Widget do Mapa
- Conecta o widget Right Click aos widgets do mapa na aplicação
- Habilita funcionalidade do clique direito nos mapas selecionados
Ações Habilitadas
Cada ação pode ser ativada ou desativada individualmente:
- Zoom In (Aproximar)
- Zoom Out (Afastar)
- Centralizar Aqui (Center Here)
- Copiar Coordenadas (Copy Coordinates)
- Plotar Coordenadas (Plot Coordinates)
- Plotar Marcador (Plot Marker)
- Adicionar Texto (Add Text)
- Abrir no Google Street View (Open in Google Street View)
- Abrir no Pictometry (Open in Pictometry)
- Medir Distância (Measure Distance)
- Medir Área (Measure Area)
- 'What's Here?' (O que há aqui?)
Configurações do Sistema de Coordenadas (Coordinate System Settings)
'O formato para coordenadas copiadas pode ser configurado:'
- 'Usar o sistema atual do mapa'
- 'Usar WGS84 (latitude/longitude)'
'Configurações para Plotar Coordenadas'
'Opções abrangentes para configuração dos marcadores:'
- 'Sistema de Coordenadas' : Nativo do mapa, WGS84 ou WKID personalizado
- 'Opções de Formato' : 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 com opção de clique direito e aplicação de buffer antes do envio.
12/05/26: Melhorias (apenas versão 1.20)
- Configurações: Importar/Exportar XML para que as configurações possam ser salvas ou transferidas entre aplicações.
- Configurações/Widget: Capacidades aprimoradas do "O que há aqui?" para explorar camadas mais profundamente (veja o vídeo). Suporta configurações padrão do webmap ou pode incorporar Arcade na configuração das configurações.
07/05/26: Corrigido bug com Google Street View não funcionando na versão 1.20.
26/03/26: Problema resolvido para 1.20. Versões 1.19 e 1.20 disponíveis para download. Por favor, reporte quaisquer problemas neste post do blog.
25/03/26 - Sem mudanças disruptivas, mas DE 1.20 cria alguns bugs que preciso investigar
17/02/2026:
10/02/2026:
- Removida a versão 1.18, mantendo apenas a versão 1.19
- Removidas unidades de medida inúteis da lista (polegadas, centímetros)
- Removido total padrão de medição Esri para linhas pois causava duplicação
- Melhor posicionamento do menu de contexto para evitar que fique oculto quando uma barra lateral está expandida
10/12/2025 (apenas para versão 1.19):
Atualização da Tipografia do Tema – Todo o texto do widget agora usa a Tipografia do Tema do Experience Builder para estilo consistente.
Melhorias de Acessibilidade – Adicionadas várias atualizações compatíveis com WCAG em widgets para melhor usabilidade e acessibilidade.
03/12/2025:
- Adicionada função para permitir qualquer sistema de coordenadas na função Copiar Coordenadas, não apenas Web Mercator no painel de configurações.
- Nova função adicionada na 1.19, não testada na 1.18. Artigo original versão 1.18 sem nova função e versão 1.19 com nova função. Pode ser compatível retroativamente na 1.18, mas não testei.
23/07/2025:
- Widget testado na Developer Edition 1.18 lançada em 23/07/25 e funciona normalmente.
20/06/2025:
- Adicionar estilo aprimorado de marcador com 7 opções diferentes de forma (círculo, quadrado, cruz, x, diamante, triângulo, alfinete)
- Adicionar controles de rotação, opacidade e deslocamento X/Y para marcadores
- Adicionar funcionalidade gráfica de texto com controles personalizados de fonte, contornos e opções de fundo
- Adicionar suporte para sistemas de coordenadas personalizados via entrada WKID
- Adicionar opções de formato de coordenadas (graus decimais vs graus/minutos/segundos)
- Adicionar plotagem simples de marcadores separada dos marcadores de coordenadas
- Adicionar seleção abrangente de campos para camadas de feição com carregamento automático dos campos
- Adicionar opções personalizadas para exibição de popup (largura, altura, agrupamento, apelidos dos campos)
- Adicionar contagem em tempo real dos gráficos na opção limpar tudo
- Adicionar funcionalidade de pré-visualização do marcador na interface de configurações
- Adicionar posicionamento e formatação aprimorados do rótulo das coordenadas
- Adicionar controles separados de estilo para marcadores de coordenadas vs marcadores simples
13/06/2025:
- Resolver bug onde janela padrão do navegador às vezes aparece no clique direito além da janela personalizada de clique direito
- Adicionar Pictometry como opção no clique direito
- Adicionar camadas de feição à função O que há aqui? para serem consultadas
Resumo
O widget Right Click permite ações configuráveis baseadas no mapa através de um menu contextual. Suporta zoom, medições com controle filtrado de unidades, obtenção de coordenadas, colocação de marcadores e texto com amplas opções de estilo e geocodificação reversa com integração a camadas de feição. A configuração está disponível via Developer Edition e se aplica aos widgets conectados ao mapa.
Comentários sobre bugs e melhorias podem ser enviados na seção de comentários deste post do blog.
