Understanding the Geolocation API (Simple)

Exclusive offer: get 50% off this eBook here
Instant HTML5 Geolocation How-to [Instant]

Instant HTML5 Geolocation How-to [Instant] — Save 50%

Learn how to create elegant, location-aware web applications using the JavaScript Geolocation API with this book and ebook

$12.99    $6.50
by Ben Werdmuller | September 2013 | Open Source Web Development

In this article by Ben Werdmuller the author of the book Instant HTML5 Geolocation How-to, we will discuss some basics about the Geolocation API. The Geolocation API is a series of simple JavaScript calls that retrieve the following aspects of the user's location:

  • Latitude and longitude
  • Altitude
  • The accuracy of the latitude and longitude
  • The accuracy of the altitude information
  • Heading
  • Speed

(For more resources related to this topic, see here.)

How to do it...

The web can be accessed from different types of hardware, such as desktop computers, laptops, tablets, phones, and embedded systems.

The World Wide Web Consortium (W3C) finalizes specifications in such a way that the web continues to support each of these platforms. Your operating system, Internet service provider, device type, and location all should not matter; the web is universal.

All of this means that the web may be the most important publishing medium in the history of human civilization—a medium that anyone can publish to and consume. However, because each device has slightly different capabilities, each feature may have slightly different characteristics from user to user. For example, in HTML5, some web browsers can play certain video formats, while other web browsers can play other video formats. In the Geolocation API, these changes relate to how location is computed, and as a result, how accurate it is.

Here's how the Geolocation API works from the user's perspective. You can see it in action by visiting my demo at http://benwerd.com/lab/geo.php.

  1. Visit an application or website that requires location information.
  2. The application attempts to determine your location with the Geolocation API.
  3. The browser asks you whether you want to reveal the location to the application.
  4. If you consent to sharing your location, your location is determined using available hardware and software, and sent to the application.
  5. If you do not consent to sharing your location, no location information is sent to the application, and it is notified that no location information will be sent.

Your application needs the Geolocation API if:

  • You want to adjust the application's functionality based on the user's location
  • You want to adjust a site's content or redirect the user based on his/her location
  • You want to empower the user to track his/her location over time

Your application cannot use the Geolocation API if:

  • You want to track the user without his/her explicit consent
  • You need real-time, extremely accurate location information

We will discuss why in the next section.

How it works...

The request for information is an important step to protect user privacy. The Geolocation API specification explicitly states, "User Agents must not send location information to Web sites without the express permission of the user." It's sadly true that the user's location can often still be determined without his/her consent through other means, such as IP geolocation or by sharing data between applications. However, these are unrelated to the Geolocation API, and we will not be discussing them here.

Here's what a location request looks like when using Google Chrome on my MacBook Pro using a home broadband Internet connection:

Note the ribbon above the main web page content. The entire content of the page has been sent to the browser; once location information has been sent, JavaScript could change the content of the page (for example, using the jQuery framework), submit the content elsewhere using a callback, or forward the browser to another page.

Here's what it looks like in the Android Chrome browser:

You can test your browser's geolocation capabilities by visiting http://benwerd.com/lab/geo.php.

Here's what it looks like when using Google Chrome on my MacBook Pro using cable Internet:

Here you can see that although my latitude and longitude have been calculated reasonably accurately, my altitude, heading, and speed details are not available. This is because these details are determined using GPS(Global Positioning System) technology, and my laptop does not have this capability. Instead, my web browser needs to guess my location based on various environmental factors.

Here's what the same Geolocation API test looks like on my Android Chrome browser on my cell phone:

You might be surprised to see that my altitude, heading, and speed information is still not present, despite having been determined on a cellphone that has hardware GPS support. In fact, this is because(if you use the default Geolocation API configuration) Chrome on Android attempts to use WiFi location first, where it's available, before resorting to the relatively battery-intensive (but more accurate) GPS location.

Here's what the test page looks like on an iPad:

