Google Maps no QlikView

Fala pessoal, tudo bom?

Essa semana estou iniciando um novo quadro aqui no blog: “Pediu? Tomou!” 😀

Esse quadro foi criado para responder as solicitações feitas pelos leitores do blog, sejam solicitações através de meu e-mail, pelos comentários no blog ou pela página no facebook.

Dentro do possível estarei criando um post para cada solicitação 🙂

O assunto dessa semana será….

Google Maps no QlikView

A integração do Google Maps com o QlikView pode ser feita simplesmente através da API do Google Maps (mais informações da API). Essa API pode ser utilizada por meio de URL, sem a necessidade de se utilizar extension.

Como vamos utilizar essa URL no QlikView? Iremos criar um gráfico de Dispersão e colocar uma imagem dinâmica de fundo, sendo que esta imagem será a URL da API do Google Maps!

A API do Google Maps

A utilização da API v3 do Google Maps é gratuita, porém possui limitações de acessos como por exemplo: 2500 acessos por dia. As outras limitações podem ser visualizadas nesta lista aqui! Caso a sua implementação tenha mais requisições que a desse pacote gratuito, então você deverá adquirir uma licença de utilização com o Google.

Para reforçar

Em nosso exemplo iremos trabalhar com a versão gratuita da API, dessa forma não será necessário a utilização da KEY da API. Essa chave é utilizada na versão gratuita e paga da API, a vantagem de sua utilização é que você pode medir algumas estatísticas de visualização na página do Google.

Vantagens e Desvantagens

Acredito que a maior vantagem da utilização dessa API é a obtenção de um resultado simples e eficiente de Geo e também da não utilização de Extensons (ou seja, pode ser utilizado com IE Plugin ou AJAX).

A desvantagem fica com a complexidade de implementação e também de que o mapa não pode sofrer muitas ações do usuário, como por exemplo navegar pelo mapa.

A implementação

Bom, então vamos iniciar a implementação do Google Maps no QlikView! Crie uma nova aplicação!

PS: Essa esta sendo a terceira vez que implemento o Google Maps do zero, ou seja, construir o gráfico colocando suas expressões e configurações. Já implementei várias vezes e em muitos clientes, mas sempre pego uma versão pronta que tenho e só copio e colo rsrs! 😀

Primeiro Passo

Precisamos ter a latitude e longitude das localidades que queremos colocar em nosso mapa. É possível fazer o download das cidades brasileiras através do site do IBGE, mas para facilitar, estou disponibilizando um QVD com a Latitude e Longitude de todas as cidades brasileiras, faça o download aqui.

Observação: O nome da coluna de Latitude e Longitude devem estar nomeadas como “latitude” e “longitude” (tudo minúsculo), pois o nome da coluna é utilizada nas variáveis de configuração do Google Maps. O QVD disponibilizado já se encontra neste padrão.

Segundo Passo

Possuir informações que façam relação com as cidades.

Abaixo um exemplo com INLINE:

Fato:
LOAD
*,
CIDADE & ‘|’ & ESTADO as %ChaveCoordenadas
INLINE [
VENDEDOR, CIDADE, ESTADO, QUANTIDADE
YURI, Rio Claro, SP, 200
DAVID, Socorro, SP, 400
JULIAN, São Paulo, SP, 250
RAFAEL, Uberlândia, MG, 300
MARCOS, Franca, SP, 150
MARIA, Pato Branco, PR, 190
JULIO, Palmas, TO, 300
DANIELA, Salvador, BA, 155
ALAN, Porto Velho, RO, 380
MARIANA, Amapá, AP, 255
ALINE, Viana, ES, 310
PAULA, Canarana, MT, 500
JOSI, Acari, RN, 210
];

Terceiro Passo

Crie uma nova aba em sua aplicação e altere seu nome para Google Maps. Nesta aba iremos criar todas as variáveis de configuração do Google Maps.

Observação: A descrição do código esta comentada.

/* Zoom máximo permitido */
max_zoom_level = 18;

/* Recuo da latitude */
var_lat_offset = ‘0’;

/* Número para posição da latitude */
var_mid_lat = ‘=min(latitude)+(1+var_lat_offset)*((max(latitude)-min(latitude))/2)’;

/* Número para posição da longitude */
var_mid_long = ‘=min(longitude)+(max(longitude)-min(longitude))/2’;

/* Cálculo de Zoom para centralizar o mapa na posição correta */

/* Fiz algumas alterações nessa variável, pois em algumas resoluções o mapa não mostrava os pontos (latitude e longitude) no lugar correto. As alterações foram pequenas, mas resolveu o meu problema com o QVD que esta em anexo. */
var_zoom = ‘=max(aggr(if(max( round(256*pow(2,(_zoom_level -1)))+(longitude *((256*pow(2,_zoom_level ))/360)) )-min( round(256*pow(2,(_zoom_level -1)))+(longitude *((256*pow(2,_zoom_level ))/360)) ) <map_size_x AND max((256*pow(2,(_zoom_level-1)))+((0.5*log((1+(sin((latitude)*pi()/180)))/(1-(sin((latitude)*pi()/180)))))*((-256*pow(2,_zoom_level))/(2*pi()))))-min((256*pow(2,(_zoom_level-1)))+((0.5*log((1+(sin((latitude)*pi()/180)))/(1-(sin((latitude)*pi()/180)))))*((-256*pow(2,_zoom_level))/(2*pi()))))<map_size_y,_zoom_level,1),_zoom_level))’;

/* Altera o tipo de mapa */
var_maptype = ‘=if(isnull(only(maptype)),fieldvalue( ‘&chr(39)&’maptype’&chr(39)&’, 1 ),maptype)’;

/* Tamanho do Mapa */
map_size_x = ‘640’;
map_size_y = ‘400’;

/* Omitir o campo de Zoom */

SET HidePrefix = ‘_’;

/* Campo necessário para cálculo do melhor Zoom */
_zoom_level:
LOAD
RecNo( ) as _zoom_level
autogenerate(max_zoom_level);

/* Tipos de mapas disponíveis */
maptype:
LOAD * INLINE [
maptype
roadmap
mobile
satellite
terrain
hybrid
];

Quarto Passo

Criar o link entre a tabela de dados e a tabela de coordenadas.

Como já carregamos a tabela de dados no passo 2, então passo apenas o script da tabela de coordenadas:

Coordenadas:
LOAD
name & ‘|’ & SiglaUF as %ChaveCoordenadas,
ID,
SiglaUF,
CodMun,
CodUF,
name,
Capital,
coordinates,
coordinatesGoogle,
latitude,
longitude
FROM MunicipiosCoordenadasBrasil.qvd (qvd)
WHERE
/* Exibir apenas as cidades em que tenho na minha tabela fato. */
Exists(%ChaveCoordenadas, name & ‘|’ & SiglaUF);

Quinto Passo

Faça uma recarga de sua aplicação.

Ela deve ficar dessa forma

imagem01

Sexto Passo

Aba Geral

Crie um gráfico do tipo dispersão e desmarque a opção “Mostrar título no gráfico”

imagem02

Clique em avançar.

Aba Dimensões

Na tela de dimensões, você deve escolher um campo único que faz a referência das cidades. No nosso exemplo temos o campo chamado “ID”, este campo é único para cada cidade brasileira.

imagem03

Aba Expressões

Clique em avançar e depois clique sobre “Modo Avançado” para exibir a tela de expressões que estamos acostumados.

Iremos criar três expressões, respeitando a ordem:

  1. Longitude
  2. Latitude
  3. Vendas

A ordem deve ser respeitada, pois a expressão de longitude vai preencher o nosso eixo X, a latitude o nosso eixo Y e a Vendas será o tamanho dos símbolos.

Expressão Longitude:

( round (256*pow(2,($(var_zoom)-1)))+( max(longitude)  *((256*pow(2,$(var_zoom)))/360)) )

Expressão Latitude

(((256*pow(2,($(var_zoom)-1)))+((0.5*log((1+(sin((max(latitude))*pi()/180)))/(1-(sin((max(latitude))*pi()/180)))))*((-256*pow(2,$(var_zoom)))/(2*pi())))))

Expressão Vendas

SUM(QUANTIDADE)

Para a expressão vendas, habilite “Texto como Pop-up” para que o usuário possa visualizar o número ao deixar o mouse para sob o símbolo.

imagem04

Clique em avançar

Aba Classificação

A aba de Classificação não precisa sofrer nenhuma alteração, mas por costume classifico pelo valor de Y em ordem decrescente.

imagem05

Clique em avançar

Aba Estilo

Vai de sua preferência. A minha é a última da coluna direita

imagem06

Clique em avançar

Aba Apresentação

A configuração necessária para esta aba é desmarcar “Tamanho de símbolos automáticos”, pois queremos a variação de acordo com o volume de vendas. Desmarque também as opções “Mostrar rótulo X” e “Mostrar rótulo Y”.

Outras configurações interessantes:

  • Tamanho máximo da bolha – Sua preferência! A minha é 10
  • Desabilite “Mostrar Legenda”

imagem07

Clique em avançar

Aba Eixos

