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.

1. Setup

There is an existing plugin for Nativescript called ‘nativescript-geolocation’. We are going to show how to create mobile application using Nativescript to use device GPS hardware for location tracking.

2. Add nativescript-geolocation plugin to your project

We assume that you already created your Nativescript project then we are going to use command line to add new plugin to the existing project by the following.

tns plugin add nativescript-geolocation

3. Refresh existing platform

In case, some plugins that you already installed to your project conflict with the new one. You have to refresh your platform and possibly removing and reinstalling the plugin again.

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 backup up any customization to your Android or ios project file.

4. 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");

5. 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 Nativescript is an asynchronous application. ‘enableLocationRequest()’ has to be called to grant a permission before getting the location. It should be in a different method or you have to implement a promise to wait until the permission was granted then getting your location after that.

6. 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 parameters are defined as follows.

PropertyTypeDescription
desiredAccuracyNumber(Optional) Specifies desired accuracy in meters. NativeScript has a special enum Accuracy that helps to make code more readable. Defaults to Accuracy.any. Such accuracy could be achieved with only wifi and assist GPS from network provider, therefore does not put additional pressure on battery consumption. In order to use high accuracy (requires GPS sensor) set this option to Accuracy.high.
updateDistanceNumber(Optional) Updates distance filter in meters. Specifies how often to update. Default on iOS is no filter, on Android it is 0 meters.
minimumUpdateTimeNumber(Optional) Specifies the minimum time interval between location updates, in milliseconds. Ignored on iOS.
maximumAgeNumber(Optional) Filters locations by how long ago they were received, in milliseconds. For example, if the maximumAge is 5000, you will get locations only from the last 5 seconds.
timeoutNumber(Optional) Specifies how long to wait for a location, in milliseconds.

Source: Nativescript Location

7. 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.

In summary

Using the above sample code you should be well on your way to start using geolocation on your mobile device using Nativescript. However, we recommended to doing this on the real device. Because in the emulator will not return a correct location. In some Android emulators you can simulate the Latitude and Longitude in the emulator setting menu. In iOS emulator returns ‘Cupertino’ location by default but you can change it from the ‘Custom Location’ menu.

No Comments

Post A Comment