Geolocalización en HTML5

Entre las novedades que trae HTML5 hay una API para geolocalización. Para tomar tu posición utiliza la IP del dispositivo desde que cargamos la web. La posición que resulta es aproximada y puede variar muchos metros dependiendo desde donde accedemos y como ajustemos los parametros. Aún así, según el proyecto en el que trabajemos, puede resultar muy útil conocer la zona desde que visitan nuestra web.

Existen dos metodos para recoger las coordenadas de la ubicación del visitante. Uno que sirve para tomar la posición en un momento dado, y otro que va repitiendo la petición, perfecto para el seguimiento de recorridos.


En la mayoría de los casos solo necesitaremos saber desde donde accede el usuario a nuestro sitio. Con una sola petición nos bastará. Para ello está la función getCurrentPosition que W3C especifica así:


void getCurrentPosition(in PositionCallback successCallback,
                           in optional PositionErrorCallback errorCallback,
                           in optional PositionOptions options);

La función está disponible para el objeto navigator.geolocation

Toma tres parámetros de entrada pero solo el primero es obligatorio. Y es que en caso de que la petición de la ubicación se efectue correctamente se llamará a la función que pasemos como primer parametro tomando un objeto con la posición. Este objeto nos define la posición como dos números (latitud y longitud) en decimal, perfectos para trabajar con la API de Google Maps. No es casualidad.


interface Position {
    readonly attribute Coordinates coords;
    readonly attribute DOMTimeStamp timestamp;
};

interface Coordinates {
    readonly attribute double latitude;
    readonly attribute double longitude;
    readonly attribute double? altitude;
    readonly attribute double accuracy;
    readonly attribute double? altitudeAccuracy;
    readonly attribute double? heading;
    readonly attribute double? speed;
};

La primera vez que vayamos a tomar la ubicación, el navegador lanzará una advertencia al usuario. Le informará de nuestra petición que podrá aceptar o rechazar.
Puede ocurrir que el usuario no permita tomar su posición o que se de algún otro tipo de error. El segundo parámetro de getCurrentPosition es una función que recoge el error en un objeto PositionError. Así podremos manejar a nuestro gusto los posibles casos.


  interface PositionError {
    const unsigned short PERMISSION_DENIED = 1;
    const unsigned short POSITION_UNAVAILABLE = 2;
    const unsigned short TIMEOUT = 3;
    readonly attribute unsigned short code;
    readonly attribute DOMString message;
  };

El tercer parámetro es un objeto PositionOptions con el que se puede ajustar la forma en que tomamos los datos. Es opcional.


  interface PositionOptions {
    attribute boolean enableHighAccuracy;
    attribute long timeout;
    attribute long maximumAge;
  };

Aquí dejo un ejemplo muy básico del funcionamiento de getCurrentPosition. Lo que hace es, primero solicitarnos nuestra ubicación y con la posición (latitud, longitud) generar una url para que la API de Google Maps devuelva una imagen estática. Ver demo





Estoy aquí

El otro metodo que mencioné se llama watchPosition. No lo voy a comentar en este artículo. Pero es muy similar al que acabamos de ver. Puede ser útil para crear mapas con recorridos, hacer mediciones sobre distancias, etc. Aún así no lo veo muy práctico por que la ubicación puede no ser muy exacta y puede que queramos tomar la posición de un punto de nuestro recorrido en el que no tengamos conexión a internet.

Este artículo sirve para saber lo básico pero no profundiza mucho. Así que dejo un par de links por si alguien lee esto y quiere saber más

Especificaciones W3C
Mobiletuts+ (muy trabajado, recomendado)