Agora temos várias alterações a serem realizadas:

  1. Para o Eixo X
    1. Desabilite “Forçar 0”
    2. Habilite “Ocultar Eixo”
    3. Habilite a escala “Mín Estático” e coloque a expressão abaixo
      1.  (256*pow(2,($(var_zoom)-1)))+( var_mid_long  *((256*pow(2,$(var_zoom)))/360)) -round(map_size_x/2)
    4. Habilite a escala “Máx Estático” e coloque a expressão abaixo
      1. ( (256*pow(2,($(var_zoom)-1)))+( var_mid_long  *((256*pow(2,$(var_zoom)))/360)) + round(map_size_x/2))
  2. Para o Eixo Y
    1. Desabilite “Forçar 0”
    2. Habilite “Ocultar Eixo”
    3. Habilite a escala “Mín Estático” e coloque a expressão abaixo
      1. ((256*pow(2,($(var_zoom)-1)))+((0.5*log((1+(sin(var_mid_lat*pi()/180)))/(1-(sin(var_mid_lat*pi()/180)))))*((-256*pow(2,$(var_zoom)))/(2*pi())))+round(map_size_y/2))
    4. Habilite a escala “Máx Estático” e coloque a expressão abaixo
      1. ((256*pow(2,($(var_zoom)-1)))+((0.5*log((1+(sin(var_mid_lat*pi()/180)))/(1-(sin(var_mid_lat*pi()/180)))))*((-256*pow(2,$(var_zoom)))/(2*pi())))-round(map_size_y/2))

OBS: Também alterei as expressões de “Min Estático” e “Máx Estático” para utilizar o QVD.

imagem08

Clique em avançar

Aba Cores

Agora vamos definir a imagem dinâmica com todos os parâmetros necessários.

Habilite “Imagem dinâmica”  e desabilite a opção “Apenas Área de Desenho”. Na expresão da imagem dinâmica, preencha da seguinte forma:

=’http://maps.google.com/maps/api/staticmap?center=&#8217;
&
num(var_mid_lat, ‘##############’, ‘.’, ‘,’ )
&
‘,’
&
num(var_mid_long, ‘##############’, ‘.’, ‘,’ )
&
‘&zoom=$(var_zoom)’
&
‘&maptype=’&var_maptype
&
‘&size=’&map_size_x&’x’&map_size_y
&
‘&sensor=false’
&
‘&language=pt-BR’

imagem09

Clique em avançar até a aba Título

Aba Título

Desabilite a opção “Mostrar Título” e preencha a Largura e Altura com o valor que colocamos nas variáveis map_size_x e map_size_y, respectivamente.

imagem10

Clique em Concluir e devemos ter o seguinte resultado

imagem11

Abaixo estou disponibilizando um pacote com a aplicação e arquivos utilizados. Faça o download aqui!

Lembre-se

O tamanho dos símbolos vai depender do valor de vendas que cada cidade obteve, caso queira diminuir os símbolos, altere na aba apresentação o tamanho máximo.

Algumas pessoas costumam disponibilizar uma opção de Zoom para o usuário escolher se quer mais próximo ou não, porém essa opção pode atrapalhar totalmente a visão do mapa, pois como vimos o Zoom é calculado através de uma expressão.

O tipo de mapa pode ser alterado através do campo “maptype” que criamos. Esse campo deve ficar disponível para o usuário alterar o modo de visualização.

Por se tratar de um gráfico do tipo dispersão, não conseguimos “passear” pelo mapa como fazemos no próprio site do GoogleMaps, mas o gráfico altera o seu Zoom de visualização de acordo com os filtros que são sendo feitos para alterar o resultado das Vendas. Essa é a maior reclamação que escuto quando implemento este tipo de mapa.

Importante

Muitos tentam implementar e não conseguem visualizar o mapa quando o mesmo é disponibilizado no servidor. Isso pode ocorrer e (na maioria das vezes) o problema esta localizado no Firewall/Proxy da empresa. A URL da API do GoogleMaps deve estar liberada no firewall da empresa para o servidor do QlikView e também para todos os usuários que irão acessar esse relatório.

Caso o mapa, que estava funcionando, pare de funcionar:

  • Ocorreu o bloqueio da página da API do Google Maps
  • Ultrapassou o limite de visualizações diárias
  • Houve alteração na API do Google (última alteração registrada que afetou nossos relatórios foi em 2013)

Conclusão

A forma de utilização deste mapa agrada muitas pessoas, mas pode ser que não algumas pessoas não gostem devido ao “não passear”, mas existem modificações ou até extensions que permitem isso.

O mais importante é conseguirmos apresentar a informação Geo que é querida por muitos gestores e esse é um meio simples de se atingir essa meta.

Por enquanto é isso pessoal!

Até a próxima semana!

Não deixem de comentar 🙂

Anúncios

7 pensamentos sobre “Google Maps no QlikView

  1. Yuri, boa tarde! Tudo bem? Tinha realizado um tempo atrás e funcionou corretamente, contudo, acredito que a Google tenha alterado algum acesso, pois não está funcionando mais. Com você também aconteceu isso?

  2. Boa Tarde!

    Perfeito, consegui fazer e ficou igual ao seu exemplo, só que eu quero mostrar só o mapa do Brasil na tela. Tem como fazer ?

    • Nesse modelo vai depender diretamente dos pontos que você possui no mapa, pois o foco no mapa depende diretamente disso. Remover os demais países nao tem como, apenas alterar o foco.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s