The Sweet Embrace of Big Brother: HTML5 Geolocation
Geolocation is one of the most important features of the modern internet. Apps like Google Maps, Tinder, and Yelp all depend on geolocation to serve their users relevant data based on their current (or changing) location. Advertisers use geolocation to display ads about nearby businesses or upcoming events “in your area.”
For a long time, getting user location data meant either asking for some kind of identifying information (literal address, zipcode, city, etc) via a form or using IP addresses to determine where a user was connecting from, which was a complicated process. Gems made it possible for people to incorporate geolocation into their apps, but in most cases the location data you got back from users ranged from vague to downright incorrect. Enter HTML5.
HTML5 changed how developers could acquire user location data by including a native Geolocation object which can be accessed by running Navigator.geolocation anywhere in your javascript files. This object responds to two intensely useful functions including getCurrentPosition() which acquires the user’s current location in latitude and longitude (as well as altitude, heading, and speed if available), and watchPosition(), which, as the name implies, returns the users current position and “follows” them, returning each updated position as the user moves until clearWatch() is called. Additionally, setting up geolocation on your page is a breeze.
Let’s make a simple webpage that returns the users position to them. I’m going to create a dumb header as well an empty<p> tag that I’ll fill in with the longitude and latitude once they’ve been loaded (geolocation can take a little bit of time).
<h1> You are Here </h1><p id="latLon"></p>
HTML5 geolocation requires javascript (I’ll be using jQuery), so we’ll open up some <script> tags and write a few functions inside to get our coordinates and display them. We’re going to define a variable for the <p> tag we created, which will make filling it in a little easier.
We used two custom functions above: showPosition() and an anonymous function run when the document loads.
The anonymous function calls on the Geolocation object and uses the getCurrentPosition method which returns the users position in latitude and longitude. In our function, it passes this as the “position” argument to our showPosition() callback function which then calls on coords.latitude and coords.longitude to change the innerHTML of our empty <p> tag to the values of the longitude and latitude.
(It is good practice to include some “fallback content” by defining an if/else statement that calls your geolocation object. While geolocation is well supported by modern browsers, older browsers won’t be able to get location data. It’s obviously better to include some kind of warning or explanation rather than having nothing happen on your page.)
When this page loads we see the following:
In this example we simply display the longitude and latitude to the user, but a user’s location data can be used to query APIs, display the users location on a map, or any number of creative things.
So how does HTML5 geolocation work? Unlike most gems, which trace the IP address used to connect to a page or app and check it against an ISP database, native geolocation either uses the GPS built into most “computers” (meaning laptop, desktop, or mobile devices) or pings all of the wireless networks available to the device accessing the page, giving it a much deeper data pool from which to determine location.
An important closing note: location sharing is not enabled by default for mobile or browser; many of us are familiar with the “So-and-so app wants to access your location” notification that pops up the first time we open apps on our iPhone, and a similar notification occurs in browser the first time a user accesses any page that attempts to geolocate. Users must give their permission before location data is shared, so don’t assume that just because you’re running these functions you’ll automatically get data.
Furthermore, Chrome 50 only allows location data to be passed if the user is making an HTTPS request as an added security feature. Just one more thing to keep in mind when using native geolocation.
