Una de las principales novedades de HTML5 fue la aparición de nuevas APIs de Javascript que aumentan la potencia de este lenguaje.
Una de ellas es la nueva API de geolocalización, que nos permite conocer la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que la tenga implementada y que el usuario dé su permiso.
Aunque la primera impresión sea que sólo será útil para usuarios de navegadores móviles, la realidad es que éste utiliza otros medios además del GPS para calcular la ubicación del usuario, como por ejemplo a través de su dirección IP.
NAVEGADORES QUE SOPORTAN EL API DE GEOLOCALIZACIÓN
Antes de nada debemos saber qué navegadores soportan esta funcionalidad. En la siguiente tabla podemos verlo:
| Navegador | Versión |
|---|---|
| Opera | 10.6+ |
| Internet Explorer | 9+ |
| Safari | 5+ |
| Chrome | 5+ |
| Firefox | 3.5+ |
| iPhone | 3+ |
| Android | 2+ |
Antes de empezar a usar el API de geolocalización tendremos que comprobar que el navegador la soporta:
if (navigator.geolocation)
{
// Código de la aplicación
}
else
{
// No hay soporte para la geolocalización: podemos desistir o utilizar algún método
alternativo
LA FUNCIÓN NAVIGATOR.GEOLOCATION.GETCURRENTPOSITION
La ubicación del usuario se obtiene a través de la siguiente función:
navigator.geolocation.getCurrentPosition(funcExito, funcError, opciones);Esta función tiene tres parámetros (los dos últimos opcionales):
- funcExito: función de retorno que se ejecutará si se obtiene la posición. Se le pasará como parámetro un objeto
Position. - funcError: función de retorno que se ejecutará si no se obtiene la posición. Se le pasará como parámetro un objeto
PositionError. - opciones: un objeto
PositionOptionscon parámetros para la obtención de la localización.
La función intentará obtener la posición del usuario. Si lo consigue llamará a la función que le pasemos como primer parámetro pasándole un objeto Position con esos datos. Si, por el contrario, no lo consigue, llamará a la función que le pasemos como segundo parámetro pasándole un objeto PositionError que indicará la razón por la que no lo ha conseguido.
EL OBJETO POSITION
Es el objeto que nos indicará la ubicación del usuario si el navegador puede determinarla. Este objeto consta de los siguientes atributos:
| Atributo | Tipo de dato | Descripción |
|---|---|---|
| coords.latitude | double | Latitud en grados decimales |
| coords.longitude | double | Longitud en grados decimales |
| coords.accuracy | double | Precisión en metros |
| timestamp | DOMTimeStamp | Momento de la toma de estos datos |
| coords.altitude | double o null | Altitud en metros |
| coords.altitudeAccuracy | double o null | Precisión de la altitud en metros |
| coords.heading | double o null | Orientación en grados decimales en el sentido de las agujas del reloj |
| coords.speed | double o null | Velocidad en metros/segundo |
De todos los atributos sólo coords.latitude, coords.longitude y coords.accuracy es seguro que tendrán valor. Los otros dependen de las aptitudes del dispositivo que esté usando el usuario.
EL OBJETO POSITIONERROR
Es el objeto que nos indicará la causa por la que no se ha podido determinar la ubicación del usuario. Este objeto consta de dos atributos: code y message. De estos el que nos interesa es code que será el que nos indique el error de forma más eficiente (message hace lo mismo pero con una cadena explicativa del error).
Los posibles valores del atributo code son:
| Valor | Valor numérico | Descripción |
|---|---|---|
| PERMISSION_DENIED | 1 | El usuario ha denegado el acceso a la obtención de su ubicación |
| POSITION_UNAVAILABLE | 2 | No se ha podido obtener la ubicación del usuario por alguna razón |
| TIMEOUT | 3 | Se ha agotado el tiempo de espera para obtener la ubicación |
EL OBJETO POSITIONOPTIONS
Es el objeto que nos permitirá poner algunas condiciones a la obtención de la ubicación del usuario. Este objeto consta de los siguientes atributos:
| Atributo | Tipo de dato | Valor por defecto | Descripción |
|---|---|---|---|
| enableHighAccuracy | boolean | false | Si el dispositivo y el usuario lo permiten el navegador intentará obtener la ubicación del usuario con una mayor precisión. Esto suele suponer un mayor coste de recursos. |
| timeout | long | No tiene | Tiempo de espera máximo para obtener la posición en milisegundos. Este tiempo empieza a contar desde que el usuario da su permiso, no antes. |
| maximumAge | long | 0 | Antigüedad máxima en milisegundos. Con el valor por defecto (0), cada vez que se pide la posición se vuelve a calcular. Si ponemos algún valor mayor que cero, se busca en la caché y si hay una posición tomada anteriormente no más antigua que el valor dado, se devuelve inmediatamente, ahorrando muchos recursos. Con el valor Infinity siempre se devolverá un valor de la caché. |
Hay que tener en cuenta que algunos dispositivos tienen distintos métodos para obtener la posición si enableHighAccuracy está activado y si está desactivado, con lo es posible que una llamada a getCurrentPosition con esta opción activada dé error mientras que puede tener exito con ella desactivada.
OBTENER LA POSICIÓN DEL USUARIO
Veamos ahora el código para obtener la posición del usuario con: comprobación de si el navegador soporta geolocalización, recogida de los datos de latitud y longitud, control de errores y pasándole las opciones de tiempo máximo de espera y antigüedad.
Y en el siguiente cuadro podemos ver el resultado de este script aplicado en esta página:
OBTENER LA POSICIÓN DEL USUARIO CADA VEZ QUE ÉSTA CAMBIE
Si en lugar de querer obtener la ubicación del usuario puntualmente queremos recibir información actualizada cada vez que esta cambie, en lugar de usar la función navigator.geolocation.getCurrentPosition, usaremos navigator.geolocation.watchPosition. Los parámetros a pasar a esta función son exactamente los mismos que para la anterior, con la salvedad de que si bien la anterior no devuelve ningún valor, esta devolverá un identificador con el que podemos parar las actualizaciones de ubicación. Podemos, por ejemplo, hacer que el usuario pare manualmente las actualizaciones desde un botón. Se haría de la siguiente forma:
var watch_id = navigator.geolocation.watchPosition(function(objPosition)
{
// Procesar posición
}, function(objPositionError)
{
// Procesar errores
}, {
maximumAge: 75000,
timeout: 15000
});
document.getElementById("stop-button").onclick = function()
{
navigator.geolocation.clearWatch(watch_id);
};Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
