Con el surgimiento de los dispositivos móviles inteligentes existen multitud de aplicaciones web que emplean la localización del usuario para ofrecer contenido acorde a la zona como lo es Twitter, Facebook y varios servicios de Google.
La API de geolocalización en JavaScript
Con la geolocalización podemos conocer la ubicación geográfica del usuario, siempre y cuando el navegador del usuario tenga implementada esta API y el usuario nos da el permiso de acceder a su ubicación.
¿Como utilizamos el objeto geolocation?
La API de geolocalización la podemos acceder a través del objeto navigator de la siguiente forma:
navigator.geolocationDebemos de tener dos consideraciones antes de trabajar con esta API:
1
Comprobar si el navegador del usuario tiene implementada esta API; y esto es para evitar errores de ejecución del script; lo comprobaremos de la siguiente forma:
if(navigator.geolocation){
/* la geolocalizacion esta disponible */
}else{
/* la geolocalizacion no esta disponible */
}o un equivalente del mismo sería:
if ("geolocation" in navigator)
/* la geolocalizacion esta disponible */
}else{
/* la geolocalizacion no esta disponible */
}El usuario puede denegar o permitir el acceso a su ubicación; por lo tanto es recomendable que esta funcionalidad no tenga que ser obligatoria para que el usuario utilice la aplicación, sólo para mejorar la experiencia del mismo.
1 + 2
Para ambos casos debemos de realizar las validaciones necesarias para evitar problemas en la ejecución; para validar el segundo caso (denegación de la solicitud por parte del usuario) la veremos más adelante.
¿Cómo obtener la ubicación del usuario con el objeto navigation de JavaScript?
Podemos acceder a la ubicación del usuario si y sólo si el usuario nos permitió el acceso a su ubicación y el navegador soporta dicha característica empleando el método getCurrentPosition().
Con el método getCurrentPosition() podemos recuperar la ubicación geográfica actual del usuario; la localización es expresada en coordenadas geográficas retornada en un objeto Position.
Sintaxis del método getCurrentPosition() de JavaScript
getCurrentPosition(MostrarLocalizacion, ManejadorErrores, opciones);Parametros del metodo getCurrentPosition() de JavaScript
- MostrarLocalizacion : El método que recibirá la información de la localización del usuario; y esto mediante un objeto Position.
- ManejadorErrores : (opcional) El método que recibirá el objeto PositionError si ocurre un error en la localización del usuario.
El objeto PositionError puede retornar:
- PositionError.PERMISSION_DENIED: El usuario no permitió la localización.
- PositionError.POSITION_UNAVAILABLE: No es posible obtener la posición del usuario.
- PositionError.TIMEOUT: La operación se le acabó el tiempo y no puede continuar.
- opciones :(opcional) Especifica un conjunto de opciones para recuperar la data:
- frequency: Con que frecuencia recuperaremos la posición del usuario dado en milisegundos (por defecto 10000).
- enableHighAccuracy: Es un booleano que indica que la aplicación intentará ofrecer la estimación de localización más precisa posible.
Por defecto es falso (false); hay que tener en cuenta que si activamos este modo (true) puede incrementar el tiempo de respuesta.
- timeout: El tiempo que dejaras pasar en milisegundos para que el método geolocation.getCurrentPosition o geolocation.watchPosition nos dé una respuesta; dicho tiempo es dado en milisegundos.
- maximumAge: Especifica el tiempo transcurrido en milisegundos para la información de ubicación almacenada en caché.
Ejemplo 1: Geolocalización básica
Para obtener la posición del usuario mediante el método getCurrentPosition() de JavaScript podemos hacer lo siguiente:
Como podemos apreciar primero verificamos si el API de geolocalización está disponible para luego solicitar la ubicación del usuario con el método getCurrentPosition(); pasándole como parámetro la función que recibirá el objeto Position llamada MostrarLocalizacion.
Ejemplo 2: Geolocalización básica y manejo de errores
Ahora veremos un ejemplo un poco más elaborado; en donde tipificamos los errores que puedan ocurrir, veamos:
Conclusión
Con este artículo podemos ver una de las muchas funcionalidades que nos brinda HTML5 para el desarrollo de aplicaciones web para proveer mejores experiencias para el usuario final.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter