HTML 5: Início, Meio e Fim – Geolocalização

Este é o sexto artigo da série sobre HTML 5. Se você está chegando agora na série e não possui os conhecimentos equivalentes, recomendo fortemente a leitura da mesma no link apresentado anteriormente.

No artigo de hoje falaremos especificamente sobre o recurso de geolocalização (geolocalization) recurso suportado pelo HTML 5 para os seguintes browsers: Internet Explorer, Firefox, Chrome, Safari e Opera.

Entendendo o recurso geolocation?

O recurso de geolocalização (uma API suportada pelo HTML 5) possui o objetivo de apresentar no browser a localização do usuário. Uma observação importante aqui é: geolocatization não é uma tag de HTML 5 (como ocorre por exemplo com video, audio, etc.) mas sim, uma API suportada por HTML 5. Outro aspecto importante a ser considerado é o fato de que, como é um recurso que teóricamente fere informações de privacidade (informando ao usuário sua posição em dado momento), uma confirmação acerca da execução do recurso é solicitada.

Para que você consiga utilizar o recurso, você deve escrever o código em Javascript (sim, sempre ele). Você pode visualizar um exemplo simples em funcionamento clicando aqui.

Como implemento este recurso em minha página?

A implementação de geolocalização em uma página HTML 5 é realizada através da linguagem de scripts padrão dos browsers, isto é, Javascript. A Listagem 1 apresenta um exemplo de como implementar um geolocalizador simples.

[javascript]
<div id=”geoarea”>
<input type=”button” value=”Onde estou agora?” onclick=”ExibirLocalizacao()” />
</div>

<script type=”text/javascript”>
var area = document.getElementById(“geoarea”);

function ExibirLocalizacao(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(ObterPosicao);
}
else{
area.innerHTML = “Infelizmente este browser não suporta o recurso de geolocalização.”;
}
}

function ObterPosicao(posicao){
area.innerHTML = “Latitude: ” + posicao.coords.latitude + “<br /> Longitude: ” + posicao.coords.longitude;
}
</script>
[/javascript]

Listagem 1. Apresentando as coordenadas do usuário que acessa a página

O resultado gerado pelo browser ao interpretar o trecho de código acima pode ser visualizado nas figuras 1 e 2.

 

Figura 1. O recurso de geolocalização solicitando permissão para informar os dados do usuário

 

Figura 2. O browser exibindo as coodenadas que indicam a presença do usuário

Javascript é uma linguagem expressiva (característica marcante de linguagens dinâmicas) e como resultado disso, temos quase sempre um código limpo e de fácil entendimento. Aqui não é diferente, o código fala por sí, entretanto, vamos ampliar o zoom sobre o mesmo e entender com calma tudo o que está ocorrendo? Vamos a explicação linha por linha?

• Linha 6: informamos ao interpretador onde o recurso de geolocalização deve ser aplicado.
• Linha 8: criamos a função responsável por exibir os dados da localização do usuário.
• Linha 9: verificamos se o browser do usuário dá suporte para o recurso de geolocalização.
• Linha 10: caso o browser suporte o recurso de geolocalização, exibimos as coordenadas do usuário (latitude e longitude). Esta exibição só pode ser realizada porque uma outra função (obterPosicao) retorna os valores com a mensagem já formatada.
• Linha 13: caso o recurso de geolocalização não seja suportado pelo browser, informamos ao usuário através de uma mensagem a ocorrência deste fato.
• Linha 17: criamos a função “obterPosicao” que, como o próprio nome sugere, recupera a posição do usuário.
• Linha 18: utilizamos a “area” onde o recurso de geolocalização será aplicado para “setar” a informação de latitude e longitude.

Simples não? Muito embora o código apresentado pela Listagem 1 já dê uma dimensão interessante em relação as operações que podem ser realizadas com o recurso de geolocalização ele é simplista. Seria bem mais interessante se pudéssemos integrar esses dados resultantes (latitude e longitude) há um mapa e exibir o ponto exato no mesmo, certo? A Listagem 2 apresenta uma alternativa em relação a este fato.

[javascript]
<script type=”text/javascript”>
var mapa = null;
var ponto = null;
var pixel = null;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(posicao) {
var latitude = posicao.coords.latitude;
var longitude = posicao.coords.longitude;
var ObjetoLatLong = new VELatLong(latitude, longitude);
mapa = new VEMap(“AreaMapa”);
mapa.LoadMap(ObjetoLatLong,15,VEMapStyle.Road,false,VEMapMode.Mode2D,true,1);
ponto = mapa.GetCenter();
pixel = mapa.LatLongToPixel(ponto);
mapa.AddPushpin(ponto);
});
} else {
alert(“Infelizmente este browser não suporta o recurso de geolocalização.”);
}
</script>
[/javascript]

Listagem 2. Exibindo a posição do usuário no Bing Maps

Note que a ideia é a mesma do exemplo apresentado na Listagem 1, com as diferenças de que, ao invés de exibirmos a posição apenas em termos numéricos estamos fazendo em um mapa (em nosso exemplo do Bing Maps) e que, para que isso ocorra estamos utilizando um serviço disponibilizado na API da ferramenta de mapas (http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3). O resultado da execução deste código na página HTML é aquele apresentado pela Figura 3.

Figura 3. A posição do usuário no mapa (utilizando Bing Maps)

Você pode visualizar o exemplo em funcionamento em seu browser clicando aqui.

Tratamento de erros

Quando dissemos acima que a API para geolocalização é completa é porque realmente é. Com ela, além dos recursos já apresentados, é possível tratar erros de uma forma muito tranquila e eficiente. Considere o exemplo apresentado pela Listagem 3.

[javascript]
function exibirErro(erro)
{
switch(erro.code)
{
case erro.PERMISSION_DENIED:
area.innerHTML=”O usuário não permitiu o acesso ao recurso de geolocalização.”
break;
case erro.POSITION_UNAVAILABLE:
area.innerHTML=”Posição de usuário desconhecida.”
break;
case erro.TIMEOUT:
area.innerHTML=”A requisição demorou demais para receber uma resposta.”
break;
case erro.UNKNOWN_ERROR:
area.innerHTML=”Um erro desconhecido foi encontrado.”
break;
}
}
[/javascript]

Listagem 3. Tratando erros possíveis com geolocalização

O código apresentado acima é extremamente simples e dispensa comentários aprofundados. A ideia aqui é tratar eventuais erros gerados a partir da interação do usuário com a aplicação que utiliza o recurso de geolocalização. É importante observar que a função “exibirErro” será executada apenas quando um dos erros tratados (a saber: permissão negada para execução do recurso, localização desconhecida, demora no tempo de resposta para solicitação ou algum erro genérico desconhecido pelo gerenciador). O resultado do teste da função acima em execução pode ser visualizado na Figura 4.

Figura 4. Erro disparado pelo handler de geolocalização

Você pode visualizar um exemplo em execução apresentando o conceito de tratamento de erros clicando aqui.

O método “getCurrentPosition()”

Em todos os exemplos de código apresentados neste post você deve ter notado a presença do método “getCurrentPosition()”. Basicamente a função deste método é retornar o objeto de geolocalização com propriedades específicas para manipulação do mesmo. As propriedades e suas respectivas descrições são:

• coords.latitude: retorna a latitude do objeto de localização gerado. Este é um número de ponto flutuante.
• coords.longitude: retorna a longitude do objeto de localização. Também ponto flutuante.
• coords.accuracy: nível de precisão do objeto de localização.
• coords.altitude: retorna a altitude do objeto.
• coords.altitudeAccuracy: retorna a precisão da altitude na posição selecionada.
• coords.heading: retorna em graus a posição em relação ao norte.
• coords.speed: retorna a velocidade (no caso de movimento). O valor representa a grandeza metros por segundo (m/s).
• timestamp: retorna a data e a hora da geração do conteúdo.

Conclusões

Geolocalização é um recurso disponibilizado na forma de API no HTML 5 e é interessante, pois, permite enriquecer aplicações web em grande escala, principalmente pensando na integração possível com serviços terceiros (como é o caso da API de mapas Bing Maps).

As versões mais atuais dos principais browsers do mercado já dão suporte nativo para o recurso de geolocalização, portanto, você já pode considerar a adoção dos recursos em seus projetos.

Se sua aplicação for pensada para execução em dispositivos móveis, geolocalização é uma excelente opção se for preciso apresentar localização de determinado elemento.

Por hoje é só! Forte abraço a todos 😉 .