Resumen: en este post te mostraré a escuchar el cambio de ubicación de un dispositivo con JavaScript. Por ejemplo, vigilar el cambio de ubicación en un dispositivo móvil cuando el usuario se mueve, camina o conduce.

Vamos a usar JavaScript y la API ofrecida a través de navigator.geolocation. Concretamente veremos la función watchPosition.

Nota: recomiendo primero dar un repaso por mi otro post para ver la introducción al acceso a la ubicación desde JavaScript.

Si quieres ver lo que haremos al final del tutorial, puedes ver esta demostración. También puedes ver el repositorio en GitHub.

Vigilar ubicación de dispositivo con JavaScript

Cuando queremos obtener actualizaciones de la ubicación del dispositivo en JavaScript no llamamos al método getCurrentLocation, mejor invocamos a watchPosition para suscribirnos a un evento y recibir actualizaciones periódicas.

El método watchPosition devuelve un id para que más tarde se pueda detener usando el método clearWatch (así como setInterval y clearInterval)

Cabe mencionar que este método para vigilar la ubicación toma los mismos argumentos que el de getCurrentLocation:

Los dos primeros son callbacks, el primero en caso de éxito, el segundo en caso de error. El último argumento define las opciones de la suscripción a las actualizaciones de ubicación.

De nuevo lo digo, si no entiendes mucho esto, lee primero mi otro post.

Nota: el método onUbicacionConcedida será llamado cada que haya actualizaciones de ubicación.

watchPosition para vigilar la ubicación con JavaScript

Ahora sí veamos un ejemplo de código.

Al inicio comprobamos que el navegador soporte la API de geolocation.

Después definimos una variable en donde vamos a guardar el id que regrese watchPosition, además de otras funciones como la que detiene el watcher y la que lo inicia.

La función onUbicacionConcedida será llamada múltiples veces, cada que la ubicación se actualice.

Si queremos detener el watcher invocamos a clearWatch. En ese mismo método convertimos a idWatcher en null.

Ejemplo de actualizaciones de ubicación

Voy a mostrarte un ejemplo que al final se verá como en la imagen del inicio. Definimos un layout básico de Bootstrap 4:

Fíjate en los botones, pues uno inicia las actualizaciones de ubicación y otro las detiene.

También tenemos unos span que muestran la última latitud y longitud obtenida, además de una etiqueta pre para loguear.

Todo eso lo obtenemos con JavaScript, agregamos listeners de los click de los botones e interactuamos con la ubicación del usuario:

Como ves, es el mismo código de hace un momento pero ahora hemos agregado interacción con el DOM.

Al final tendremos una web que se ve así:

De esta manera podemos ver el camino que un usuario recorre, saber si un dispositivo llegó a determinado lugar, etcétera.

Como puedes ver, a la izquierda está el timestamp indicando cuándo fue obtenida la ubicación.

Conclusión

Recuerda, esta es la parte 2 de alguna forma. Si quieres ver lo básico, mira este post.

El código lo puedes ver en GitHub y la demostración la puedes ver aquí.