Add location information
Get the location
Most of the work that’s required to retrieve the location information is done by the geo.js file that you downloaded and extracted. We use the W3C Geolocation API, which is designed to provide a method to retrieve geographical location information. You can use this location information in various ways, such as to provide location coordinates, a map showing the user's location, or travel directions.
The W3C Geolocation API exposes a user’s location, so you must obtain the user’s permission to proceed. When users run the app, the browser or BlackBerry device prompts them for permission to access to their GPS location.
You can do a lot with geographic information, but in this application we'll just retrieve the location coordinates and display some location-related information. We won’t go into all the details of the geo.js file, but you should open it up and explore the code. If you want to learn more about using geolocation in your apps, see Using HTML5 Geolocation in your web or BlackBerry WebWorks application.
In the index.html file, make the following changes:
the following line of code in the <head>
section, just before the closing </head>
- Add an onClick event attribute to the <button> element that invokes getPosition(). This function is defined in the
<button type="button" id="btnGPSDefault" onClick="getPosition()">Get my coordinates</button>
- Add a new <div> element
(within the <div> element for the container
and below the <div> element for the button)
to represent the display area for the geolocation information.
Save your changes.
Test your app in the Ripple emulator
We've seen what our app looks like in a browser. Now let's see how it looks on a BlackBerry PlayBook tablet by opening it in the Ripple emulator.
- Open the Google Chrome browser and make sure that Ripple services are running. If they aren't, click the Ripple icon beside the address bar, and then click Start Ripple Services.
- Enter the URL for your Hello World landing page. Substitute http://localhost:9910 for the first part of the file path, up to and including /RippleSites (for example, http://localhost:9910/HelloGeo/index.html).
- Click the Ripple icon beside the address bar.
- Click Enable.
- Select the WebWorks-TabletOS platform.
If you want to use a different platform, you can change it using the Platforms panel. If the panel is not visible, click the tiny arrow in the upper-left corner of the screen. Select your desired platform, then click Change Platform.
This is what you should see:
If you want to change your coordinates to see how the output changes, you can change the values in the Geo Location panel.
Last modified: 2013-08-14