12 Cool HTML5 Geolocation IdeasBy Danwei Tran Luciani 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 APIHere 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.
How Geolocation WorksTechnically speaking, a PC or a mobile device has several ways to find out its own location (hopefully, in the same place as the user).
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 FunctionsAre 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. The Position object contains the properties shown in Figure 3. Figure 3 Properties of the Position 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 CivicThere 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
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
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 ActionCopy 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 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: About the AuthorDescription: Profile Picture Danwei Tran Luciani is a developer evangelist at Microsoft. Her current focus is HTML5 and the next version of Windows. When she isn’t putting her M.Sc. degrees in Software Engineering and Interaction Design to use, she enjoys playing on the XBOX and geocaching. She tweets regularly at @danweitran and blogs sporadically at https://blogs.technet.com/danweitran. |
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)