Introdução
https://github.com/brianmcleer/rightclick-widget
O widget Right Click adiciona ferramentas contextuais de mapa ao ArcGIS Experience Builder. Quando o usuário clica com o botão direito no mapa, um menu aparece com um conjunto de ações configuráveis. Isso permite acessar funções como zoom, medição, cópia de coordenadas, plotagem de marcadores, inserção de texto e geocodificação reversa.
Interação do usuário final
Após a implantação, 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:
- Aumentar / diminuir o zoom: ajusta o nível de zoom no local clicado
- Centralizar aqui: desloca o mapa para centralizá-lo 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: posiciona marcadores numerados com estilo e rótulos de coordenadas configuráveis
- Plotar marcador: posiciona marcadores simples com aparência personalizável
Ações gráficas:
- Adicionar texto: posiciona elementos gráficos de texto personalizados no mapa com propriedades de fonte configuráveis
- Limpar todos os elementos gráficos: remove todos os marcadores e textos posicionados (exibe a quantidade quando há elementos gráficos)
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 de contexto se adapta às configurações do administrador. As ferramentas são fechadas automaticamente após o uso ou ao interagir 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
Opções de exibição de unidades
- Somente uma unidade: exibe as medições na unidade padrão selecionada
- Exibir as duas unidades: exibe as medições na unidade principal e em seu equivalente convertido (por exemplo, "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
- Os botões padrão "Nova medição" foram removidos
Plotagem de coordenadas e marcadores
O widget oferece dois tipos de posicionamento de marcadores:
Marcadores de coordenadas:
- Numerados em sequência a partir de 1
- Exibição de informações de coordenadas configuráveis em janelas pop-up
- Suporte a vários sistemas de coordenadas (nativo do mapa, WGS84, WKID personalizado)
- Rótulos de coordenadas opcionais exibidos no mapa
- Estilos, cores, contornos e posicionamento de marcadores configuráveis
- Suporte a graus decimais ou formato de graus/minutos/segundos para lat/lon
Marcadores simples:
- Marcadores de ponto básicos sem numeração
- Aparência totalmente personalizável, incluindo estilo, tamanho, cor, contorno, rotação e deslocamentos
- Suporte a configurações de transparência
Elementos gráficos de texto:
- Inserção de texto personalizado nos locais clicados
- Família, tamanho, espessura e cor da fonte configuráveis
- Contornos opcionais do texto (halo) e planos de fundo
- Persistem durante a sessão do navegador
Configuração do desenvolvedor
Seleção de widgets de mapa
- Conecta o widget Right Click aos widgets de mapa no aplicativo
- Ativa a funcionalidade de clique com o botão direito nos mapas selecionados
Ações ativadas
Cada ação pode ser ativada ou desativada individualmente:
- Aumentar o zoom
- Diminuir o zoom
- Centralizar aqui
- Copiar coordenadas
- Plotar coordenadas
- Plotar marcador
- Adicionar texto
- Abrir no Google Street View
- Abrir no Pictometry
- Medir distância
- Medir área
- O que há aqui?
Configurações do sistema de coordenadas
O formato das coordenadas copiadas pode ser configurado:
- Usar o sistema de coordenadas do mapa atual
- Usar WGS84 (latitude/longitude)
Configurações de plotagem de coordenadas
Opções completas de configuração dos marcadores:
- Sistema de coordenadas: nativo do mapa, WGS84 ou WKID personalizado
- Opções de formato: graus decimais ou graus/minutos/segundos para lat/lon
- Estilo do marcador: círculo, quadrado, cruz, X, losango, triângulo, alfinete
- Propriedades visuais: tamanho, cor, cor/largura do contorno, opacidade, ângulo de rotação
- Posicionamento: controles de deslocamento X/Y para posicionamento preciso
- Configurações de texto: tamanho e cor do texto dos números
- Rótulos: rótulos de coordenadas opcionais com deslocamento, tamanho e cor personalizáveis
- Conteúdo da janela pop-up: alternar a exibição de coordenadas nas janelas pop-up dos marcadores
Configurações de marcadores simples
Controles de estilo independentes para marcadores básicos:
- Opções de estilo: círculo, quadrado, cruz, X, losango, triângulo, alfinete
- Aparência: tamanho, cor, propriedades do contorno, opacidade
- Posicionamento: ângulo de rotação e deslocamentos X/Y
Configurações de texto
Configuração de fonte e exibição para elementos gráficos de texto:
- Tipografia: família, tamanho e espessura da fonte (normal/negrito)
- Cores: cor do texto e do contorno (halo)
- Efeitos: tamanho do contorno, cor de plano de fundo opcional
- Plano de fundo: opções de plano de fundo transparente ou colorido
Configuração da geocodificação reversa
Configuração de camadas de elementos
Configurações avançadas da funcionalidade "O que há aqui?":
- Gerenciamento de camadas: adicionar/remover camadas de elementos com nomes personalizados
- Seleção de campos: escolher campos específicos para exibição de cada serviço
- Integração de serviços: carregamento automático de campos a partir de URLs do Feature Service
- Opções de exibição: configurar aliases de campos e agrupamentos
Configurações de exibição de janelas pop-up
Opções de personalização para janelas pop-up de informações:
- Layout: configurações de largura e altura máxima da janela pop-up
- Organização do conteúdo: exibir/ocultar nomes de camadas, opção de agrupamento por camada
- Exibição de campos: usar aliases de campos ou nomes de campos brutos
- Estilo: design responsivo com rolagem para conteúdos extensos
Configurações de medição
- Unidades padrão: selecione entre pés, jardas, milhas, metros ou quilômetros
- Exibição de unidades: escolha entre exibir uma unidade ou duas unidades com conversões
URLs de serviços externos
- Integração com o Pictometry: configurar a URL do serviço Pictometry com parâmetros de coordenadas
- Serviços de geocodificação: definir os endpoints do serviço de geocodificação reversa
Posicionamento do widget
O widget não exibe componentes de interface e funciona em segundo plano. Configuração recomendada:
- Defina o tamanho do widget como 0×0 pixels
- Posicione-o em um canto não utilizado do layout
- Use a opção "Enviar para trás" nas configurações do layout
- Mantenha o widget visível e ativo
- Recomendado apenas para computadores, não para visualizadores em tablet ou celular
Observações técnicas
- As opções do menu suspenso de unidades são filtradas para exibir apenas as unidades disponíveis especificadas
- Seleções de unidades inválidas são bloqueadas e revertidas para as unidades padrão
- Os registros no console se limitam a avisos e erros
- O widget inclui procedimentos de limpeza para gerenciamento de memória
- Os elementos gráficos persistem durante a sessão do navegador, mas são apagados ao atualizar a página
- As projeções de coordenadas são compatíveis com vários sistemas de referência espacial
- Os metadados dos campos são carregados automaticamente dos Feature Services configurados
Registro de alterações
10/12/2026: O widget agora segue o idioma do aplicativo (?locale=, o seletor de idioma, o perfil do ArcGIS ou o navegador) em 39 idiomas, incluindo o guia de ajuda.
Você tem widgets personalizados? A mesma ferramenta gratuita, exb-i18n-kit, pode traduzi-los com um único comando: localize. Veja como ela preenche cada frase:
- Esri em primeiro lugar. Ela lê as traduções já presentes na sua instalação do Experience Builder, então uma frase como “Zoom to” usa a mesma tradução dos widgets da própria Esri.
- Termos padronizados. Os nomes das unidades, como pés e acres, vêm do Unicode CLDR, os mesmos dados usados pelos navegadores.
- Memória de tradução compartilhada. O restante vem de um dicionário compartilhado criado com o LibreTranslate, um tradutor de código aberto, e os modelos Opus-MT da Helsinki-NLP para bósnio, croata e sérvio. Ele funciona gratuitamente no GitHub, então você não precisa de uma chave de API nem de uma conta.
- Integração. A ferramenta também encontra textos em inglês codificados diretamente fora do arquivo de tradução do widget, como uma configuração padrão ou um guia de ajuda, e os conecta para que também sejam traduzidos.
As correções feitas manualmente sempre prevalecem sobre as traduções automáticas e nunca são sobrescritas. Algumas traduções são automáticas; se notar alguma inadequada, responda aqui com uma sugestão melhor.
9/10/26:
Adicionado um botão Ajuda na parte superior do menu de clique com o botão direito, que abre um guia curto e pesquisável, e corrigido o problema que fazia o menu sair da página ao clicar com o botão direito perto da parte inferior ou da borda direita do mapa. As cores e os ícones agora seguem o tema do aplicativo; baixe o arquivo zip anexado ou obtenha-o no GitHub.
7/23/26: Compatibilidade com o Experience Builder 1.21 (v1.0.2)
O EB Developer Edition 1.21 (JS API 5.x) quebrou partes da interface do widget. Todos os problemas abaixo foram resolvidos. O widget continua compatível com a versão 1.20.
- Corrigido o layout do painel de medição na versão 1.21: o rótulo e o valor apareciam juntos em uma linha ("Distância378.15 ft"), e o painel perdeu o espaçamento interno e ficou cortado. Agora o painel tem estilos independentes dos nomes de classes internos da Esri, então é exibido corretamente nas duas versões e continuará funcionando mesmo com futuras alterações no DOM da Esri.
- Corrigido o estilo da janela pop-up de O que há aqui? na versão 1.21: as linhas da lista, os botões Voltar e Aproximar e os links apareciam sem estilo, pois a janela pop-up agora coloca o conteúdo em uma raiz shadow que as folhas de estilo da página não alcançam. Os estilos agora são aplicados diretamente ao conteúdo da janela pop-up. A janela pop-up redimensionável também funciona através do limite do shadow DOM da versão 1.21.
- Modernização interna para a JS API 5.x: o carregamento dos módulos foi migrado do require AMD global para o carregador de módulos do Experience Builder; a observação de propriedades foi migrada para reactiveUtils; e os cálculos de comprimento/área recorrem automaticamente aos novos operadores de geometria caso a Esri remova o geometryEngine em uma versão futura.
- Experiência do desenvolvedor: adicionado um tsconfig.json no nível do widget e suprimidos falsos positivos do TypeScript que apareciam no Visual Studio e no VS Code após a versão 1.21 realocar vários pacotes de tipos. Isso afeta apenas a edição, sem impacto em tempo de execução.
7/17/26: Correção de bug: Corrigido um problema de regressão introduzido com o recurso de pressionar e segurar em dispositivos móveis, que tornou o texto dos pop-ups impossível de selecionar e copiar em todos os aplicativos do Experience Builder que contêm este widget. A supressão do balão de chamada ao pressionar e segurar no iOS estava sendo aplicada a todo o contêiner MapView, que também contém o DOM dos pop-ups; como a propriedade user-select é herdada no navegador, os pop-ups também herdavam essa supressão. Agora, a supressão se aplica somente à superfície do mapa, mantendo o comportamento de pressionar e segurar inalterado e permitindo novamente selecionar e copiar o texto dos pop-ups. As sessões ativas existentes são corrigidas durante a atualização, sem necessidade de remontar o mapa.
03/06/26: Melhorias (somente na versão 1.20)
- Adicionado suporte para abrir Mailing Labels ou Property Report quando estiverem dentro de um widget de acordeão (obrigado @KeyHunter pela ideia e pelos testes)
- Estrutura de pacote padronizada: adicionados package.json, README.md, LICENSE (Apache 2.0), .gitignore e .npmignore para que as dependências sejam instaladas automaticamente com o comando padrão `npm install` na pasta do cliente. Não é necessário executar comandos de instalação para cada dependência.
21/05/26: Melhorias (somente na versão 1.20)
- Abrir o widget Mailing Labels com a opção de clique com o botão direito e aplicar uma área de buffer antes do envio.
12/05/26: Melhorias (somente na versão 1.20)
- Configurações: importar/exportar XML para fazer backup das configurações ou transferi-las entre aplicativos.
- Configurações/Widget: recursos de "O que há aqui?" aprimorados para explorar mais detalhadamente as camadas (veja o vídeo). Compatível com as configurações padrão do mapa da web ou com a incorporação de Arcade na configuração.
07/05/26: Corrigido um problema que impedia o Google Street View de funcionar na versão 1.20.
26/03/26: Problema resolvido para a versão 1.20. As versões 1.19 e 1.20 estão disponíveis para download. Informe quaisquer problemas nesta publicação do blog.
25/03/26 - Não há alterações incompatíveis, mas a DE 1.20 causa alguns problemas que preciso investigar
17/02/2026:
- Adicionada opção para clicar com o botão direito e abrir o Property Report widget.
10/02/2026:
- Versão 1.18 removida; somente a versão 1.19 será mantida
- Unidades de medida inúteis removidas da lista (polegadas, centímetros)
- Total de medidas padrão da Esri removido para linhas, pois causava duplicação
- Posicionamento do menu de contexto aprimorado para evitar que ele fique oculto quando uma barra lateral estiver expandida
10/12/2025 (somente para a 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 manter um estilo consistente.
Melhorias de acessibilidade – Foram adicionadas várias atualizações em conformidade com as WCAG aos widgets para melhorar a usabilidade e a acessibilidade.
03/12/2025:
- Adicionada uma função que permite usar qualquer sistema de coordenadas na função Copiar coordenadas, e não apenas Web Mercator, no painel de configurações.
- Nova função adicionada na versão 1.19; não foi testada na versão 1.18. O artigo original apresenta a versão 1.18, sem a nova função, e a versão 1.19, com a nova função. Talvez seja compatível com versões anteriores, como a 1.18, mas não testei.
23/07/2025:
- O widget foi testado na Developer Edition 1.18, lançada em 23/07/25, e funciona normalmente.
20/06/2025:
- Adicionado estilo aprimorado para marcadores, com 7 opções de formato (círculo, quadrado, cruz, x, losango, triângulo, pino)
- Adicionados controles de rotação, opacidade e posicionamento de deslocamento X/Y dos marcadores
- Adicionada funcionalidade de gráficos de texto com controles de fonte personalizados, contornos e opções de plano de fundo
- Adicionado suporte a sistemas de coordenadas personalizados por meio da entrada de WKID
- Adicionadas opções de formato de coordenadas (graus decimais ou graus/minutos/segundos)
- Adicionada a plotagem simples de marcadores, separada dos marcadores de coordenadas
- Adicionada seleção abrangente de campos para camadas de feições, com carregamento automático dos campos
- Adicionadas opções de personalização da exibição de pop-ups (largura, altura, agrupamento, nomes alternativos dos campos)
- Adicionada contagem de gráficos em tempo real na opção Limpar tudo
- Adicionada visualização prévia dos marcadores na interface de configurações
- Adicionados posicionamento e formatação aprimorados dos rótulos de coordenadas
- Adicionados controles de estilo separados para marcadores de coordenadas e marcadores simples
13/06/2025:
- Corrigido um problema em que a janela padrão do navegador às vezes aparecia ao clicar com o botão direito, junto com a janela personalizada desse comando
- Adicionada a Pictometry como opção de clique com o botão direito
- Adicionadas camadas de feições à função O que há aqui? para consulta
Resumo
O widget Right Click permite configurar ações baseadas no mapa por meio de um menu de contexto. Ele oferece suporte a zoom, medições com controle de unidades filtradas, obtenção de coordenadas, posicionamento de marcadores e texto com várias opções de estilo e geocodificação reversa com integração de camadas de feições. A configuração está disponível na Developer Edition e se aplica aos widgets de mapa conectados.
Comentários sobre problemas e melhorias podem ser enviados na seção de comentários desta publicação do blog.
