API de Geolocalización
Opciones de geolocalización

<< IndexedDB Gestión de mapas >>

El API de Geolocalización permite usar JavaScript para consultar las coordenadas del geolocalización del usuario (mucho más preciso cuando está presente un sistema GPS → ej: teléfono móvil). Es una funcionalidad muy importante en la actualidad, ya que te permite posicionarte en el mapa, encontrar usuarios que estén cerca, medir distancias, etc. Lo ideal es combinarla con una API de mapas como Google Maps, Mapbox, ArcGIS Maps, o similares.

La localización consiste en dos componentes de coordenadas: latitud, que es la distancia hacia el norte (positiva) o sur (negativa). Y longitud, que es la distancia hacia el este (positiva) o al oeste (negativa) a partir del Meridiano de Greenwich.

Usamos navigator.geolocation.getCurrentPosition para geolocalizarnos. Este método es asíncrono (se ejecuta en segundo plano), por tanto no nos devuelve nada de forma inmediata. Le pasaremos una función que será ejecutada cuando el navegador encuentre finalmente la localización. Esta función recibirá un parámetro que contendrá la información de dicha localización.

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de cómo obtener la geolocalización</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js" type="module"></script>
  </head>
  <body>
    <div>
        <p id="coordenadas">Obteniendo información de la localización...</p>
    </div>
  </body>
</html>

No olvides darle permisos al navegador para obtener tu localización.

Para gestionar errores, podemos pasarle una segunda función al método de geolocalización. Esta función será llamada en lugar de la primera si se ha producido un error, y recibirá por parámetro un objeto con una propiedad llamada code que contiene el tipo de error producido.

Además, es buena idea utilizar promesas para gestionar esta aplicación asíncrona y de esta forma poder gestionar fuera de la función que le pasamos el resultado de la geolocalización.

function getLocation() {
    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
            pos => {
                resolve(pos.coords);
            },
            error => {
                switch (error.code) {
                case error.PERMISSION_DENIED: // User didn't allow the web page to retrieve location
                    reject("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE: // Couldn't get the location
                    reject("Location information is unavailable.");
                    break;
                case error.TIMEOUT: // The maximum amount of time to get location information has passed
                    reject("The request to get user location timed out.");
                    break;
                default:
                    reject("An unknown error occurred.");
                    break;
                }
            }
        );
    });
}

async function showMap() {
      let coords = await getLocation();
      // Mostrar el mapa con el marcador, etc.
}

Estas son las propiedades de localización que podemos obtener (algunas de estas sólo estarán disponible cuando usemos un GPS, como por ejemplo, en un móvil.):

  • coords.latitude → Latitud, número decimal.
  • coords.longitude → Longitud, un número decimal.
  • coords.accuracy → La precisión, en metros.
  • coords.altitude → Altitud, en metros sobre el nivel del mar (si está disponible).
  • coords.altitudeAccuracy → La precisión de la altitud (si está disponible).
  • coords.heading → La orientación en grados(si está disponible).
  • coords.speed → La velocidad en metros/segundos (si está disponible)
  • timestamp → El tiempo de respuesta, UNIX timestamp (si está disponible).

Opciones de geolocalización

Hay un tercer parámetro que podemos pasarle al método getCurrentPosition. Este parámetro es un objeto JSON que contiene una o más de estas propiedades:

  • enableHighAccuracy → Un booleano que indica si el dispositivo debería usar todo lo posible para obtener la posición con mayor precisión (por defecto false). Esta opción consume más batería y tiempo.
  • timeout → Tiempo en milisegundos a esperar para obtener la posición o lanzará un error. Por defecto es 0 (espera indefinidamente).
  • maximumAge → Tiempo en milisegundos que guarda la última posición el navegador en caché. Si se solicita una nueva posición antes de expirar el tiempo, el navegador devuelve directamente el dato almacenado en caché.
navigator.geolocation.getCurrentPosition(
    positionFunction,
    errorFunction,
    {
        enableHighAccuracy: true,
        timeout: 6000, // 6 segundos para timeout
        maximumAge: 30000 // 30 segundos de caché
    }
);

<< IndexedDB Gestión de mapas >>