Creating an geolocation app

Hi! In this tutorial I'll (try to) teach a little about connecting to rapidAPI apis and mainly creating an app that returns a list of places in defined range, so at the end of this tutorial, you will have an ionic app that can get user coordinates and list places in range.

What is RapidAPI hub?

RapidApi Hub is an is an online marketplace of rest APIs, in there it's possible to find APIs about almost anything. I strongly advice to take sometime to have a look on it, in there you'll find a lot of cool stuff for your own projects. In this post I'll use my own API Geolocation-Utils.

Near me application

In this tutorial, we'll use Ionic (Angular flavor) as it is multi platform. The main objective is build an application that is capable of get user coordinates and exhibit the response of requests.

To generate the base application, simply (and after installing the cli) run:
ionic start XyzNearMe list

After running that, you'll have an application that looks like this:

Ok, it's nice (thanks Ionic!) but isn't exactly what we want, so let start modding this base!

On our home component we need to get user coordinates. To do that we can user the browser api!

I used it in this way (I'll definitely rename this functions):

ngOnInit() {
        const userLocationConfig = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        };
        navigator.geolocation.getCurrentPosition((suc) => this.manipulateUserCoordinate(suc),
            this.errorAcquiringLocation, userLocationConfig);
    }

    manipulateUserCoordinate(pos) {
        const crd = pos.coords;
        this.lat = crd.latitude;
        this.lon = crd.longitude;
    }

    errorAcquiringLocation(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
    }

So it is really simple to acquire the user coordinates. Here I used it on OnInit to be sure that it is called when component loads, aside that, it's worth mentioning that I used the manipulateUserCoordinate as an arrow function to keep my acessibility to this.lat and this.lon.

Ok, now we have our coordinates, so we can make requests using that. As we created our project using the "list" option, we can took advantage of boilerplate code.

I started refactoring the getMessages to getPlaces and included latitude and longitude as parameters and removed the list making. So it got something like that:

public getPlaces(lat: number, lon: number){

    }

After I got this method to be called after acquiring user position, I started to mod it including the request:

public getPlaces(lat: number, lon: number, distance: number) {
        const httpOptions = {
            headers: new HttpHeaders({
                'X-RapidAPI-Host': 'geolocation-utils1.p.rapidapi.com',
                'X-RapidAPI-Key': 'MY_KEY'
            })
        };

        return this.httpClient.get<any>(`https://geolocation-utils1.p.rapidapi.com/place/search/list?distance=5&lon=${lon}&lat=${lat}`, httpOptions);
    }

But there's an important step, I created all classes to map properly this response (they can be found at this project repo). So now, I'm returning an Observable of PlaceResponse.

So in our home component we use our html like this:

 <app-place *ngFor="let place of placeResp" [place]="place"></app-place>

and the place component (that you can get by refactoring message component name) is like that now:

<ion-item *ngIf="place" [detail]="false">
  <ion-label class="ion-text-wrap">
    <h2>
      {{ place.content.name }}
      <span class="date">
        <ion-note>{{ place.distance.value | number: '1.1-1'}}KM</ion-note>
      </span>
    </h2>
    <h3>{{ place.content.address }}</h3>
  </ion-label>
  </ion-item>

Now it looks almost like this:

So now we have an app that acquires user location, does an request and display its result on list. I created this tutorial because for me, this is complicated, and I only got to get this running after a few days, so I hope that this helps a little who is trying to do something with Ionic and Angular.

You can get the final version of code here on my github repo.