sábado, 22 de marzo de 2014

Geolocalizador usando HTML5

Sabías que...







Cada vez HTML5 va tomando mas importancia en nuestros nuevos desarrollos WEB, ya que incorpora una serie de mejoras muy interesantesç frente al predecesor HTML4. Esas mejoras nos permiten hacer muchas tareas que antes dependíamos de software de terceros como Flash, JAVA, etc...

Una de las funcionalidades interesantes es la posibilidad de localizarnos geográficamente en cualquier parte del mundo usando varios métodos de localización que son totalmente transparentes para el usuario, cada uno con sus ventajas y desventajas.

Si usamos el navegador de un PC de sobremesa/portátil lo mas normal es que use nuestra dirección IP para dar una aproximación de dónde podemos estar geográficamente. Un método muy rápido pero poco fiable en según qué circunstancias.

Si usamos el navegador en un teléfono móvil se añade la posibilidad de usar las antenas de telefonía y el módulo GPS en caso de estar disponible, el cual nos da una información mucho mas detallada y fiable añadiendo información adicional como la altitud y la velocidad a la que nos desplazamos en ese preciso instante.


He desarrollado un pequeño programa para ver como funciona esta funcionalidad en HTML5, compatible con ordenadores de sobremesa y móviles permitiendo usar el GPS (activando y desactivando la opción):

Demostración


       Usar GPS 

Código


    function localizame() {
     

//Objeto donde se definen la configuración del geocoder:
var options = {
     enableHighAccuracy: document.getElementById("checkGPS").checked,  //Habilita el GPS
     timeout: 60000,  //Tiempo de espera en caso de no recibir ninguna posición.
     maximumAge: 0   //Definir un tiempo de caducidad respecto la ultima posición recibida, si está a 0 siempre obtendremos una posición actualizada, nunca una almacenada en caché.
 };

 function success(pos) {
            //El objeto "pos" contiene toda la información geografica obtenida.
     console.log(pos);
     alert("Tu posicion es: \n"+
           "Latitud: "+pos.coords.latitude+"\n"+
    "Longitud: "+pos.coords.longitude+"\n"+
                  "Altitud: "+pos.coords.altitude+"\n"+
                  "Velocidad: "+pos.coords.speed+"\n");
 };
 function error(err) {
            //En caso de error nos mostrará una alerta con su código asociado.
     alert('ERROR(' + err.code + '): ' + err.message);
 };
 
        //La función es asincrona, hay que definir una función que se ejecutará cuando encuentre una posición, una en caso de error y finalmente los parametros de configuración.
        navigator.geolocation.getCurrentPosition(success, error, options);
    }