Geolocalización con Ionic

Seguramente tengamos muchísimas aplicaciones en nuestros dispositivos que utilicen la geolocalización para algunas de sus funciones, como por ejemplo TripAdvisor, que nos indica a cuanta distancia nos encontramos de cualquier establecimiento registrado en su aplicación… Whatssap con su opción para enviar nuestra ubicación actual a cualquier contacto, etc.

En este artículo vamos a aprender a utilizar la geolocalización en nuestras aplicaciones ionic, y como hace TripAdvisor, calcularemos la distancia de nuestra posición con otras coordenadas.

Instalar geolocalización en Ionic

Para comenzar a trabajar con la geolocalización en Ionic, vamos a instalar cordova y el plugin nativo que necesitamos:

ionic cordova plugin add cordova-plugin-geolocation
npm install --save @ionic-native/geolocation

Una vez instalado nuestro plugin, vamos a importarlo en nuestro archivo app.module.ts

...
import { Geolocation } from '@ionic-native/geolocation';
...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    Geolocation,
    ...
  ]
})
export class AppModule {}

Y en el archivo typescript de la página dónde queramos implementar la geolocalización, en mi caso, home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public geolocation:Geolocation) {

  }

}

De esta forma, ya podríamos comenzar a trabajar con la geolocalización en nuestro proyecto Ionic.

Configurar geolocalización en Ionic

Ahora que tenemos todo listo, vamos a crear tres variables, vamos a inicializar un objeto de Geolocalitation en nuestro constructor y una función en nuestro home.ts (en mi caso) que llamaremos getGeolocation(), que utilizaremos para obtener la latitud y longitud de nuestra posición:

export class HomePage {
  lat:number
  lon:number
  total:string

  constructor(public navCtrl: NavController, public geolocation:Geolocation) {
    this.getGeolocation()
  }

  getGeolocation(){
    this.geolocation.getCurrentPosition().then((geoposition: Geoposition)=>{
      this.lat = geoposition.coords.latitude;
      this.lon = geoposition.coords.longitude;
    });
  }

Una vez creada nuestra función, como vemos en el fragmento de código, la llamamos en nuestro constructor para que se ejecute cuando se cargue en nuestra aplicación home.html

Ahora, en nuestro home.html, vamos a mostrar las variables lat y lon, que guardan la latitud y longitud de nuestra posición:

<ion-header>
  <ion-navbar>
    <ion-title>
      Geolocalización
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Latitud: {{lat}}</p>
  <p>Longitud: {{lon}}</p>
</ion-content>

Y el resultado sería el siguiente:

Obtener la distancia entre dos coordenadas en Ionic

Ahora que ya tenemos nuestras coordenas, vamos a simular el funcionamiento que tiene TripAdvisor a la hora de darnos la distancia entre nosotros y un establecimiento.

En este caso, supongamos que quiero saber la distancia que hay entre mi posición y algún local que se encuentre en Madrid.

Las coordenas de Madrid son:

• Latitud: 40.4167
• Longitud: -3.70325

Función para calcular la distancia

Volvemos a nuestro archivo home.ts y crearemos una función que recibirá 4 parametros, las latitud y longitud de los dos sitios a comparar, nos retornará su distancia en KM o Millas

calculateDistance(lon1, lon2, lat1, lat2){
    let p = 0.017453292519943295;
    let c = Math.cos;
    let a = 0.5 - c((lat1-lat2) * p) / 2 + c(lat2 * p) *c((lat1) * p) * (1 - c(((lon1- lon2) * p))) / 2;
    let dis = (12742 * Math.asin(Math.sqrt(a)));
    return Math.trunc(dis);
}

De esta forma, obtendremos la distancia en KM, si queremos la distancia en millas, solo debemos multiplicar el resultado por 0.621371.

Modificando nuestra función de geolocalización

Ahora vamos a hacer una pequeña modificación en nuestra función getGeolocation(), añadiendo las coordenadas de Madrid y pasándole por parametros las coordenadas a la función que hemos creado anteriormente. El valor que nos retorne se lo daremos a la variable total:

getGeolocation(){
    this.geolocation.getCurrentPosition().then((geoposition: Geoposition)=>{
      this.lat = geoposition.coords.latitude;
      this.lon = geoposition.coords.longitude;

      let latMadrid = 40.4167;
      let lonMadrid = -3.70325;

      this.total = this.calculateDistance(this.lon, lonMadrid, this.lat, latMadrid)+"KM";
    });
  }

De esta forma, lo único que nos queda es mostrar la variable total como hicimos anteriormente con las otras dos, en home.html.

<p>Distancia a Madrid: {{total}}</p>

Y el resultado sería el siguiente: