Conociendo la API de Geolocalización en HTML5

Hace un tiempo vengo conociendo y trabajando HTML5, y me causa mucha curiosidad que asocien elementos que no propiamente hacen parte de su especificación oficial, ¿será una estrategia de marketing para impulsar HTML5 ?, ¿será  que los drafts no están bien especificados?, en fin ya hice esta investigación y muy pronto estaré publicando algo al respecto, continuando con el tema que nos compete en este post, una de sus API’s que tiene un futuro prometedor y muy funcional es la de Geolocalización. Básicamente esta API define como un navegador web puede determinar la ubicación geográfica de un usuario, esta ubicación de coordenadas se da en  Latitud y Longitud, que pueden ser más o menos precisa,  de esto hablaremos más adelante.

Entremos en materia, Los métodos JavaScript que utiliza para la ubicación de un usuario los hace a través del Geolocation object contenido en window.navigator.geolocation. La API define tres métodos:

• getCurrentPosition(): Recupera la posición actual y se ejecuta una sola vez.
• watchPosition(): Recupera y actualiza la posición actual a medida que cambia de posición.
• clearWatch(): Detiene la actualización de una vista (Watch) de posición.

Vamos al código con un ejemplo de lo poderoso de esta API:

function obtainGeolocation(){
 //obtener la posición actual y llamar a la función  "localitation" cuando tiene éxito
 window.navigator.geolocation.getCurrentPosition(localitation);
 }
 function localitation(geo){

// En consola nos devuelve el Geoposition object con los datos nuestros
 console.log(geo);
 }
 //llamando la funcion inicial para ver trabajar la API
 obtainGeolocation();

Algo así deben obtener, yo utilice jsfiddle para realizar esta prueba, si amplían la imagen pueden ver mejor los datos de los cuales voy a hablar en caso tal de que no puedan ejecutar las funciones.

Lo que hace esta pequeña porción de código es intentar obtener la posible ubicación y después llama la función localitation().  La consulta de ubicación se realiza de forma asincrónica para que otros procesos puedan seguir funcionando en la página, esto es para tener en cuenta para cuando se realice un despliegue de aplicaciones. Se ven una cantidad de datos interesantes pues el Geolocation object contiene una propiedad timestamp y otra llamada coordinates. 

Hablando un poco de algunas propiedades interesantes que arroja el objeto coordinates; puede contener valores nulos, lo que significa que no debemos asustarnos ya que esto funciona según las capacidades del hardware donde lo visualiza:

• latitude (latitud): La posición norte-sur sobre la tierra.
• longitude (Longitud): La posición de occidente a oriente sobre la tierra
• altitude (altitud): La altura de la posición, solo si el dispositivo de visualización tiene la capacidad de medir la altitud.
• accuracy (exactitud): Precisión de las alturas, exactitud, que es medida en metros.
• heading: Dirección y recorrido, medida en grados alrededor de un círculo.
• speed (velocidad): La velocidad de desplazamiento en una partida determinada en metros por segundo.

El pequeño trozo de código anteriormente descrito arroja mucha información.

¿De Donde Proviene la información de Ubicación?

Lo bueno de esta API es que no especifica un dispositivo como tal para usarla; Simplemente trae la información de ubicación con un nivel de exactitud medianamente confiable,  no hay garantía de que la información devuelta sea precisa. Al momento de utilizar la API en un dispositivo puede utilizar diferentes fuentes para lograr obtener la aproximación de su ubicación y estas pueden ser:

• Dirección IP
• Triangulación de Coordenadas por:
• Sistema de Posicionamiento Global ó el popular GPS.
• Wi-Fi a través de la dirección MAC de los dispositivos RFID, Wi-Fi, y Bluetooth.
• GSM o CDMA de los teléfonos o dispositivos móviles.

En algunos dispositivos depende de las tecnologías que tenga presentes puede utilizar una o varias de ellas según sean las características. Hasta el momento con esta información ya puede darse cuenta de todo lo que puede hacer con esta API, vamos a ver más ejemplos interesantes.

Trabajando con más opciones de la API

Ejemplo 1: Muchas veces es necesario saber si una API es o no compatible con la versión de un navegador, el siguiente ejemplo le dará una idea de cómo hacerlo con los clientes:

 function navigatorSupport(){
 if(navigator.geolocation){
 document.getElementById("supportNav").innerHTML = "HTML5 API - Geolocation: Es soportado.";
 }else{
 document.getElementById("supportNav").innerHTML = "HTML5 API - Geolocation: No es soportado, vamos no se resista más al cambio y la evolución.";
 }
 }
 ​​​​​​​​​​​​​​​​​​​​​​​​​​​

​​​​​​​​​​​​​​​​​​​​​​Parte HTML

<div id="support"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​

​​​​​​​​​​​​​​​​​​​​​​​​​​​
Ejemplo 2: Actualización de la función localitation() para mostrar los datos de localización:

function obtainGeolocation(){
 //obtener la posición actual y llamar a la función  "localitation" cuando tiene éxito
 window.navigator.geolocation.getCurrentPosition(localitation);
 }
 function localitation(geo){
 // En consola nos devuelve el Geoposition object con los datos nuestros
 var latitude = geo.coords.latitude;
 var longitude = geo.coords.longitude;
 document.body.innerHTML =" Latitud:" +latitude+" ------ Longitud:" +longitude+""
 }
 //llamando la funcion inicial para ver trabajar la API
 obtainGeolocation();

Conclusiones

Con estos ejemplos puedes darte cuenta de lo importante y necesaria que puede ser esta API, los invitamos a que la revisen a fondo ya que tiene muchas opciones de por medio para explotar.

Lo mejor es que no está asociado a una marca y dispositivo específico, y como todo, tiene sus limitaciones pero puede llegar a ser más funcional que algo que se quede en el olvido. Quisiera leer sus comentarios para mí son importantes, para realizar retrospectiva sobre lo que publico y sobre los temas a tratar en futuros Post.