1. Logo SISDREN SISDREN Docs
  2. Releases

Reformulação de Highlights e Outros


Reformulação de Highlights

Ao selecionar uma entidade espacial, como um reservatório, o SISDREN implementava um destaque visual, consistindo em um contorno azul espesso e um preenchimento branco, além de exibir uma janela modal com as propriedades da entidade.

Reservatório Anhanguera destacado com preenchimento branco
Reservatório Anhanguera destacado com preenchimento branco

Embora o destaque visual fosse útil para a identificação da entidade, o preenchimento branco sobreposto ao mapa base podia obscurecer elementos cartográficos relevantes, comprometendo a análise espacial. Além disso, a necessidade de deselecionar a entidade para visualizar outros elementos interrompia a fluidez da interação, uma vez que a janela modal era ocultada, exigindo múltiplas interações do usuário. Essa situação é especialmente crítica quando o usuário deseja visualizar o contorno de um reservatório sobre o fundo de imagem de satélite.

Reservatório Anhanguera destacado com fundo de imagem de satélite
Reservatório Anhanguera destacado com fundo de imagem de satélite

Para solucionar essas limitações, a abordagem para destacar as feições geográficas foi reformulada. A feição selecionada é agora evidenciada por um contorno preto, enquanto o plano de fundo externo à entidade é escurecido, sem preenchimento na área interna da feição. Essa abordagem permite a visualização destacada da feição selecionada sem ocultar os elementos cartográficos contidos pela área em destaque, otimizando a análise espacial. A janela de informações é exibida como antes. A figura a seguir ilustra o novo destaque visual.

Destaque reformulado: Reservatório Anhanguera (fundo claro)
Destaque reformulado: Reservatório Anhanguera (fundo claro)
Destaque reformulado: Reservatório Anhanguera (fundo com imagem de satélite)
Destaque reformulado: Reservatório Anhanguera (fundo com imagem de satélite)

A nova abordagem de destaque foi avaliada em diversos cenários, incluindo a representação de bacias hidrográficas, demonstrando sua eficácia na identificação e análise de entidades espaciais. Além disso, a nova técnica garante a visibilidade do contorno da entidade, independentemente da configuração dos layeres visíveis, conforme ilustrado a seguir.

Destaque reformulado: Bacia Córrego Jaguaré (fundo claro)
Destaque reformulado: Bacia Córrego Jaguaré (fundo claro)
Destaque reformulado: Bacia Córrego Jaguaré (fundo com imagem de satélite)
Destaque reformulado: Bacia Córrego Jaguaré (fundo com imagem de satélite)
Destaque reformulado: Bacia Córrego Jaguaré com zoom (fundo com imagem de satélite)
Destaque reformulado: Bacia Córrego Jaguaré com zoom (fundo com imagem de satélite)

A reformulação da técnica de visualização trouxe um benefício adicional ao assegurar a persistência dos elementos visuais de destaque (contorno preto e ofuscamento da área externa), independentemente da configuração dos layers visíveis. Em cenários complexos, como a visualização de múltiplos Cadernos de Drenagem, a nova técnica garante a distinção visual da entidade selecionada, evitando sobreposições e ambiguidades na interpretação cartográfica.

No exemplo abaixo, o destaque do Caderno de Drenagem da Mooca ficava parcialmente obscurecido pelo contorno dos Cadernos de Drenagem vizinhos.

Caderno de Drenagem da Mooca parcialmente obscurecido
Caderno de Drenagem da Mooca parcialmente obscurecido

Com a reformulação, o contorno preto do Caderno de Drenagem da Mooca é sempre visível, como ilustrado na figura a seguir.

Caderno de Drenagem da Mooca com destaque reformulado
Caderno de Drenagem da Mooca com destaque reformulado

Abaixo, vemos o Caderno de Drenagem do Jaguaré destacado com a nova técnica, evidenciando a distinção visual da entidade selecionada.

Caderno de Drenagem da Mooca com destaque reformulado
Caderno de Drenagem da Mooca com destaque reformulado

Ferramenta de Zoom

Ferramenta de Zoom foram adicionados ao mapa, permitindo a navegação rápida e precisa entre os níveis de zoom. Os botões de zoom são exibidos no canto superior direito do mapa em interface desktop (largura de tela superior a 768 pixels), ou no canto inferior direito em telas menores. Os botões adicionados favorecem usuários que não tem mouse providos com roda de zoom e permitem:

  • Ampliar (zoom in )
  • Reduzir (zoom out)
  • Reajustar a visualização para toda a cidade de São Paulo
Controles de Zoom
Controles de Zoom

O controle de zoom nativo do Mapbox, embora útil, apresentava algumas limitações para atender às necessidades específicas do nosso projeto. A presença de um botão adicional para reajustar o mapa para a posição ortogonal, por exemplo, não se alinhava com a nossa visão de interface. Para superar essas restrições e oferecer uma experiência de usuário mais intuitiva, desenvolvemos uma solução "ad-hoc" que permitiu não apenas personalizar os botões de zoom in e zoom out, mas também implementar um botão dedicado para retornar o mapa à visualização inicial da área do projeto