iPhone, iPod Touch, and iPad share an important feature: All of them are mobile devices. Taking advantage of the built-in GPS sensor, we can identify the device's current location. This kind of information can be very useful for those developers interested in geolocation.
Let's find out how to develop a simple application for retrieving our current location using our mobile iOS device. Our application will display our current location on the screen using the standard latitude and longitude coordinates. This information will be displayed after the user clicks the provided button.
For this recipe, we'll use the UiUIKit framework for building the graphical user interface of our application. Additionally, the XUI framework will be used for manipulating the DOM model of the page for displaying our result. Check to make sure that both the frameworks are installed on your machine.
- First, we're going to create an XHTML file with the required lines for loading the mentioned frameworks:
<script type="text/javascript" src="../xui/xui-core-1.0.0.js"></script> <link rel="stylesheet" href="../uiuikit/stylesheets/iphone.css" />
- The next task will be to add some CSS code to make our button more stylish:
<style type="text/css"> #mybtn { margin-right: 12px; } </style> - Regarding the JavaScript code for our recipe, add the following lines:
<script type="text/javascript" charset="utf-8"> function onSuccess(pos) { var lat = pos.coords.latitude; var lon = pos.coords.longitude; var ele = "<p><strong>Your location is:</strong></p>"; ele += "<p>Lat: " + lat + "</p>"; ele += "<p>Lon: " + lon + "</p>"; x$('#btn').html('after', ele); } function onError(msg) { alert("Error!: " + msg); } function get_location() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } </script> - Finally, add the HTML code to define the user interface for the application:
<body> <div id="header"> <h1>Geolocation</h1> </div> <h1>Where am I?</h1> <p id="btn"> <a href="#" onclick="get_location()" class="button white" id="mybtn" >Get location</a> </p> </body>
Save your new file and load it on your device. When the application is loaded, you can click on the Get location button. A new window will be displayed asking you to confirm if the browser could use your current location. For example, if you're using the iPhone Simulator, you'll see the two different windows as shown in the following screenshot:
If you're testing your application directly using the iPhone, you will see an alert box asking you the same question:
After clicking on the OK button to authorize the action, the application will display your current location:
UiUIKit and XUI are used together in this recipe for building our user interface. The UiUIKit framework is used for defining a simple layout including a small button for getting our current location. With the XUI framework, we modify the DOM of the page to display the result of the onSuccess() JavaScript function. Actually, more specifically, we're inserting a paragraph element after our button.
The main JavaScript function of this recipe is called get_location(), which is invoked after clicking on the main button. The onclick handler of the button has the responsibility to call the function. Safari Mobile offers us a special object called navigator.geolocation, which has access to geolocation, through the getCurrentPosition() method. It works using two different parameters working like callback functions. The first one is called onSucces() and will be executed if everything is right and the position can be reached, the other onError() will be called if something goes wrong.
The onSucess() JavaScript function receives a parameter with the related information about our current location. Actually, the main object coords offers two properties: one for latitude and one for longitude. Both of them are required for the GPS systems to determine a specific location.
HTML5 defines a new API for working with geolocation. In fact, navigator.geolocation is an object introduced by this standard. Safari Mobile includes the ability to harness the native API of HTML5. Due to this fact, we used this object for getting our current location.
In addition to latitude and longitude, the coords object offers us other properties related to our current location. One of these is altitude, which represents the distance in metres with regards to the sea level.
Surely, you will find the complete reference of HTML5 related to geolocation very interesting. It can be found at: http://dev.w3.org/geo/api/spec-source.html.
Some frameworks like Sencha Touch and PhoneGap include specific objects and methods for working with geolocation as an alternative to the native API of HTML5. However, some of the features offered by these frameworks just work as simple wrappers. This means that they encapsulate the geolocation API in objects with a higher level of abstraction. The aim of this technique is to make the job easier.
If you're interested in using Sencha Touch, you can take a look at the object Ext.util.Geolocation.