API de Geolocalización

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 → 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.

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.

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é.

API de Bing Maps

La gran mayoría de APIs de mapas más avanzadas tienen como requisito introducir información de pago para poder registrarnos y usar la API, aunque sea de forma gratuita. Para evitar sorpresas, vamos a utilizar una API que no lo requiere (por ahora) como Bing Maps. Al final, los conceptos son similares en todas, por lo que aprender a usar otras una vez conozcamos esta, debería ser sencillo.

Obtener clave de API

Para activar la API de Bing Maps y obtener una clave, necesitamos acceder al centro de desarrollo de Bing Maps la Bing Maps Dev Center e indicar que queremos crear una nueva cuenta asociada a nuestra cuenta de Outlook u Office365 con la que nos hemos logueado.

Una vez hecho esto, vamos a la sección My account → My keys y creamos un nuevo proyecto para web:

Mapas estáticos

Para mostrar un mapa estático, o lo que es lo mismo, generar una imagen con el mapa, debemos crear una URL con una serie de parámetros indicando por lo menos las coordenadas del centro del mapa en formato latitud,longitud, el zoom (justo a continuación de las coordenadas, 15 en el ejemplo siguiente), tamaño (mapSize) y opcionalmente uno o varios marcadores (pp). Sin olvidarnos de la clave de la API (key).

API de JavaScript

La librería de JavaScript de Bing, tal como está documentada, se carga de forma síncrona con el HTML. Esto implica bloquear la carga del resto del HTML mientras se descarga y procesa la librería. Para optimizar tiempos, vamos a cargarla directamente en nuestro código JavaScript, haciendo que llame a la función showMap una vez se haya descargado.

Al constructor de la clase Map podemos pasarle opciones como por ejemplo coordenadas, zoom, tipo de mapa, etc. Los tipos de mapa están definidos en MapTypeId.

Añadiendo marcadores

Al mapa se le pueden añadir marcadores (Pushpins en Bing), formas geométricas, etc. A continuación vamos a añadir un marcador básico con un título asociado y colocarlo en el centro del mapa cuando este se carga.

Eventos de mapa

Se pueden añadir manejadores de eventos tanto al mapa, como a los marcadores que se le añadan. En este ejemplo veremos como añadir un evento de click al mapa, que te centrará el mapa en dicha posición, añadiendo un nuevo marcador al mismo.

Activar sugerencias automáticas

Además de la API básica de mapas, se pueden activar varios módulos como Directions para navegación, Search para buscar el sitio más cercano a unas coordenadas, Spatial Math para cálculos espaciales como distancias, intersecciones, etc. En este apartado vamos a ver como funciona el módulo AutoSuggest que convierte un input en un campo de búsqueda de direcciones y te ofrece sugerencias, devolviendo información sobre el sitio elegido.