Utilizando Mapas e Rotas em aplicações Magic xpa RIA

Nesta dica iremos utilizar Mapas e Rotas do Google Maps.

Os programas que serão desenvolvidos “Ver Mapa” e “Ver Rota” serão realizados de dois jeitos – difícil e fácil – sendo que o difícil é mais integrado com o Magic xpa (uniPaaS), e o fácil será utilizado um endereço de internet no controle Browser. Para utilizar os exemplos difíceis será necessário adquirir uma chave. Verifique em (http://code.google.com/apis/maps/signup.html); esta página contém também questões de limitações.

Desenvolvendo o programa “Ver Mapa” – Jeito Difícil

Para mostrar um mapa precisamos do endereço, e a partir deste endereço, precisamos encontrar as coordenadas de latitude e longitude, e então solicitar a localização dessas coordenadas.
Os exemplos a seguir foram desenvolvidos utilizando documentações do Google. Então, para maiores informações, verifique em:
Google Static Maps (http://code.google.com/intl/pt-BR/apis/maps/documentation/staticmaps/), retornando uma imagem estática do mapa.
Geocodificação (http://code.google.com/intl/pt-BR/apis/maps/documentation/services.html#Geocoding_Direct), retornando as coordenadas a partir de um endereço.

Para isso, crie um programa com o nome “Ver Mapa Difícil” do tipo Rich Client e inclua as seguintes variáveis:
Endereço – Tipo Alpha 100 (Para digitar o endereço)
retorno – Tipo Blob (Conterá o retorno das latitudes e longitudes)
URL – Tipo Alpha 500 (Conterá a URL que retornará o Mapa)
Inclua a variável Endereço no Form para poder digitar o endereço. Inclua também um controle SubForm com a propriedade “Data” apontando para a variável URL.
Acrescente um botão e um evento com lógica para esse botão. O objetivo deste botão/lógica é buscar as coordenadas e atualizar a variável URL com as coordenadas para que o controle Browser apresente o mapa.

1) Primeiro vamos buscar as coordenadas. Na lógica do botão criado anteriormente inclua a operação Update a variável “retorno” com a expressão HTTPGet(‘http://maps.google.com.br/maps/geo?q=’ & Trim(Endereço) & ‘&output=csv&sensor=true_or_false&key=SuaChavedoGoogleMaps’. Nesta operação será retornado um csv com as informações da geocodificação. Note que onde estiver “SuaChavedoGoogleMaps” utilize a chave gerada pelo Google.

2) Logo a seguir, inclua a operação Bloco com a expressão Trim(StrToken(retorno,1,’,’))=’200′. Isto significa que o retorno está OK (http://www.google.com/support/webmasters/bin/answer.py?hl=br&answer=40132).

3) Dentro deste bloco, inclua a operação Update a variável URL com a expressão ‘http://maps.google.com/staticmap?markers=’ & Trim(StrToken(retorno,3,’,’))  &  ‘,’ & Trim(StrToken(retorno,4,’,’)) &’&size=340×340′. Estamos atualizando a variável URL com as latitudes e longitudes recebidas. Com isso o controle Browser irá mostrar a imagem do mapa.

4) Inclua uma operação de bloco else para o bloco criado anteriormente para mostrar uma mensagem quando der erro. Então dentro do bloco else inclua a operação verify e na mensagem coloque a expressão ‘Problema na chamada, codigo ‘ & Trim(StrToken(retorno,1,’,’)) & ASCIIChr(13) & ‘Verifique o problema em http://www.google.com/support/webmasters/bin/answer.py?hl=br&answer=40132‘

Pronto! Faça o teste e verifique que ao clicar no botão, o mapa aparece no controle Browser.

Desenvolvendo o programa “Ver Mapa” – Jeito Fácil

Neste programa mostraremos o mapa em um Browser como se o usuário estivesse pesquisado o mapa no site.

1) Aproveite o programa criado anteriormente. Retire a lógica do botão e retire a variável retorno.
2) Na lógica do botão inclua a operação update a variável URL com a expressão ‘http://maps.google.com.br/?q=’ & Trim(Endereço)

Pronto! Faça o teste e verifique que ao clicar no botão o site Maps do Google aparece com o mapa no controle Browser.

Desenvolvendo o programa “Ver Rota” – Jeito Difícil

Neste programa teremos dois campos “Endereço de Origem” e “Endereço de Destino”. E ao clicar em um botão Buscar, será mostrado em um controle Browser a rota em texto e também no mapa e serão atualizados dois campos no form do Magic xpa “Distância em Metros” e “Tempo em Segundos”, baseado na rota.

Os exemplos a seguir foram desenvolvidos utilizando documentações do Google, então para maiores informações verifique em:
API do Google Maps (http://code.google.com/intl/pt-BR/apis/maps/ e http://code.google.com/intl/pt-BR/apis/maps/documentation/index.html)
Referência da API do Google Maps (http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html)

Como neste programa iremos pegar as informações de distância e tempo, irei utilizar um HTML que fará parte do deployment desta aplicação e deve estar também em um local acessível pelo Web Server, este HTML foi retirado de (http://code.google.com/intl/pt-BR/apis/maps/documentation/examples/index.html mais precisamente de http://code.google.com/intl/pt-BR/apis/maps/documentation/examples/directions-simple.html. Este HTML foi melhorado para refletir a nossa realidade.

O HTML que vamos utilizar é este que está logo abaixo:

<html xmlns=”http://www.w3.org/1999/xhtml”  xmlns:v=”urn:schemas-microsoft-com:vml”>

<head>

<title>Google Maps JavaScript API Example: Simple

Directions</title>

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<script

src=”http://maps.google.com.br/maps?file=api&v=2.x&key=SuaChavedoGoogleMaps” type=”text/javascript”></script>

<script type=”text/javascript”>

// Create a directions object and register a map and DIV to hold the

// resulting computed directions

var map;

var directionsPanel;

var directions;

function initialize(rota) {

map = new GMap2(document.getElementById(“map_canvas”));

map.setCenter(new GLatLng(-14.2350040,-51.9252800), 10);

directionsPanel = document.getElementById(“route”);

directions = new GDirections(map, directionsPanel, {“locale”: “pt_BR”} );

directions.load(rota);

GEvent.addListener(directions,”load”,

function() {

window.external.MGExternalEvent(directions.getDistance().meters + “;” + directions.getDuration().seconds);

alert(“OK nDistancia: ” + directions.getDistance().meters + ” metros nTempo: ” + directions.getDuration().seconds + ” segundos”);

}

);

GEvent.addListener(directions,”error”,

function() {

alert(“ERRO nCodigo:” + directions.getStatus().code + ” – nRequest:” + directions.getStatus().request);

}

);

}

function BuscaEndereco(origem,destino)

{

var rota = “from: ” + origem + ” to:” + destino;

initialize(rota);

}

//Querystring em javascript

function QueryString(ID){

var URL = document.location.href;

if(URL.indexOf(ID + ‘=’)>-1){

var qString = URL.split(‘?’);

var keyVal = qString[1].split(‘&’);

for(var i=0; i<keyVal.length; i++){

if(keyVal[i].indexOf(ID + ‘=’)==0){

var val = keyVal[i].split(‘=’);

return val[1];

}

}

return “”;

}else{

return “”;

}

}

function BuscaDadosURL()

{

var origem = QueryString(“origem”);

var destino = QueryString(“destino”);

if(origem!=”” && destino!=””)

{

origem = unescape(origem);

destino = unescape(destino);

BuscaEndereco(origem,destino);

}

}

</script>

</head>

<body onload=”BuscaDadosURL()”>

<div id=”map_canvas” style=”width: 70%; height: 480px; float:left; border: 1px solid black;”></div>

<div id=”route” style=”width: 25%; height:480px; float:right; border; 1px solid black;”></div>

<br/>

</body>

</html>

Explicação básica sobre este HTML:

1)      Na linha:
<script src=”http://maps.google.com.br/maps?file=api&v=2.x&key= SuaChavedoGoogleMaps “></script>
Note que onde estiver “SuaChavedoGoogleMaps” utilize a chave gerada pelo Google.

2)      Quando o corpo do HTML (body) é carregado (onload), é executada a função BuscaDadosURL()

3)      A função BuscaDadosURL() busca os dados da URL que será passado pelo Magic xpa, após resgatar os dados da url executa a função BuscaEndereco() passando os endereços de origem e destino

4)      A função BuscaEndereco() recebe os endereços de origem e destino e monta uma string conforme o padrão do Google Maps de GDirections (http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html#GDirections) e executa a função initialize() passando a rota.

5)      A função initialize() recebe a rota e faz os seguintes passos:

1. Instancia o objeto GMap2 (http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html#GMap2) passando qual o DIV (bloco do HTML) que ficará a imagem, note que dentro do corpo do HTML (body) existe um bloco DIV com id “map_canvas”.
2. Centraliza o mapa passando as latitudes e longitudes do Brasil
3. Cria um painel que irá ficar a rota em texto “directionsPanel”
4. Instancia o objeto GDirections (http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html#GDirections) passando o objeto GMap2, Panel e indicando que o texto deve ser em português
5. Lê a rota recebida “directions.load(rota);”
6. Adiciona dois “Listener” (http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html#GEvent), um quando der erro e outro não.
7. No “Listener” que está OK “load”, é executado uma função do Magic xpa “window.external.MGExternalEvent” para realizar comunicação do controle Browser e o Magix xpa. Na execução desta função é passado um texto que será lido pelo Magic xpa. Este texto contém as informações de Distância e Tempo separadas por ponto e vírgula.
   Após é executado um alert() mostrando a distância e tempo.
8. No “Listener” que está deu erro “error” é executado um alert() mostrando o código e descrição do objeto que invocou. Para maiores informações sobre os erros verifique em (http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html#GGeoStatusCode)

O código HTML deve ser salvo em um arquivo HTML e disponibilizado de uma forma que fique acessível no Web Server. Este HTML será usado logo a seguir.

O programa Magic xpa:

1) Crie um programa com o nome “Ver Rota Difícil” do tipo Rich Client. Inclua as seguintes variáveis:
Endereço de Origem – Tipo Alpha 100 (Para digitar o endereço de origem)
Endereço de Destino – Tipo Alpha 100 (Para digitar o endereço de destino)
URL – Tipo Alpha 500 (Conterá a URL que aponta para o nosso HTML)
Distância em Metros – Tipo Numérico 18 (Conterá a distância em metros)
Tempo em Segundos – Tipo Numérico 18 (Conterá o tempo em segundos)

2) Inclua no form as variáveis Endereço de Origem/Endereço de Destino/Distância em Metros e Tempo em Segundos. Acrescente também o controle Browser que a sua propriedade “Data” aponte para a variável URL

3) Inclua no form um botão “Buscar” e um evento para este botão

4) Na lógica do evento do botão “Buscar” acrescente duas operações Update atualizando as variáveis “Distância em Metros” e “Tempo em Segundos” com zero. Acrescente outra operação Update atualizando a variável URL com o caminho que consiga acessar o HTML criado anteriormente, passando o endereço de origem e destino, por exemplo ‘http://localhost/mapa.htm?origem=’ & Trim(Endereço de Origem) & ‘&destino=’ & Trim(Endereço de Destino), Neste caso estaria tentando acessar o arquivo mapa.htm via Web Server e na maquina local. Até aqui, a URL do mapa já é montada e já temos a rota aparecendo, nos próximos passos iremos resgatar as informações de distância e tempo.

5) Inclua uma linha de Header event, evento do tipo Internal e selecione o evento “External Event”, tecle OK e se perguntar se gostaria de criar os parâmetros clique em SIM. Este evento é para capturar aquela linha do HTML “window.external.MGExternalEvent”.

6) Na lógica do evento criado anteriormente, mude o tipo da variável “Parameter” para Alpha 50. Nesta variável virá o tempo e a distância separados por ponto e vírgula.

7) Ainda na lógica inclua duas operações Update uma atualizando a variável “Distância em Metros” com a expressão Val(StrToken(Trim(Parameter),1,’;’),’N18′) e a outra atualizando a variável “Tempo em Segundos” com a expressão Val(StrToken(Trim(Parameter),2,’;’),’N18′).

Pronto! O seu programa já pode ser executado. Verifique que o mapa e a rota aparecem, e as informações de distância e tempo são atualizadas nos controle do Magic xpa.

Desenvolvendo o programa “Ver Rota” – Jeito Fácil

Neste programa mostraremos a rota em um Browser como se o usuário estivesse pesquisado a rota no site.

1) Aproveite o programa criado anteriormente. Retire a lógica do botão e retire as variáveis “Distância em Metros” e “Tempo em Segundos”.
2) Na lógica do botão inclua a operação update na variável URL com a expressão ‘http://maps.google.com.br?saddr=’ & Trim(Endereço de Origem) & ‘&daddr=’ & Trim(Endereço de Destino)

Pronto! Faça o teste e verifique que ao clicar no botão o site Maps do Google aparece com a rota no controle Browser.