Because the iPad did use GPS data to determine my location, altitude information is available. However, I wasn't moving, so there's no speed or heading information.

Only latitude, longitude, and accuracy are guaranteed to be there. The other fields are entirely dependent on the user's device, movement, and location context.

Where GPS is not available, the browser will use a process called trilateration to determine the location.

Trilateration looks at environmental factors such as available wireless networks and their relative signal strengths, proximity to cellphone towers, and current network IP address, and matches them against a remote database of environmental factors against known locations. For most browsers, this database turns out to be run by Google, but some providers use a solution from Skyhook Wireless, and there are others too. Apple maintains its own database for its products, for example, which have probably been crowdsourced from consumer iPhone and iPad usage. Database information could also have been gathered from special cars, such as those used to take photographs for Google StreetView, and other crowdsourcing techniques. It's important to note that the user's location is being sent to a third party in these instances, and that the returned location will only be as good as the service's database. How this location is determined is not part of the Geolocation API specification; all that is required for you to know is that some location information is returned.

There's more...

All modern browsers across both desktop and mobile platforms, except for Opera Mini, support the Geolocation API. Most have done so for enough time that you should be comfortable using the API in your web applications.

  • Microsoft Internet Explorer from Version 9.0 onwards (March 14, 2010)
  • Mozilla Firefox from Version 3.5 onwards (June 30, 2009)
  • Google Chrome from Version 5.0 onwards (May 25, 2010)
  • Android Browser from Version 2.1 onwards (January, 2010)
  • Apple Safari on the desktop from Version 5.1 onwards (July 20, 2011)
  • Apple Safari on iOS from Version 3.2 onwards (April 3, 2010)
  • Opera from Version 10.6 onwards (July 1, 2010)
  • BlackBerry Browser from Version 7.0 onwards (May, 2011)

(Source: CanIUse.com)

It's worth noting that because Microsoft Internet Explorer 9.0 was the first version to not support Windows XP, there remains a significant enterprise userbase—Internet Explorer users with Windows XP operating systems—that cannot use applications based on the Geolocation API. At the time of writing, this represents 24 percent of all web users worldwide according to theie8countdown.com. For this and a host of other reasons, including their own security, let's hope that they will upgrade soon.

The lack of Opera Mini support also means that many mobile phone users, particularly in developing nations or users with feature phones, are not able to use the Geolocation API. This situation is likely to change soon, as open source mobile operating systems such as Android and Firefox OS are gaining traction in those markets.

Further resources

Here are some relevant resources for further research:

Summary

In this article we discussed some basic points about the Geolocation API. At its core, the Geolocation API is a series of simple JavaScript calls that retrieve the aspects such as latitude and longitude, altitude, and the accuracy of the latitude and longitude.

Resources for Article :

 


Further resources on this subject:


Instant HTML5 Geolocation How-to [Instant] Learn how to create elegant, location-aware web applications using the JavaScript Geolocation API with this book and ebook
Published: May 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Ben Werdmuller

Ben Werdmuller is a web developer, product manager, and entrepreneur. He co-founded Elgg, an open source social networking platform used by organizations such as NASA, the World Bank, and Oxfam. Currently, he serves as the CTO of latakoo.com, an enterprise platform for sending, storing, and sharing videos and large files. He writes at benwerd.com.

Books From Packt


jQuery UI 1.8: The User Interface Library for jQuery
jQuery UI 1.8: The User Interface Library for jQuery

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

HTML5 Game Development with ImpactJS
HTML5 Game Development with ImpactJS

 HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

Getting Started with HTML5 WebSocket Programming
Getting Started with HTML5 WebSocket Programming

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

HTML5 Games Development by Example: Beginner’s Guide
HTML5 Games Development by Example: Beginner’s Guide

HTML5 Graphing and Data Visualization Cookbook
HTML5 Graphing and Data Visualization Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
m
M
V
Y
W
5
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software