In this exercise, you create code for the Geolocation API, which is used to determine and share geographical positions. You create code to establish current location as well as code that constantly watches for the user's position.
To complete the required tasks in this exercise, you should:
- Understand HTML in general
- Be familiar with the basics of APIs
- Know how to create
Perform the following steps to create the code:
- Create code that tests to see whether geolocation is available for the
browser being used:
- If geolocation is available, retrieve the user's current location.
- If geolocation is not available, display a statement that lets the user know his or her browser is not supported.
- Write the statement required to constantly watch for the location rather than just retrieving the current location.
- Write the statement that turns the location watch off.
- Use the element IDs provided in Listing 1 and the
getElementByIdfunction to retrieve the geolocation values required for the table to display the listed values.
Listing 1. Geolocation values
<table> <tr> <td>accuracy:</td> <td><span id="accuracyValue"></span></td> </tr> <tr> <td>altitude:</td> <td><span id="altitudeValue"></span></td> </tr> <tr> <td>altitudeAccuracy:</td> <td><span id="altitudeAccuracyValue"></span></td> </tr> <tr> <td>heading:</td> <td><span id="headingValue"></span></td> </tr> <tr> <td>latitude:</td> <td><span id="latitudeValue"></span></td> </tr> <tr> <td>longitude:</td> <td><span id="longitudeValue"></span></td> </tr> <tr> <td>speed:</td> <td><span id="speedValue"></span></td> </tr> </table>
Follow these solution steps to check your work.
- "HTML5 fundamentals, Part 3: The power of HTML5 APIs" (developerWorks, June 2011) provides an overview of the geolocation API.
- The W3C's Geolocation API Specification Level 2 provides a thorough use case and requirements section that is useful in formulating commercial and social applications of the API.
- "Create modern Web sites using HTML5 and CSS3" (developerWorks, March 2010) is a multi-component HTML5 and CSS3 tutorial.
- The <html>5doctor, website provides an excellent view of the current trends in HTML5 today.
- The WHATWG website provides detailed information for the HTML5 specification.
- Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics.