Skip to main content

If you don't have an IBM ID and password, register here.

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. This profile includes the first name, last name, and display name you identified when you registered with developerWorks. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

Select a language:

Practice: Create geolocation components

Grace Walker, IT Consultant, Walker Automated Services
Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.

Summary:  The use of geographical assets to determine where someone or something is located, and then selling that specific set of information to anyone who wants to use it is the essence of geolocation. It is the creation of quality, utility, and value for customers, while at the same time creating economic and financial benefits for stakeholders that drive business. Geolocation, particularly in the mobile environment, provides opportunity for both the general populace and businesses of all types.

Date:  07 Oct 2011
Level:  Intermediate
PDF:  A4 and Letter (15KB | 4 pages)Get Adobe® Reader®

Comments:  

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.

Frequently used acronyms

  • API: Application programming interface
  • CSS3: Cascading Style Sheet version 3
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • HTML5: HTML version 5
  • W3C: World Wide Web Consortium

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 navigator.geolocation objects
  • Understand the fundamentals of JavaScript

Exercise

Perform the following steps to create the code:

  1. 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.
  2. Write the statement required to constantly watch for the location rather than just retrieving the current location.
  3. Write the statement that turns the location watch off.
  4. Use the element IDs provided in Listing 1 and the getElementById function 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>

Back to top

Exercise solution

Follow these solution steps to check your work.


Resources

About the author

Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.

Close [x]

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.

Close [x]

Report abuse help

Report abuse

Report abuse submission failed. Please try again later.

Close [x]

developerWorks: Sign in

If you don't have an IBM ID and password, register here.


Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 

The first time you sign into developerWorks, a profile is created for you. This profile includes the first name, last name, and display name you identified when you registered with developerWorks. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

Close [x]

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 

All information submitted is secure.

Rate this article

Comments

Back to top

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=762609
ArticleTitle=Practice: Create geolocation components
publish-date=10072011

Table of contents

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.

For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

 

Share this page:

Follow developerWorks: