Anteriormente hemos visto cómo es que el API de Geolocalización de HTML5 nos ayuda a conocer nuestra posición (o la de un usuario de la aplicación) y qué técnicas utiliza para obtenerla, ahora veremos qué tan exacta es esa posición y cómo actualizarla mientras nos encontramos en movimiento.
Síganme los buenos!
:: La precisión
Cómo te habrás dado cuenta tras leer el artículo anterior, el obtener una ubicación con el API Geolocalización no es algo exacto, los datos que obtenemos dependen directamente de qué dispositivo utilizamos, qué técnica escogió el navegador para ubicarnos y muchos otros factores. Dependiendo de lo anterior es probable que solo conozcas a ciencia cierta el estado donde te encuentras, la ciudad, o la colonia, incluso en dispositivos más avanzados es muy probable que la ubicación esté en un perímetro de 10 metros únicamente.Debido a lo anterior, los diseñadores del API se dieron a la tarea de brindarnos la precisión con la que se ha determinado la ubicación solicitada (indicándola en metros) con un 95% de nivel de confianza. Por ejemplo, si al obtener tu ubicación la precisión es de 300 metros, podrás estar seguro que te encuentras en un radio de 300 metros con respecto a la ubicación que te indica la aplicación.
Hablando en código la precisión es un valor (de nombre 'accuracy') que contiene el objeto coords (coordenadas) dentro de la posición, por lo tanto, para saber la precisión de la ubicación obtenida hacemos algo como lo siguiente:
posicion.coords.accuracy
El método completo se vería mas o menos así:
function mostrarUbicacion(posicion) {
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
var div = document.getElementById("ubicacion");
div.innerHTML = "Estas en: Latitud: " + latitud + ", Longitud: " + longitud;
div.innerHTML += " (con una precision de " + posicion.coords.accuracy + " metros)";
}
Bastante útil verdad? pero eso no es todo, has pensado ¿qué pasa si estás en constante movimiento?
:: El movimiento
Supongamos que accedes a la aplicación desde un teléfono móvil mientras viajas a través del país en un vehículo, hace un par de minutos obtuviste tu ubicación pero, debido a que sigues en movimiento (y tu chofer maneja a 180 km/hr) ahora te encuentras en un lugar completamente diferente al que te encontrabas en aquel momento. En este caso tendrías que estar solicitando el cálculo de tu posición constantemente para poder seguir de cerca tu desplazamiento.
Para situaciones como la anterior (y algunas otros que se te puedan venir a la mente), los diseñadores del API idearon un método llamado 'watchPosition' el cual comienza a monitorear tu ubicación y reporta inmediatamente cuando ha habido un cambio, de tal manera que la ubicación se refresca constantemente sin necesidad de que el usuario este interviniendo.
Así como es necesario comenzar con el seguimiento del movimiento del usuario, es necesario también indicar a la aplicación en qué momento debe dejar de seguirlo, esto es debido a 2 razones principalmente:
1) El usuario normalmente no desea que se conozca su posición en todo momento.
2) Realizar el chequeo constante demanda mucha energía al dispositivo.
Para indicar a la aplicación que debe detener el seguimiento los diseñadores del API crearon el método 'clearWatch'. Ahora bien, lo siguiente es el ejemplo práctico, en el siguiente código agregaremos 2 botones a la aplicación, uno para iniciar el seguimiento y otro para detenerlo, conservaremos el elemento div para mostrar la ubicación...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A donde vayas te seguire!</title>
<script src="loc.js"></script>
</head>
<body>
<form>
<input type="button" id="watch" value="Sigueme">
<input type="button" id="clearWatch" value="Ya no me sigas">
</form>
<div id="ubicacion">
Aqui estara tu ubicacion!
</div>
</body>
</html>
Esto es todo lo que necesitamos en el archivo html, ahora veamos el contenido del archivo loc.js, que comenzará con una variable global que contendrá la ubicación:
var watchId = null;
Posteriormente le pediremos al navegador que llame al método obtenerUbicacion() tan pronto como cargue la página:
window.onload = obtenerUbicacion;
Y después creamos el método...
function obtenerUbicacion() {
if (navigator.geolocation) { //1
var watchButton = document.getElementById("watch");
watchButton.onclick = seguirUbicacion;//2
var clearWatchButton = document.getElementById("clearWatch");
clearWatchButton.onclick = dejarDeSeguir;//3
} else {
alert("Error! El navegador no soporta Geolocalizacion.");//4
}
}
* Primeramente verificamos que el navegador soporte la geolocalización (1), y en caso de ser así asignamos el método 'seguirUbicacion' al evento onclick del botón llamado 'watchButton' (2) que identificamos por la etiqueta 'Sigueme', al botón que tiene la etiqueta 'Ya no me sigas' le asignamos el método 'dejarDeSeguir'. Por último mostramos una alerta en caso de que el navegador no soporte la geolocalización(4).
Ahora creamos el método seguirUbicacion() cuyo objetivo será comenzar a seguir la ubicación del usuario y en caso de que detecte un cambio en la misma mostrarla por medio del método mostrarUbicacion() que ya conocemos...
function seguirUbicacion() {
watchId = navigator.geolocation.watchPosition(mostrarUbicacion);
}
El método dejarDeSeguir indicará al navegador que ya no es necesario seguir la ubicación del usuario a través del método clearWatch...
function dejarDeSeguir() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
Por último tendremos nuestro método mostrarUbicacion() que no ha sufrido cambios desde la última vez que lo vimos...
function mostrarUbicacion(posicion) {
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
var div = document.getElementById("ubicacion");
div.innerHTML = "Estas en Latitud: " + latitud + ", Longitud: " + longitud;
div.innerHTML += " (con " + posicion.coords.accuracy + " metros de precision)";
}
Ahora el código está listo, para probarlo como Dios manda es necesario que comiences a moverte una distancia considerable, algunos cientos de metros de ser posible para que notes cambios sustanciales.
Para finalizar el artículo un par de preguntas frecuentes:
1.- ¿Cómo puedo determinar la frecuencia con que el navegador actualiza la ubicación cuando utilizo el método watchPosition? No puedes. Lamento decepcionarte pero, al igual que muchas otras cosas en esta nueva etapa del HTML, todo depende del navegador, él se encarga de decidir qué tan frecuente es necesario actualizar.
2.- ¿Qué otra información puedo obtener además de latitud, longitud y precisión?
Puedes obtener también la altitud, la precisión de la altitud, la velocidad de desplazamiento y la dirección en la que te mueves. Todos estos datos están dentro del objeto coords pero, nuevamente, los datos disponibles en dado caso dependen directamente del dispositivo y el navegador utilizados (sí, a mi tampoco me gusta tanto esa última parte).
Como ya es costumbre puedes descargar el código para desarrollar este ejemplo desde el siguiente enlace:
Si te gustó el artículo puedes compartirlo desde los botones que se encuentran en la parte inferior (Twitter, Facebook, Google+).
De igual manera puedes suscribirte al blog
para que los nuevos artículos lleguen a tu bandeja de correo o lector de Feeds favorito desde los enlaces del lado derecho de la página.Si tienes alguna duda o algo que decir te invito a que dejes tu comentario.
Si eres experto en HTML5 y te interesa participar en un gran startup de alta tecnología con impacto global como cofundador, esto te interesa:
ResponderBorrarVisita: http://www.tecnofrog.com/cofundadores