Smiths R Us » GPS http://smithsrus.com Technology, home automation, usability, and whatever else amuses me. Mon, 19 Jul 2010 17:38:11 +0000 en hourly 1 http://wordpress.org/?v=3.0 GPS Geolocation in Safari on iPhone OS 3.0 http://smithsrus.com/gps-geolocation-in-safari-on-iphone-os-3-0/ http://smithsrus.com/gps-geolocation-in-safari-on-iphone-os-3-0/#comments Thu, 18 Jun 2009 02:00:59 +0000 Doug Smith http://smithsrus.com/?p=157 I just updated my iPhone to the shiny new OS 3.0. Apple did a great job addressing a few shortcomings and adding new features. Others have already told about the common features so I won’t rehash them here.

But let me tell you about my favorite new feature: Safari can now get your GPS location via javascript! This is usually referred to as geolocation. You can easily grab the current location or get periodic updates.

Okay, so I’m excited over what may seem like an obscure geeky feature, but I think it’s a big deal.

Why GPS in Safari is a Big Deal

  1. Location aware Web pages: Have you ever gone to a company’s Web site to find their nearest location? You usually have to type in your zip code. But what if you’re traveling and don’t know your zip code? Safari knowing your location solves that problem.

  2. Location aware Web applications: It’s fairly easy to create Web content looks and behaves like an iPhone application. Now those can take advantage of location information.

    For example, I’ve been working with a company on an iPhone Web application that interacts with their internal customer database. Field reps can now easily find customers within a certain radius of the rep’s current location who meet various other criteria.

Web Geolocation Privacy and Standards

Don’t worry, all of this is built with good privacy controls. You are asked permission before your location data is revealed to a site. For convenience, it stops asking about a particular site after you have approved it a few times.

These location features are based on the upcoming Geolocation API Specification. Because it’s not just a proprietary Safari thing it should get widespread adoption. In fact, it’s already built into the latest Firefox 3.5 beta.

Web Geolocation Sample Code

The specifications do a good job of explaining the parts so no need to go over all of that. However, it’s worth pointing out how to check and see if geolocation features are available or not and take appropriate action. For example, you may only want to show GPS options if it can actually be used. This simple snippet will do the job.

if (navigator.geolocation) {  
	/* Code if geolocation is available. */  
} else {  
	/* Code if geolocation is not available */
}

Let’s put it all together in a simple Web page that displays all of the geolocation variables for your current location. The code is below or you can try my geolocation test page from your iPhone.

(Yes, you’ll probably want to use modern DOM techniques for a real project. The purpose of this is just to show a simple working example.)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<title>Geolocation Test</title>
 
		<script language="javascript" type="text/javascript">
			function getLocation() {
				// Get location no more than 10 minutes old. 600000 ms = 10 minutes.
				navigator.geolocation.getCurrentPosition(showLocation, showError, {enableHighAccuracy:true,maximumAge:600000});
			}
 
			function showError(error) {
				alert(error.code + ' ' + error.message);
			}
 
			function showLocation(position) {
				geoinfo.innerHTML='<p>Latitude: ' + position.coords.latitude + '</p>' 
				+ '<p>Longitude: ' + position.coords.longitude + '</p>' 
				+ '<p>Accuracy: ' + position.coords.accuracy + '</p>' 
				+ '<p>Altitude: ' + position.coords.altitude + '</p>' 
				+ '<p>Altitude accuracy: ' + position.coords.altitudeAccuracy + '</p>' 
				+ '<p>Speed: ' + position.coords.speed + '</p>' 
				+ '<p>Heading: ' + position.coords.heading + '</p>';
			}
		</script>
	</head>
	<body>
		<script language="javascript" type="text/javascript">	
			if (navigator.geolocation) {  
				document.write('<p><input type="button" onclick="getLocation()" value="Show Geolocation Information" /></p>');
			} else {  
				document.write('<p>Sorry, your device or browser software does not appear to support geolocation services.</p>');  
			}  
		</script>
 
		<div id="geoinfo"></div>
	</body>
</html>

I can’t wait to see some of the great things others will create by combining Web sites with location. And it will only get better as more devices become location aware. Be sure to let me know of good location-aware sites and web apps you run across.

Now go create something cool!

]]> http://smithsrus.com/gps-geolocation-in-safari-on-iphone-os-3-0/feed/ 27