Instituto Tecnolgico de Celaya

HTML5: Prctica #4 Geolocalizacin

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 Geolocalizacin: Es el conjunto de tcnicas que permiten conocer las coordenadas geogrficas de un usuario. Gracias a las novedades de HTML5, obtener la localizacin es realmente sencillo. HTML5 incorpora APIs de JavaScript que aaden a la web un mundo de nuevas posibilidades. Una de ellas es la referente a la Geolocalizacin, que nos puede proporcionar informacin de utilidad, como el lugar donde se encuentra el usuario cuando visita un sitio web. En diversas aplicaciones resulta de gran utilidad tener la ubicacin del usuario, tambin es importante saber que no siempre se cuenta con un GPS que entregue esta informacin, y es aqu donde entra a jugar la geolocalizacin por medio de la conexin WiFi.

Esta API destaca por lo fcil que es utilizarla. A manera de ejemplo bsico, revise el siguiente cdigo:
<script> function Localizar() { navigator.geolocation.getCurrentPosition(ObtenerCoordenadas); } function ObtenerCoordenadas(position){ var latitud = position.coords.latitude; var longitud = position.coords.longitude; } </script>

Este script ocasiona que las variables latitud y longitud tengan los elementos de localizacin latitud y longitud de nuestra posicin.

Instituto Tecnolgico de Celaya

HTML5: Prctica #4 Geolocalizacin

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 Cuando se ejecuta una pgina que solicite la geolocalizacin del usuario, el navegador solicitar permiso para conocer la ubicacin. Si el usuario acepta, el proceso continuar. La API permite que el navegador utilice diferentes mtodos para obtener la situacin del visitante. Algunas de ellas son GPS, direccin IP, triangulacin de redes mviles o bien la localizacin de la WiFi que est utilizando. Estas tcnicas son utilizadas por el navegador para obtener la latitud y longitud exacta donde se encuentra el usuario. GPS es un dispositivo que permite conocer la ubicacin geogrfica de un objeto con la ayuda de los satlites. Tambin es posible obtener la ubicacin mediante seales provenientes de los dispositivos WiFi. Compaas como Google o Skyhook recolectan informacin en sus bases de datos, provenientes de routers, y gracias a la triangulacin se logra ubicar el punto, gracias al uso de tres puntos de referencia y distancias o puntos ya conocidos; por otro lado los dispositivos con GPS que capturan informacin de estos routers tambin envan la informacin, adems Google tambin lo hace con sus carros de Google Street View. Una vez que un usuario accede a una aplicacin que permite realizar la geolocalizacin por WiFi, sta se conecta a la base de datos de la empresa que utiliza y le enva la direccin MAC de los routers que la antena WiFi del dispositivo que accede a la aplicacin detecta, la compara con las almacenadas en la base de datos y enva la ms cercana a la ubicacin del usuario, la cual con frecuencia es bastante acertado. La base de datos de la empresa usada por la aplicacin retornar la latitud y longitud del punto ubicado, informacin con la cual se puede representar en un mapa la ubicacin geogrfica del objeto, pudiendo usar servicios como Google maps para este propsito. Dependiendo del dispositivo y navegador, se utilizan unos u otros mtodos para conseguir la geolocalizacin, por lo que el resultado puede no ser el mismo pero s muy aproximado. Aun as, la precisin es muy alta y nos permite conocer los datos ms importantes, como por ejemplo, la ciudad. La lista de navegadores que soportan Geolocalizacin en HTML 5 incluye: Internet Explorer 9.0+ Mozilla Firefox 19.0+ Google Chrome 24.0+ Safari 5.1+ Opera 12.1+ iOS Safari 3.2+ Opera Mini 5.0+ Android Browser 2.1+ Blackberry Browser 7.0+

Instituto Tecnolgico de Celaya

HTML5: Prctica #4 Geolocalizacin

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 Para verificar si un navegador soporta o no la geolocalizacin, observe el siguiente cdigo:
<script> function Localizar() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(ObtenerCoordenadas); }else{ alert('Tu navegador no soporta geolocalizacin.'); } } ... </script>

El siguiente cdigo revisa errores posibles al tratar de obtener las coordenadas:

<script> function Localizar() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(ObtenerCoordenadas, errores); }else{ alert('Tu navegador no soporta geolocalizacin.'); } } function errores(err) { if (err.code == 0) { alert("Algo ha salido mal"); } if (err.code == 1) { alert("No has aceptado compartir tu posicin"); } if (err.code == 2) { alert("No se puede obtener la posicin actual"); } if (err.code == 3) { alert("Se ha superado el tiempo de espera"); } } ... </script>

Una de las aplicaciones de la geolocalizacin es la muestra de la ubicacin de un lugar o del usuario mismo en un mapa, para mayor referencia a los visitantes de la pgina. Aprovechando la potencia de los mapas de Google y su fcil integracin en la programacin web, veamos cmo se implementa:

Instituto Tecnolgico de Celaya

HTML5: Prctica #4 Geolocalizacin

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> function Localizar() { var s = document.getElementById('status'); s.innerHTML = "Revisando..."; navigator.geolocation.getCurrentPosition(ObtenerCoordenadas); } function ObtenerCoordenadas(position){ var latitud = position.coords.latitude; var longitud = position.coords.longitude; document.getElementById("latitud").value = latitud; document.getElementById("longitud").value = longitud; var s = document.getElementById('status'); s.innerHTML = "Localizado!"; var capaMapa = document.createElement('div'); capaMapa.id = 'capaMapa'; capaMapa.style.height = '400px'; capaMapa.style.width = '560px'; document.querySelector('article').appendChild(capaMapa); var latlng = new google.maps.LatLng(latitud, longitud); var opciones = { zoom: 15, center: latlng, mapTypeControl: false, navigationControlOptions: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP };

{style:

var mapa = new google.maps.Map(document.getElementById("capaMapa"), opciones); var marker = new google.maps.Marker({ position: latlng, map: mapa }); } function error(err) { var s = document.querySelector('#status'); s.innerHTML = typeof err == 'string' ? err : "failed"; if (err.code == 0) { s.innerHTML = "Algo ha salido mal";

Instituto Tecnolgico de Celaya

HTML5: Prctica #4 Geolocalizacin

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014
} if (err.code == 1) { s.innerHTML = "No has aceptado compartir tu posicin"; } if (err.code == 2) { s.innerHTML = "No se puede obtener la posicin actual"; } if (err.code == 3) { s.innerHTML = "Se ha superado el tiempo de espera"; } } </script> </head> <body> <input type="text" id="latitud"> <input type="text" id="longitud"> <input type="button" onclick="Localizar()" coordenadas">

value="Obtener

<article> <p>Encontrando tu ubicacin: <span id="status">---</span></p> </article> </body> </html>

La API de geolocalizacin no es ms que una interfaz que entrega los datos de localizacin que el dispositivo (mvil, computadora, etc) ofrece. Si el dispositivo es un equipo de cmputo, seguramente la localizacin se realizar en base a a geolocalizacin IP, que es el ms bsico de los mtodos. Sin embargo, en un Smartphone, las coordenadas podrn responder a una triangulacin en base a las redes mviles ms cercanas. Si el dispositivo dispone de un GPS, la localizacin ser casi perfecta (menos de 20 m de margen de error). Es el navegador el que decide el sistema de localizacin a utilizar en base a su propia tabla de prioridades. La geolocalizacin es til para aplicaciones HTML5 donde el dispositivo mvil sea el cliente principal. Una aplicacin sera localizar restaurantes cercanos a mi ubicacin.