Learning about HTML5 Geolocation

Posted in 12412 HTML5 on 5 March 2012

I wrote about the 12414 project a few months ago. It’s an initiative to encourage you to learn new things over the course of 2012 and I signed up so that I would have to set aside more time for personal learning over the course of the year. That’s been partly successful but I haven’t done as much as I would have liked in the first few months. However, what I have done is read up on the HTML5 Geolocation API ¹, which is a subject that I didn’t know much about. Here are a few of the articles and tutorials that I have been reading.

¹ Strictly speaking, the Geolocation API is not part of the HTML5 specification. However, it’s commonly associated with it so that’s good enough for me.

• First, the HTML5 Doctor website has an introduction to HTML Geolocation, describes how it can be used to obtain your longitude and latitude, and provides a couple of demos. This one plots your position on a Google map. There’s a similar demo here on the HTML5 Demos website.
• Sitepoint has a good article about Using the HTML5 Geolocation API and describes the code for plotting your position on Bing Maps.
• Niall McMahon describes how to use geolocation data with the Google Maps API to get address and location details (using JSON and PHP).
• Phil Sorrell has used geolocation data to show the weather forecast in your area. The demo was coded in less than an hour which either shows how simple the Geolocation API is or how fast Phil can code (probably both!). Very nice example though.
• .Net magazine’s Getting Started with HTML5 Geolocation article (from HTML5 Cookbook) describes several ways to use the geolocation longitude and latitude values with other APIs or data. For example, the article describes how to create a fallback (using MaxMind’s GeoIP service) if HTML5 Gelocation is not supported, how to convert an address into latitude and longitude (geocoding), how to get directions from current location to another, and how to find the next Starbucks coffee shop (using SimpleGeo’s Places API). Lots of great examples here!

With all the demos, viewing with a GPS-enabled device gives the best results (of course). Your browser will need to support the Geolocation API as well; the latest versions of common browsers and mobile OS all support it.

In summary

The HTML5 Geolocation API provides a simple way to get your location’s longitude and latitude. After that, you need to do something with the data to transform it into a more user friendly format, for example plot position on a map, use to get directions, find the distance to another location(s), or use with another application or API. I’m thinking about ways that I might be able to use it, perhaps on Horsham Pub Guide, but that’s a blog post for another day.

Related Posts

• Reviewing 2012 and learning new stuff
• Learning new things for 2012
• First steps with HTML5
• Getting started with HTML5 and responsive design
• Introducing HTML5
• HTML5 links for light reading