Knowing the location of your users can help boost the quality of
your Web site and the speed of your service. In the past, users had to actively
input their location and submit it to a site, either by typing it, using a long
drop-down list, or clicking a map. Now, with the HTML5 Geolocation API, finding
your users (with their permission) is easier than ever. Figure 1 shows a
Web site using geolocation to determine the location of a user, represented in
latitude and longitude. The numbers can easily be translated into something
more understandable, such as the street name or city.
Figure 1 Showing a User’s Location with the Help of Geolocation
Imagine how useful your site could be if it provided online
timetables for all public transportation in a particular city. Using
geolocation, the site could recommend optimal travel routes to get people where
they’re going as quickly as possible. Desktop users could get their start
location sorted by proximity to their computer. Mobile users trying to get home
after a night out could quickly find the closest bus stop within walking
distance. These possibilities and more are just an API away.
Scenarios
for Using the Geolocation API
Here are 12 simple scenarios that illustrate how a Web site can
accommodate users and customize their experience by taking their location into
account. Some of them might seem obvious, but the small things often make the
biggest differences.
-
Public transportation sites can list nearby bus stops and metro
locations.
-
Late night out? Taxi or car service Web sites can find where you
are, even if you don’t know.
-
Shopping sites can immediately provide
estimates for shipping costs.
-
Travel agencies can provide better vacation tips for current
location and season.
-
Content sites can more accurately determine the language and
dialect of search queries.
-
Real estate sites can present average house prices in a
particular area, a handy tool when you’re driving around to check out a
neighborhood or visit open houses.
-
Movie theater sites can promote films playing nearby.
-
Online games can blend reality into the game play by giving
users missions to accomplish in the real world.
-
News sites can include customized local headlines and weather on
their front page.
-
Online stores can inform whether products are in stock at local
retailers.
-
Sports and entertainment ticket sales sites can promote upcoming
games and shows nearby.
-
Job postings can automatically include potential commute times.
How
Geolocation Works
Technically speaking, a PC or a mobile device has several ways
to find out its own location (hopefully, in the same place as the user).
- GPS is the most accurate way to determine positioning, but it’s
less energy efficient than other options and sometimes requires a lengthy
startup time.
- A-GPS (assistive GPS) uses triangulation between mobile phone
towers and public masts to determine location. Although not as precise as GPS,
A-GPS is sufficient for many scenarios.
- Mobile devices that support Wi-Fi access points can use hotspots
to determine the user’s location.
- Stationary computers without wireless devices can obtain rough
location information using known IP address ranges.
When it comes to sharing the physical location of users, privacy
is a serious concern. According to the Geolocation API, "user agents must not
send location information to Web sites without the express permission of the
user." In other words, a user must always opt in to share location information
with a Web site. Figure 2 shows a typical message requesting a user’s permission.
For more information about ensuring security with the Geolocation API, see Security and
privacy considerations.
Figure 2 Sample User Permission Request
Three
Simple Functions
Are you ready to incorporate geolocation into your Web site? You
need to learn only three simple functions to master the entire API, which
resides within the geolocation object, an attribute of the Navigator object.
(Learn more about the geolocation object here.)
The getCurrentPosition function gets the user location one time.
It takes two arguments in the form of callbacks: one for a successful location
query and one for a failed location query. The success callback takes a
Position object as an argument. It optionally takes a third argument in the
form of a PositionOptions object.
1. navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
2.
3. function locationSuccess(position) {
4.
5. latitude = position.coords.latitude;
6.
7. longitude = position.coords.longitude;
8.
9. }
10.
11. function locationFail() {
12.
13. alert(‘Oops, could not find you.’);
14.
15. }
The Position object contains the properties shown in Figure 3.
Figure 3 Properties of the Position Object
Property |
Value |
Unit |
coords.latitude |
double |
degrees |
coords.longitude |
double |
degrees |
coords.altitude |
double or null |
meters |
coords.accuracy |
double |
meters |
coords.altitudeAccuracy |
double or null |
meters |
coords.heading |
double or null |
degrees clockwise |
coords.speed |
double or null |
meters/second |
timestamp |
DOMTimeStamp |
like the Date object |
The watchPosition function keeps polling for user position and
returns an associated ID. The device determines the rate of updates and pushes
changes in location to the server.
The clearWatch function stops polling for user position. It
takes the ID of watchPosition as an argument.
Presenting
Location Data: Geodetic or Civic
There are two ways of presenting location data to the user:
geodetic and civil. The geodetic way of describing position refers directly to
latitude and longitude. The civic representation of location data is a more
human readable and understandable format.
Each parameter has both a geodetic representation and a civic
representation, as illustrated in Figure 4.
Figure 4 Examples of Geodetic and Civic Data
Attribute |
Geodetic |
Civic |
Position |
59.3, 18.6 |
Stockholm |
Elevation |
10 meters |
4th floor |
Heading |
234 degrees |
To the city center |
Speed |
5 km / h |
Walking |
Orientation |
45 degrees |
North-East |
When using the Geolocation API, you get the geodetic data back
from the functions. Presenting location data in raw numbers is rarely friendly
or useful. Online services, such as Bing
Maps and Yahoo
GeoPlanet can help you translate between the two
presentation modes.
Browser
Support
|
|
|
|
|
|
|
|
Internet Explorer 9+ |
Firefox
3.5+ |
Chrome
5+ |
Opera
10.6+ |
Safari
5+ |
iPhone
3+ |
Android
2+ |
Windows Phone 7.5+ |
Figure 5 Browsers that support the HTML5 Geolocation API
Even though geolocation works in all the major browsers (Figure
5), you still have to take into account the scenarios in which location can’t
be provided. For example, a user might be running an older browser or have
hardware that doesn’t include positioning devices, or simply might not want to
automatically share location information. The location detected could even be
incorrect. In such situations, you should always include an alternative or a
fallback method so users can enter or change their location manually.
Geolocation
in Action
Copy and paste the example code in Figure 6 and save it
as an HTML file. Open it in your favorite browser and follow the two-step
instructions on the Web site to see the Geolocation API draw a blue circle
around your current location.
Figure 6 Using the Geolocation API
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <title>Geolocation demo</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>Geolocation demo</h1>
9. <p>
10. Find out approximately where you are.
11. </p>
12. <p>
13. Step 1: <button onclick="GetMap()">Show map</button>
14. </p>
15. <p>
16. Step 2: When prompted, allow your location to be shared to see Geolocation in action
17. </p>
18. <div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
19. <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
20. <script type="text/javascript">
21. var map = null;
22. function GetMap() {
23.
26. var cred = "YOUR_BING_MAPS_KEY";
27. 28. map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
29. { credentials: cred });
30. 31. if (navigator.geolocation) {
32. navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
33. }
34. else {
35. alert('I\'m sorry, but Geolocation is not supported in your current browser. Have you tried running this demo in IE9?');
36. }
37. }
38. // Successful geolocation
39. function locateSuccess(loc) {
40. // Set the user's location
41. var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
42. 43. map.setView({ center: userLocation, zoom: 17 });
44. 45. var locationArea = drawCircle(userLocation);
46. map.entities.push(locationArea);
47. }
48. 49. function locateFail(geoPositionError) {
50. switch (geoPositionError.code) {
51. case 0: 52. alert('An unknown error occurred, sorry');
53. break;
54. case 1: 55. alert('Permission to use Geolocation was denied');
56. break;
57. case 2: 58. alert('Couldn\'t find you...');
59. break;
60. case 3: // TIMEOUT
61. alert('The Geolocation request took too long and timed out');
62. break;
63. default:
64. }
65. }
66. // Draw blue circle on top of user's location
67. function drawCircle(loc) {
68. var radius = 100;
69. var R = 6378137;
70. var lat = (loc.latitude * Math.PI) / 180;
71. var lon = (loc.longitude * Math.PI) / 180;
72. var d = parseFloat(radius) / R;
73. var locs = new Array();
74. for (x = 0; x <= 360; x++) {
75. var p = new Microsoft.Maps.Location();
76. brng = x * Math.PI / 180;
77. p.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
78. p.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
79. p.latitude = (p.latitude * 180) / Math.PI;
80. locs.push(p);
81. }
82. return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0, 0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
83. }
84. </script>
85.</body>
86.</html>
If you run the code as is, your location will be shown along
with a message about invalid credentials, as shown in Figure 7. To get a
result without the warning text (Figure 8), you need to replace
YOUR_BING_MAPS_KEY with your own key, which is generated when you sign up for a
Bing
Maps Developer account.
Figure 7 Geolocation Demo Mapping a Location without a Valid Key
Figure 8 Geolocation Demo Mapping a Location after Insertinga Valid Key
To see other examples of geolocation, which map your location
using a push pin, visit IE
Test Drive or attend an HTML5 Web Camp.
Learn more about geolocation here: