Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    Latest Updates

Geolocation

Using the Cordova Geolocation API.

Introduction

Every new jQuery Mobile app comes bundled with the Apache Cordova library which provides access to various native APIs. In this short tutorial you will learn how to use the Geolocation API. We also provide a short video.

Creating a New App

To start you are going to create a new jQuery Mobile app.

  1. Go to Apps page and click Create new app link.
  2. Name the app GeolocationApp, select jQuery Mobile tab and then Blank template. Click the Create button.

After a few seconds, a new jQuery Mobile app will load in the App Builder.

Designing the UI

Next step is to design the app UI. The UI will be simple, you will place a button on the page which will invoke the Geolocation and two labels to display the latitude and longitude information from the Geolocation service.

  1. In the app you just created, open Project > startScreen.
  2. Click the header inside the device, then in Properties change the Text property to Geolocation.
  3. Next drag and drop the Button component.
  4. Change the button's Text property to Show Location in the Properties panel.
  5. Drag and drop two Label components below the button. One will display the latitude, the other will display the longitude.
  6. Clear the default Label text from both buttons.

Your page should look like this:

Geolocation page.

Geolocation page.

Adding the Geolocation Service

In this step you are going to add the Geolocation service.

  1. Click Create new > Service. Check Geolocation service and click the Create Service button. Geolocation service will be added under Services folder.

Geolocation Service and Geolocation JavaScript API

The Geolocation service inside the App Builder is simply a wrapper on top of Cordova Geolocation API. This service is available so it's easier to use and also allows you to use the service in mapping. You can also use the Geolocation JavaScript API directly.

As this service is a wrapper for the Cordova API, you don't need to edit the service. The next step is to use it on a page.

Using the Service on a Page

To add the service to a page:

  1. Open startScreen page, then switch to Data view.
  2. Select Device from the first list, then select GeolocationService and click Add.

For service input you are going to keep the default values so you only need to create mapping for service response.

  1. Click Mapping for Success event.
  2. Click Expand all on both sides of the mapping.
  3. Using drag and drop create the following mapping:
Service mapping.

Service mapping.

  1. Click Save and return button.
  2. Switch back to Design view.

The last step is to invoke the service.

Invoking the Service

To invoke the service:

  1. Click the button and open the Events tab.
    • Double check that the button is selected in Component list and click event is select in Event.
  2. For Action select Invoke service > geolocation1 > Save.

You are now ready to test the app.

Testing the App

You are now ready to test the app. Click the Test button in the App Builder to launch the app in the browser.

Testing Geolocation

Desktop browsers will try to use the IP address to determine the location. This should work in most cases, however the latitude/longitude information returned might be for a different location. It's best to test Geolocation on the actual device as you will get a lot more accurate results.

Testing on the Device

You can also easily test the app directly on the device by using the Appery.io Tester App

Geolocation


Using the Cordova Geolocation API.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.