If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

This tutorial shows how to create and use Geolocation service in an AngularJS app.

Before you begin

Tutorial level: intermediate.

Prerequisites: an Appery.io account.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The Geolocation component used in Appery.io is the Geolocation component from Apache Cordova.

To learn more about the component, and any other settings or options, please see the geolocation documentation page.

Creating the app

Design

1. Open your Appery.io Bootstrap/AngularJS or Ionic/AngularJS project or create a new one. You will get two default pages: index and Screen1.

2. Go to Screen1 and create the following UI consisting of:

  • A Button component (configure its Block to True, Text to Get my position, and ng-click to geo());
  • 4 Text components: Text = Latitude, {{la}}, Longitude, and {{lo}} respectively.

This is how it should look like:

If you are new to using Bootstrap/AngularJS and/or Ionic/AngularJS UI components, read here and here respectively.

Now, let’s create services and variables and bind them with UI components.

Adding services

1. In the Appery.io Visual Builder, go to Project > CREATE NEW > From Plug-in.

2. In the new window, select Apperyio Geolocation Service and click Import selected plug-ins.

3. In the Project view, a list of related services and a JavaScript file appears.

4. After a native service has been added to the app, it can be called. Invoking a native service is very similar to invoking a REST service.

Scope

1. First, go to SCOPE and add two variables: la (for latitude) and lo (for longitude):
VariablesLaLo

2. To call the added service, on to the SCOPE view of the Screen1 page, add a new function – geo and click Add, opening the function editor.

3. Next, in the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet.

4. Delete the text "service_name" in the code and click CTRL+SPACE to get the drop-down with all the available services:

Instead of invoking services in the code editor with subsequent auto completing, you can use a drag and drop feature to invoke services. Read here to learn how.

4. Select Geolocation_currentPosition- Service. After auto completing, the service is added to the function code and you can click Mapping to map the service to the page.

5. By mapping the service response latitude and longitude to the la and lo variables respectively and click Save & Replace, you add the following code to the function:

The code must look like:

When testing the app, you’ll get:

Now, let’s modify the app by invoking Geolocation_watchPosition and Geolocation_clearWatch services.

Watching position

Watching position is a great feature that tracks current location. Let’s add it to the app.

The Geolocation_watchPosition method begins listening for updates to the current geographical location of the device running the client. It is an asynchronous function and returns the device’s current position when a change in position has been detected. When the device has retrieved a new location, the geolocationSuccess callback is invoked with a Position object as the parameter.

  1. On the Design tab of Screen1, add two buttons:
    • The Button component (set Block to True, Text to Watch my position and ng-click to watch()).
    • The Button component (set Block to True, Text to Stop watching and ng-click to stop()).

    This is how it should look:

  2. Now, under SCOPE, create the watch() function that invokes Geolocation_watchPosition service and has the following code:

The notify event is used because you are going to receive coordinates many times. The received data is an object ({result: Geoposition, isSuccess: true} if successful and {result: PositionError, isSuccess: false} if unsuccessful). That is why you should check isSuccess in code. Please read more here and here.

3. Then, create the stop() function that invokes Geolocation_clearWatch service and has the following code:

The Geolocation_clearWatch method stops watching for updates to the current device’s geographical location by clearing the Geolocation_watchPosition referenced by watchID.

watchId is returned in the deffered object that was created when service invoked. You can obtain it and then kill this watcher. It’s possible to create several watchers in the app.

Call clearWatch() to kill them all.

You are ready to test the app.

Testing the app

Run a test to check how your app will work.

Location Service of your device must be enabled.

Click Get my position to obtain your current location.

Watch my position enables tracking your position in real time. Stop watching button disables this mode.

New coordinates must significantly differ from current ones to be catched. So don’t expect testing this feature when pacing the office.

When testing the app, you’ll get:

Android

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the Google Play Store.
  2. Build the Android binary and install it your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.