Geolocalización con HTML 5Martes, 28 dic, 2010 @ 12:42 | Por Gustavo Cantero (The Wolf) | GIS/Geolocalización, Navegadores  |
 |
Muchos de los dispositivos que utilizamos hoy en día tienen GPS incorporado y acceso a internet, por ejemplo, notebooks, Pocket PCs, smartphones (BlackBerry, iPhone, Windows Phone, etc.), tabletas (Tablet PC, iPad, Samsung Galaxy Tab, etc.), y cada vez hay más dispositivos con estas opciones (hasta hay cámaras de fotos con GPS para geotagging e internet para publicarlas en Flickr, Facebook o enviarlas por e-mail).
Una ventaja de estos dispositivos es que podemos utilizarlos para mostrarle al usuario contenido específico de la zona en la que se encuentra, por ejemplo, hoteles cerca de donde está, la forma más rápida de viajar a un punto determinado desde donde se encuentra (se evitaría la necesidad de cargar la dirección en la que está), mostrarle al usuario publicidad de la zona, el estado del tiempo de su ciudad, etc.
Por suerte HTML 5 nos brinda una API de geolocalización en la que el browser nos devuelve las coordenadas de la ubicación del usuario, la altura, velocidad, y otros datos más. Esta API nos abstrae del método de obtención de esta información, ya que el navegador puede obtener esta información utilizando otros medios, por ejemplo, utilizando la IP del usuario, RFID (siglas de Radio Frequency IDentification, o sea, identificación por radiofrecuencia), el MAC address de redes WiFi y Bluetooth, identificadores de antenas GSM/CDMA, etc. En resumen, dependiendo del navegador, del dispositivo y del hardware del que disponga el usuario, vamos a poder obtener la información de su ubicación geográfica de distintas maneras, pero este trabajo (el de fijarse cómo podemos obtenerla) lo realizará el navegador. La especificación de esta API la podemos ver en la siguiente dirección del sitio del World Wide Web Consortium (W3C): Geolocation API Specification.
Los navegadores y dispositivos que actualmente soportan esta API son los siguientes:
- Internet Explorer 9 *
- Firefox 3.5 *
- Opera 10.6
- Google Chrome 5 *
- Safari 5 *
- Android 2 *
- iPhone OS 3.0
- Blackberry 5
- Palm WebOS 2
* Las versiones anteriores soportan geolocalización a través de la API de Gears o utilizando la barra Google.
La API se encuentra en el objeto “navigator” del browser, y posee tres métodos: “getCurrentPosition”, que devuelve la ubicación del dispositivo, “watchPosition”, que llama a una función definida por nosotros cada vez que cambia la posición del dispositivo, y “clearWatch”, que permite dejar de verificar la posición del usuario, o sea, elimina el proceso creado con el método “watchPosition”.
getCurrentPosition
Este método nos devuelve la ubicación del usuario y posee tres parámetros posibles:
void getCurrentPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);
El primero, successCallback, es la función a la cual llamar una vez que se haya obtenido la ubicación, ya que esta tarea se realiza de forma asíncrona. Esta función debe poseer un parámetro, el cual contendrá los siguientes atributos:
interface Position {
//Objeto con las coordenadas
readonly attribute Coordinates coords;
//Fecha y hora de obtención de la posición
readonly attribute DOMTimeStamp timestamp;
};
Y a su vez, el atributo “coords” tiene los siguientes atributos:
interface Coordinates {
//Latitud en coordenadas geográficas
readonly attribute double latitude;
//Longitud en coordenadas geográficas
readonly attribute double longitude;
//Altitud en metros
//Si no se puede calcular este valor este atributo vale null.
readonly attribute double? altitude;
//Precisión de las coordenadas en metros
readonly attribute double accuracy;
//Precisión de la altitud en metros
//Si no se puede calcular este valor este atributo vale null.
readonly attribute double? altitudeAccuracy;
//Dirección en la que se desplaza el usuario en
//grados centígrados donde 0° es el norte
readonly attribute double? heading;
//Velocidad en metros por segundo.
//Si no se puede calcular este valor este atributo vale null.
readonly attribute double? speed;
};
El segundo parámetro, errorCallback, es opcional y es la función a llamar cuando se ha producido un error. Esta función también debe tener un parámetro, el cual contendrá los siguientes atributos:
interface PositionError {
//Código de error, que puede valer:
// 1 = permiso denegado
// 2 = posición no disponible
// 3 = tiempo de espera agotado (timeout)
readonly attribute unsigned short code;
//Mensaje de error
readonly attribute DOMString message;
};
El tercer parámetro, options, también es opcional y nos permite establecer tres opciones: el tiempo máximo de espera en milisegundos para la obtención de las coordenadas, la “edad máxima” de la ubicación en milisegundos (esto es para utilizar las ubicaciones cacheadas para evitar la espera), y por último si se necesita el mejor resultado posible, lo cual puede generar una mayor demora en la obtención del mismo pero el resultado puede ser más exacto.
interface PositionOptions {
//establece si se necesita el mejor resultado posible
attribute boolean enableHighAccuracy;
//Tiempo máximo de espera en milisegundos
attribute long timeout;
//”edad máxima” de la ubicación en milisegundos
attribute long maximumAge;
};
Pero mejor que explicarlo con palabras es mostrar algunas líneas de código, por lo tanto, vamos a ello. A continuación voy a mostrar una función de JavaScript llamada “getLocation”, la cual, si el navegador soporta geolocalización, va a mostrar nuestras coordenadas en un “alert”:
function getLocation() {
//Primero me fijo si el navegador soporta geolocalización
if (navigator.geolocation) {
//Obtiene la posición más exacta que no haya sido tomada
//hace más de 10 minutos (o sea, 600.000 milisegundos)
navigator.geolocation.getCurrentPosition(
showLocation,
showError,
{enableHighAccuracy: true, maximumAge: 600000}
);
} else {
alert('Lo siento, su navegador no soporta geolocalización');
}
}
function showError(error) {
//Muestro el código y mensaje de error
alert(error.code + ' ' + error.message);
}
function showLocation(position) {
//Muestro las coordenadas
alert('Latitud: ' + position.coords.latitude
+ '\nLongitud: ' + position.coords.longitude
+ '\nPrecisión: ' + position.coords.accuracy
+ '\nAltitud: ' + position.coords.altitude
+ '\nPrecisión de la altitud: ' + position.coords.altitudeAccuracy
+ '\nVelocidad: ' + position.coords.speed
+ '\nDirección: ' + position.coords.heading);
}
Para probar el código anterior sólo pulsen en este link: PROBAR GEOLOCALIZACIÓN.
watchPosition
Este método es muy parecido al getCurrentPosition, pero llamará a nuestra función cada vez que cambie la ubicación del dispositivo. Los parámetros son los mismos que los de la otra función, pero nos devolverá un número de proceso para poder identificarlo luego:
long watchPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);
clearWatch
Esta última función elimina un proceso creado con watchPosition, pasándole como parámetro el identificador devuelto por la función anterior:
void clearWatch(in long watchId);
Espero que este artículo les sea de utilidad.
¡Suerte y felices fiestas!
