Ingeniería Systems: API Geolocation con HTML y JavaScript

Encontrando su lugar

La API Geolocation fue diseñada para que los navegadores puedan proveer un mecanismo de detección por defecto que permita a los desarrolladores determinar la ubicación física real del usuario. Previamente solo contábamos con la opción de construir una gran base de datos con información sobre direcciones IP y programar códigos exigentes dentro del servidor que nos darían una idea aproximada de la ubicación del usuario (generalmente tan imprecisa como su país).

Esta API aprovecha nuevos sistemas, como triangulación de red y GPS, para retornar una ubicación precisa del dispositivo que está accediendo a la aplicación. La valiosa información retornada nos permite construir aplicaciones que se adaptarán a las particulares necesidades del usuario o proveerán información localizada de forma automática.

Tres métodos específicos son provistos para usar la API:

getCurrentPosition(ubicación, error, configuración) Este es el método utilizado para consultas individuales. Puede recibir hasta tres atributos: una función para procesar la ubicación retornada, una función para procesar los errores retornados, y un objeto para configurar cómo la información será adquirida. Solo el primer atributo es obligatorio para que el método trabaje correctamente.
watchPosition(ubicación, error, configuración) Este método es similar al anterior, excepto que comenzará un proceso de vigilancia para la detección de nuevas ubicaciones. Trabaja de forma similar que el conocido método setInterval() de Javascript, repitiendo el proceso automáticamente en determinados períodos de tiempo de acuerdo a la configuración por defecto o a los valores de sus atributos.
clearWatch(id) El método watchPosition() retorna un valor que puede ser almacenado en una variable para luego ser usado como referencia pro el método clearWatch() y así detener la vigilancia. Este método es similar a clearInterval() usado para detener los procesos comenzados por setInterval().

getCurrentPosition(ubicación)

Como dijimos, solo el primer atributo es requerido para que trabaje correctamente el método getCurrentPosition(). Este atributo es una función que recibirá un objeto llamado Position, el cual contiene toda la información retornada por los sistemas de ubicación.

El objeto Position tiene dos atributos:

coords Este atributo contiene un grupo de valores que establecen la ubicación del dispositivo y otros datos importantes. Los valores son accesibles a través de siete atributos internos: latitude (latitud), longitude (longitud), altitude (altitud en metros), accuracy (exactitud en metros), altitudeAccuracy (exactitud de la altitud en metros), heading (dirección en grados) y speed (velocidad en metros por segundo).
timestamp Este atributo indica el momento en el que la información fue adquirida (en formato timestamp).

Este objeto, como dijimos, es pasado a la función que definimos como atributo del método getCurrentPosition() y luego sus datos son accedidos y procesados en esta función. Veamos un ejemplo práctico de cómo usar este método:

Código 9-1. Documento HTML para la API Geolocation.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Geolocation</title>
<script src="geolocation.js"></script>
</head>
<body>
<section id="ubicacion">
<button id="obtener">Obtener mi Ubicación</button>
</section>
</body>
</html>

El Código 9-1 será nuestra plantilla HTML para el resto de este capítulo. Es lo más elemental posible, con tan solo un elemento <button> dentro de un elemento <section> que vamos a usar para solicitar y mostrar la información retornada por el sistema de ubicación.

Código 9-2. Obteniendo información sobre la localización del usuario.

function iniciar(){
var boton=document.getElementById('obtener');
boton.addEventListener('click', obtener, false);
}
function obtener(){
navigator.geolocation.getCurrentPosition(mostrar);
}
function mostrar(posicion){
var ubicacion=document.getElementById('ubicacion');
var datos='';
datos+='Latitud: '+posicion.coords.latitude+'<br>';
datos+='Longitud: '+posicion.coords.longitude+'<br>';
datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>';
ubicacion.innerHTML=datos;
}
window.addEventListener('load', iniciar, false);

Una implementación de la API Geolocation es sencilla: declaramos el método getCurrentPosition() y creamos una función que mostrará los valores retornados por el mismo. El método getCurrentPosition() es un método del objeto geolocation.

