Add location information

We need to add some JavaScript so that clicking the button has an effect. Instead of testing this step in a browser, we'll try it in the Ripple emulator to get an idea of what the app looks like on a BlackBerry device.

Get the location

We will add a JavaScript event to the button. When the user clicks the button, this event triggers a JavaScript function that retrieves the user's location and then displays the location coordinates and other location information.

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:

  • We need to tell our app where to look for the JavaScript code. Add the following line of code in the <head> section, just before the closing </head> tag.
    <script type="text/javascript" src="geo.js"></script>
  • Add an onClick event attribute to the <button> element that invokes getPosition(). This function is defined in the geo.js file.
    <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.
    <div id="geolocationInfo"></div>

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 10 device by opening it in the Ripple emulator.

  1. 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.
  2. 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).
  3. Click the Ripple icon beside the address bar.
  4. Click Enable.
  5. Select the BlackBerry 10 WebWorks 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.

    You can switch devices within a platform by using the Devices panel.

This is what you should see:

This image shows the BlackBerry 10 version of the HelloGeo app as displayed in the Ripple emulator.

If you want to change your coordinates to see how the output changes, you can change the values in the Geo Location panel.

This image shows the Geo Location panel in the Ripple emulator.

Last modified: 2014-03-10

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus