Implementação do Google Maps

nicolett_yuri — Sun, 19 Jul 2015 22:35:00 GMT

Fala pessoal, tudo bom?

Essa semana estou criando um tutorial de desenvolvimento para o Google Maps API v3.

Vamos lá!

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 VendasSUM(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
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))
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.
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

Re: Implementação do Google Maps

elinaldo — Mon, 20 Jul 2015 12:48:00 GMT

Bom dia!

Parabéns pelo post.

Um boa semana.

Re: Implementação do Google Maps

Mon, 20 Jul 2015 12:49:54 GMT

Muito bem explicado!

Valeu!

Re: Implementação do Google Maps

daniel_vale — Mon, 20 Jul 2015 17:48:38 GMT

Parabéns Yuri... filé que só... fiz aqui e deu certinho!

Re: Implementação do Google Maps

nicolett_yuri — Mon, 20 Jul 2015 20:50:05 GMT

Obrigado pessoal, estou apenas revalidando a questão da utilização da KEY.

Nas definições do Google esta dizendo que é recomendável a utilização, mesmo que seja para a versão gratuita.

Estou analisando os fatos e caso eu tenha cometido esse engano irei corrigir o post

Re: Implementação do Google Maps

EduardoAlexandredeFrancisco — Wed, 22 Jul 2015 12:47:17 GMT

Bom dia!

Parabéns por mais um EXCELENTE post.

Re: Implementação do Google Maps

nicolett_yuri — Wed, 22 Jul 2015 15:58:50 GMT

Pessoal, apenas para confirmar:

o google RECOMENDA a utilização da KEY, pois UM DIA ele vai travar para que todos os usuários se utilizem dela. Em resumo a KEY NÃO é obrigatória, mas corre o risco de um dia parar de funcionar por falta dela.

Minha recomendação então é criar essa KEY para uma conta afim de evitar futuros problemas, mas reforço a utilização da KEY GRATUITA caso seu ambiente seja pequeno e não ultrapasse os limites de consultas citados no artigo.

Depois vou atualizar o post !

Re: Implementação do Google Maps

Wed, 02 Nov 2016 19:19:50 GMT

Simplesmente o máximo Yuri, tchê fico extremamente grato por este post, simplesmente d+ parabéns pelo post, show...agora uma duvida, cara é possível usar uma imagem do mapa do brasil .jpg e substituir as bolinhas coloridas por bolinhas com o logo da empresa ?

Re: Implementação do Google Maps

Anonymous — Wed, 19 Jul 2017 12:37:08 GMT

Excelente material Yuri. Estamos implementando o Qlikview na cia e aos poucos explorando o que a ferramenta proporciona. Com certeza esse será um dos materiais que nos ajudará a mudar de patamar nas análises de dados e tomada de decisão. Parabéns pelo talento e a forma que os compartilha (o blog também é nota 10).

Re: Implementação do Google Maps

pedromsouza — Fri, 09 Feb 2018 02:05:20 GMT

Olá!

Primeiramente, parabéns Yuri e muito obrigado pelo post!

Segui o passo a passo e ficou quase 100%. O mapa não está centralizando bem. O que pode ser?

topic Re: Implementação do Google Maps in Brasil

Implementação do Google Maps

Google Maps no QlikView

A API do Google Maps

Para reforçar

Vantagens e Desvantagens

A implementação

Primeiro Passo

Segundo Passo

Quarto Passo

Quinto Passo

Sexto Passo

Aba Geral

Aba Dimensões

Aba Expressões

Aba Classificação

Aba Estilo

Aba Apresentação

Aba Eixos

Aba Cores

Aba Título

Lembre-se

Importante

Conclusão

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps

Re: Implementação do Google Maps