Nativescript: Geolocation in Mobile Application

At Daxima we’ve used a number of development platforms to build amazing mobile applications, which included Xamrin, Phonegap, React and native IOS and Android development.

However, recently we decided to try a new platform created by the team at Telerick, the inventors of KendoUI.

Our project was a customer review mobile application called Shmib that required Geolocation. Below are the steps that are useful in getting geolocation to work in Nativescript.

Setup

There is an existing plugin for Nativescript called ‘nativescript-geolocation’.

We are going to show how to create a mobile application using Nativescript to use device GPS hardware for location tracking.

Add Nativescript-Geolocation Plugin

We assume that you have already created your Nativescript project.

Now, we are going to use the command line to add a new plugin to the existing project by the following:

tns plugin add nativescript-geolocation

Refresh Existing Platform

In case some plugins that you already installed in your project conflict with the new one, you will have to refresh your platform and possibly remove and reinstall the plugin again.

Do this:

tns platform remove android
tns platform remove ios
tns platform add android
tns platform add ios

Please note this deletes the entire platform directory, so make sure to back up any customizations to your Android or iOS project file.

Include Plugin to Your Page

You have to add the following line on the top of your js file to import ‘nativescript-geolocation’ plugin to your code:

var geolocation = require("nativescript-geolocation");

Grant Location Service Permission

Before using location services for your device, it is necessary to grant permission for your application to access this feature:

if (!geolocation.isEnabled()) {
  geolocation.enableLocationRequest().then(function() {
  console.error("Allow geolocation");
  }, function(error) {
  console.error("Deny : " + error);
  });
}

Please note that Nativescript is an asynchronous application.

‘enableLocationRequest()’ has to be called to grant permission before getting the location.

It should be done using a different method, or you have to implement a promise to wait until the permission is granted and then get your location after that.

Get Your Current Location

Now, you can use ‘getCurrentLocation’ method to get a current location.

This method will return a Promise:

geolocation.getCurrentLocation( {desiredAccuracy: 1, updateDistance: 10, minimumUpdateTime: 600000, maximumAge: 600000, timeout: 5000} )
  .then(function (location) {
  Var lat = location.latitude;
  Var lng = location.longitude;
  }, function (e) {
  console.log("Error: " + e.message);
  });

Where the parameters are defined as follows:

[table id=1 /]

Source: Nativescript Location

Google Places

For this particular project, we use the Google Places API to get local business information.

We sent the longitude and latitude to the API to get information about local businesses.

You can also set the radius by which you can get results to reduce the number of records on the page.

Conclusion

With the sample code above, you should be well-equipped to start using geolocation on your mobile device with NativeScript.

We recommend testing on a real device, as emulators may not return accurate location data.

In some Android emulators, you can simulate latitude and longitude in the settings menu.

For iOS, the emulator defaults to Cupertino, but you can adjust it using the ‘Custom Location’ menu.