En el artículo de hoy te mostraré cómo mostrar la ubicación del usuario en un mapa en tiempo real e ir actualizando el marcador del mapa conforme el usuario se mueva.

Esto puede servir para varias cosas. La más simple es mostrarle al usuario su ubicación en el mapa, pero puede enfocarse a algo tan complejo como hacer algo como Uber (enviando la ubicación a un servidor y todo eso).

Por cierto, vamos a usar JavaScript y OpenLayers (alternativa a Google Maps): tecnologías gratuitas y open source que no nos obligan a aceptar licencias ni pagar.

Obviamente esto se puede usar en dispositivos móviles Android o iOS mientras tengan un navegador web decente. Y más tarde podemos convertir la app web en una PWA para que sea algo así como una app nativa (como hice con la app de transportes).

Pero bueno, vamos a lo interesante: cómo obtener la ubicación del usuario y mostrarla en el mapa mientras se mueve.

Puedes acceder a la demostración justo ahora desde este enlace. Te debería mostrar tu ubicación actual con el símbolo de un auto.

Explicación

Como mencioné en la introducción vamos a usar JavaScript para obtener la ubicación del usuario y suscribirnos a las actualizaciones de la misma. Recuerda que ya hice un post sobre ello en donde expliqué que solo se puede usar en localhost o en dominios con https.

Por otro lado vamos a usar OpenLayers, una alternativa gratuita a Google Maps. Funciona incluso en el lugar recóndito en donde vivo.

El algoritmo es simple:

Nos suscribimos a las actualizaciones de ubicación, y en cada actualización comprobamos si ya hemos creado el mapa. Si ya lo hemos creado entonces actualizamos el marcador y centramos el mapa, en caso de que no, creamos el mapa.

Ya hice un post sobre OpenLayers, te invito a leerlo.

Plantilla HTML

Comencemos viendo el HTML de la página. Tenemos el título y el div en donde vamos a montar el mapa. También estoy importando el archivo CSS y JS de OpenLayers.

Lo importante es el div con el id mapa. Por cierto, en estas últimas versiones de OpenLayers necesitamos que el div tenga un alto definido por nosotros.

Por cierto, también tengo el párrafo con id estado, en él mostraremos las últimas coordenadas obtenidas y la fecha y hora en la que fueron obtenidas.

Obteniendo ubicación

Primero veamos la solicitud de ubicación en donde indicamos cada cuánto deberíamos recibir actualizaciones, la precisión, etcétera.

Después definimos dos funciones. Una en donde vamos a recibir las actualizaciones de ubicación (que será cuando el usuario se mueva) y otra en caso de error.

Y finalmente lo solicitamos indicando los callbacks:

Por cierto, el idWatcher es importante en caso de que después quieras cancelar la solicitud de obtener la ubicación con JS. Ya lo expliqué con mayor detalle en el post que cité anteriormente.

Dibujando ubicación en mapa

Ahora veamos el cuerpo de la función onActualizacionDeUbicación que será invocada cada que la ubicación del usuario cambie.

Si es la primera vez que se invoca, vamos a dibujar el mapa. Agregamos una capa y a esa capa le agregamos el marcador que será una imagen.

Y en caso de que no, simplemente centramos el mapa y actualizamos el marcador.

De ese modo cada que la ubicación del usuario cambie, el mapa se centrará en el usuario y el marcador se va a cambiar de lugar.

Por cierto, también estoy usando un formateador de fecha para mostrar la última vez que se accedió a la ubicación del usuario.

Ese timestamp está en ubicacion.timestamp. También recuerda que la longitud y latitud están en ubicacion.longitude y ubicacion.latitude respectivamente.

Poniendo todo junto

Ahora colocamos todo eso dentro de una función init en donde verificamos de igual manera si el navegador del usuario soporta esa característica. El código completo queda así:

La demostración te la dejo por aquí, y el código fuente en mi GitHub. Si te gusta JavaScript te invito a leer más en mi blog.