html5_logo_320_200En este ejercicio vamos a crear una aplicación de tracking sencilla utilizando la API de geolocalización de HTML5. Vamos a recuperar las coordenadas desde el API y los vamos a mostrar en un mapa.

Sigamos los siguientes pasos:

1 – Abre el archivo Ex7_Geolocation_start 

La página es simplemente un encabezado y un elemento de párrafo en blanco. A este elemento se le ha dado un ID con el nombre “MyLocation ‘.
Dentro del body capturo el evento onLoad.  El controlador de eventos para esto es la función init () que informa de que el evento ha sido lanzado y capturado.

Encabezado Geolocalizacion HTML5

2 – Determinar si el navegador es compatible con la API de geolocalización.

En  init () compruebas la existencia del objeto navigator.geolocation. Si este objeto es nulo, la sentencia if debe devolver false y escribir un mensaje en el párrafo MyLocation diciendo que Geolocalización no es compatible. Pero si el objeto existe, podemos seguir trabajando con la API de geolocalización y lanzándole un mensaje al usuario diciéndole así.

Comprobar compatibilidad navegador HTML5

3 – Crea una variable local que referencie navigator.geolocation.

navigator.geolocation

Lo siguiente es llamar a un método en nuestro objeto navigator.geolocation y tratar de recuperar la ubicación actual del usuario.

Hay dos métodos que puedes utilizar: getCurrentPosition () y watchPosition ().

  • GetCurrentPosition  () es un one-shot: recupera información de la ubicación del usuario una vez y eso es todo. Este es el que usaremos.
  • WatchPosition  () es para el seguimiento del usuario. A este  se le  llama continuamente y devuelve nuevos resultados cada vez que el usuario cambia de posición.

Ambas funciones hacen uso de las devoluciones de llamada o callbacks. Callbacks son sólo nombres de otras funciones que se pasan como parámetros en una llamada a un método.

Es necesario especificar dos funciones de devolución de llamada en la llamada a getCurrentPosition – una para el éxito y otra de fracaso.

Vamos a comprobar el funcionamiento de estas funciones con sólo un cuadro de alerta para que podamos ver si Geolocalización está funcionando correctamente. Verás que  a ambos se le pasa un objeto como parámetro. Estos contienen los resultados – en el caso de recuperación exitosa localización – o detalles de error en caso contrario.

Geolocation_HTML5_4

4 –Sube el  HTML al servidor (Dropbox, por ejemplo) y ejecútalo. Deberías ver lo siguiente. Si no es así, comprueba que el navegador soporta geolocalización

Localización HTML5

Lo primero que deberías ver es una notificación de que mi servidor web (localhost) quiere hacer un seguimiento de mi ubicación física. Si presiono NO, mi gestor de errores me manda un mensaje diciendo que hay un error.

Si presiona Permitir, entonces me sale un mensaje diciendo que ha habido algunos resultados – en otras palabras, el navegador ha conseguido mi posición.

5 – Usa el debugger (Firefox: Firebug, Chrome: F12, Internet Explorer: F12) para inspeccionar el objeto devuelto:

Debugger geolocalización HTML5 html5

Puedes ver que esto es un objeto geoposicionado que contiene varias propiedades de interés, tales como longitud y latitud.

6-Escribe código que muestre la posición (longitud y latitud) en el párrafo “myLocation”.

Geolocation_HTML5_7

7-Escribe código para mostrar la ubicación actual en un mapa utilizando las herramientas de mapas web que elijas. Por ejemplo, si eres es un fan de la API de Google Maps, el código podría ser similar a lo siguiente:

Geolocalizar HTML5 Google Maps

Geolocalizar HTML5 Google Maps

8-Prueba con conexiones wired o wireless y si tienes acceso a uno a un dispositivo GPS.
9-Crea una aplicación de track con watchPosition().

La Sintaxis de watchPosition() es:

watchPosition(successCallback, errorCallback, options);

… donde “options” es un string JSON-formatted con hasta 3 parámetros:

    • enableHighAccuracy – Un booleano (true / false) que indica al dispositivo que se deseas obtener las lecturas más precisas (este parámetro puede o no puede hacer una diferencia, dependiendo de tu hardware)
    • maximumAge – El tiempo máximo (en milisegundos) de la lectura (esto es apropiado ya que el dispositivo puede almacenar en caché las lecturas para ahorrar energía y / o ancho de banda)
    • timeout – El tiempo máximo (en milisegundos) para el que está dispuesto a permitir obtener la posición.

 Geolocation_HTML5_9

10-Para NOTA!!, y si eres capaz de probar el código en un dispositivo móvil, utiliza la propiedad “heading” del objeto Geoposition para mostrar una flecha apuntando en la dirección de la marcha!

La solución completa AQUÍ