Ionic 2 – Geolocation and Geocoding

Hi Friends,

Hope you are all well. In this post let’s discuss about Geolocation and Geocoding in your Ionic 2 apps.

One of the more commonly used features in almost all mobile apps nowadays is location based services. i.e., we identify the location of the user and provide services to him accordingly. So to find the location of a particular user anywhere on the face of the earth is to get the latitude and longitude of where he is located and then try to decide the location using those coordinates.

We use the Geolocation plugin to get the latitude and longitude of the location where the devices is present, we then use the geocoding plugin to perform a reverse geocoding wherein we pass the latitude and longitude to get the name of the place. Let’s see how to do this in a simple way.

Let’s begin.

A screencast of this post

 

Complete code of this post is available here.

First let’s scaffold out an ionic 2 app using the cli.

We now need 2 plugins to perform the task. So let’s go ahead and install them.

Now since Ionic native 3.1.x it is required to install the wrappers for these plugins as well.

Now open up app.module.ts and modify it as shown below.

We will just have one button on the homepage which upon clicking will show us the location or the country name in a toast.

Open up home.html and add the below code inbetween the <ion-content> tags.

Open up  home.ts and modify it as shown below.

We are simply using the geolocation.getCurrentPosition() to get the latitude and longitude coordinates of the device’s location and then passing it along to getcountry().

In getcountry() we are simply performing a reversegeocoding and then passing the country name to a toast.

(Forward Geocoding means to pass the name of a location and get it’s latitude and longitude coordinates whereas reverse geocoding implies the opposite).

Now run the app on your device and you should see the name of the country you live at present on your mobile device.

So far so good., but assume that your location settings in your mobile is turned off. Now if you click on the button, it doesn’t even throw up an error right ? We need to fix this too.

To request the user to turn on his location settings in that case, we have another plugin called location-accuracy that we could use.

To install the location-accuracy plugin simply type in the below command in your terminal.

Install the native wrapper as well using the below command.

Now open up app.module.ts and add this plugin as well. The final app.module.ts file would look as shown below.

Open up home.ts file and modify it as shown below.

If the location is not turned on, we show up a prompt requesting the user to turn it on, once the location settings are turned on then we can simply use the geolocation and geocoding plugins to get the location of the user.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading; peace.. :)

 

Liked it? Take a second to support admin on Patreon!
  • Sagar Deshmukh

    Hello, Raja, We need your guidance refining an application for a competition. We can’t post the details here for now. Is there somewhere I can contact you?

  • mansoor

    i followed your tutorial it helped me lot but im working on one app i need to draw the route between user current location and destination im new to ionic im not getting how to do it plz help me your help will be life saver for me