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
Sexto Passo
Aba Geral
Crie um gráfico do tipo dispersão e desmarque a opção “Mostrar título no gráfico”
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.
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:
- Longitude
- Latitude
- 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.
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.
Clique em avançar
Aba Estilo
Vai de sua preferência. A minha é a última da coluna direita
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”
Clique em avançar
Aba Eixos
Agora temos várias alterações a serem realizadas:
- Para o Eixo X
- Desabilite “Forçar 0”
- Habilite “Ocultar Eixo”
- Habilite a escala “Mín Estático” e coloque a expressão abaixo
- (256*pow(2,($(var_zoom)-1)))+( var_mid_long *((256*pow(2,$(var_zoom)))/360)) -round(map_size_x/2)
- Habilite a escala “Máx Estático” e coloque a expressão abaixo
- ( (256*pow(2,($(var_zoom)-1)))+( var_mid_long *((256*pow(2,$(var_zoom)))/360)) + round(map_size_x/2))
- Para o Eixo Y
- Desabilite “Forçar 0”
- Habilite “Ocultar Eixo”
- Habilite a escala “Mín Estático” e coloque a expressão abaixo
- ((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))
- Habilite a escala “Máx Estático” e coloque a expressão abaixo
- ((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.
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=’
&
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’
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.
Clique em Concluir e devemos ter o seguinte resultado
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 🙂
Fantástico….
Melhor post sobre mapas para o Qlik !!!
Valew Nico !!!!
Obrigado Wagner ! 😀
Ola! não entendi muito bem o início. Tenho uma tabela (excel) com as coordenadas, e você disponibiliza um link (https://drive.google.com/file/d/0B2cPTU8EF4R4b3JJUVFzZ1VBU1k/view?pref=2&pli=1) também das coordenadas. Consigo colocar minha tabela? se não, onde coloco o código do link acima?
Obrigado!
Opa Lucas, tudo bom? Este arquivo que disponibilizei possui um QVD com as coordenadas de todas as cidades do Brasil, mas caso queiro poderá utilizar o seu próprio arquivo, como comentado.
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?
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.