Este es un nuevo objeto que es parte del objeto navigator, un objeto Javascript que fue anteriormente implementado para retornar información acerca del navegador y el sistema.

Por lo tanto, para acceder al método getCurrentPosition() la sintaxis a usar es navigator.geolocation.getCurrentPosition(función), donde función es una función personalizada que recibirá el objeto Position y procesará la información que contiene.

En el código 9-2, llamamos a esta función mostrar(). Cuando el método getCurrentPosition() es llamado, un nuevo objeto Position es creado con la información de la ubicación actual del usuario y es enviado a la función mostrar().

Referenciamos este objeto dentro de la función con la variable posicion, y luego usamos esta variable para mostrar los datos.

El objeto Position tiene dos importantes atributos: coords y timestamp. En nuestro ejemplo solo usamos coords para acceder a la información que queremos mostrar (latitud, longitud y exactitud). Estos valores son grabados en la variable datos y luego mostrados en la pantalla como el nuevo contenido del elemento ubicacion.

Hágalo usted mismo: Cree archivos con los códigos 9-1 y 9-2, suba los archivos a su servidor y luego abra el documento HTML en su navegador.

Cuando haga clic en el botón, el navegador le preguntará si desea activar o no el sistema de ubicación geográfica. Si le permite a la aplicación acceder a esta información, entonces su ubicación, incluyendo longitud, latitud y exactitud, será mostrada en pantalla.

getCurrentPosition(ubicación, error)

¿Pero qué ocurre si usted no permite al navegador acceder a información acerca de su ubicación? Agregando un segundo atributo al método getCurrentPosition(), con otra función, podremos capturar los errores producidos en el proceso. Uno de esos errores, por supuesto, ocurre cuando el usuario no acepta compartir sus datos.

Junto con el objeto Position, el método getCurrentPosition() retorna el objeto PositionError si un error es detectado. Este objeto es enviado al segundo atributo de getCurrentPosition(), y tiene dos atributos internos, error y message, para proveer el valor y la descripción del error. Los tres posibles errores son representados por las siguientes constantes:

PERMISSION_DENIED (permiso denegado) - valor 1. Este error ocurre cuando el usuario no acepta activar el sistema de ubicación para compartir su información.

POSITION_UNAVAILABLE (ubicación no disponible) - valor 2. Este error ocurre cuando la ubicación del dispositivo no pudo determinarse por ninguno de los sistemas de ubicación disponibles.

TIMEOUT (tiempo excedido) - valor 3. Este error ocurre cuando la ubicación no pudo ser determinada en el período de tiempo máximo declarado en la configuración.

Código 9-3. Mostrando mensajes de error.

function iniciar(){
var boton=document.getElementById('obtener');
boton.addEventListener('click', obtener, false);
}
function obtener(){
navigator.geolocation.getCurrentPosition(mostrar, errores);
}
function mostrar(posicion){
var ubicacion=document.getElementById('ubicacion');
var datos='';
datos+='Latitud: '+posicion.coords.latitude+'<br>';
datos+='Longitud: '+posicion.coords.longitude+'<br>';
datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>';
ubicacion.innerHTML=datos;
}
function errores(error){
alert('Error: '+error.code+' '+error.message);
}
window.addEventListener('load', iniciar, false);

Los mensajes de error son ofrecidos para uso interno. El propósito es ofrecer un mecanismo para que la aplicación reconozca la situación y proceda de acuerdo al error recibido. En el código 9-3, agregamos un segundo atributo al método getCurrentPosition() (otra función) y creamos la función errores() para mostrar la información de los atributos code y message. El valor de code será un número entre 0 y 3 de acuerdo al número de error (listado anteriormente).

El objeto PositionError es enviado a la función errores() y representado en esta función por la variable error. Para propósitos didácticos, usamos un método alert() que muestra los datos recibidos, pero usted debería procesar esta información en silencio, si es posible, sin alertar al usuario de nada. Podemos también controlar por errores de forma individual (error.PERMISSION_DENIED, por ejemplo) y actuar solo si ese error en particular ocurrió.