Add location information
Get the location
The majority 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.
Since the W3C Geolocation API exposes a user’s location, you must obtain the user’s permission before proceeding with its usage. If users run the app in a browser, the browser prompts them for their permission. When users run the app on a BlackBerry device, they are prompted for permission to allow 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 dive into 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.
Edit the index.html file and 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 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 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 HelloGeo landing page, substituting 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 next to the address bar.
- Click Enable.
- Select the WebWorks-TabletOS platform.
If you accidentally select the wrong platform, you can change it using the Platforms panel. If the panel is not visible, click the tiny arrow in the top-left corner of the screen. Select your desired platform, then click Change Platform.
If you want to change your coordinates to see how the output changes, you can change the location values in the Geo Location panel.