From my talk at Web Directions South 10 on building location-aware web applications using the native JavaScript geolocation API.

1. HELLO

2. MAX WHEELER
@makenosound

4. LOCATION,
LOCATION,
GEOLOCATION

5. I KNOW WHERE
YOU LIVE

6. What is
GEOLOCATION?

7. IT’S ABOUT
CONTEXT

8. -35.282441,
149.125022

9. -33.87585,
151.20015

10. GEODESIC

11. CIVIC

12. Where On Earth IDentifiers
WOEIDs

13. http://where.yahooapis.com/v1/place/28584769

14. HOW IT WORKS

15. GPS (or Assisted-
GPS)
Cellular network ID
WiFi networks
IP sniffing

16. GEOLOCATION API

17. “Is this that
HTML5 thing I’ve
heard so much
about?”

18. NO
But that’s OK

21. THE BASICS

22. navigator.geolocation

23. if (!!navigator.geolocation) {
// Hooray!
}

25. if (Modernizr.geolocation) {
// Hooray!
}

26. .no‐geolocation button {
display: none
}

27. ONE-SHOT
REQUEST

28. // Success callback
function showMap(position) {
alert("I see you!");
}
// Make a one‐off position request
navigator.geolocation.getCurrentPosition(showMap);

29. position = {
coords: {
accuracy: 80,
altitude: null,
altitudeAccuracy: null,
heading: null,
latitude: ‐35.28211547444445,
longitude: 149.12501867666666,
speed: null
},
timestamp: 307770135
}

30. position = {
coords: {
accuracy: 80, // in metres
altitude: null, // in metres
altitudeAccuracy: null, // in metres
heading: null, // 0‐360°
latitude: ‐35.28211547444445, // decimal °
longitude: 149.12501867666666, // decimal °
speed: null // metres per second
},
timestamp: 307770135
}

31. // Success callback
function showMap(position) {
alert("I see you!");
}
// Error callback
function handleError(error) {
alert("Oh noes!");
}
// Make a one‐off position request
navigator.geolocation.getCurrentPosition(
showMap,
handleError
);

32. error = {
code: 1,
message: "User says no."
}
0: UNKNOWN_ERROR
1: PERMISSION_DENIED
2: POSITION_UNAVAILABLE
3: TIMEOUT

33. // Success callback
function showMap(position) {
console.log(position);
}
// Error callback
function handleError(error) {
if(error.code == 1) {
// Fallback to other option?
}
}
// Make a one‐off position request
navigator.geolocation.getCurrentPosition(
showMap,
handleError
);

34. navigator.geolocation.getCurrentPosition(
showMap,
handleError,
{
enableHighAccuracy: false, // boolean
timeout: 10000, // in milliseconds
maximumAge: 60000 // in milliseconds
}
);

35. navigator.geolocation.getCurrentPosition(
showMap,
handleError,
{
maximumAge: Infinity,
timeout: 0
}
);

36. // Success callback
function showMap(position) {
// Thresholds for accuracy and the freshness
var earliest = Date.now() ‐ 60000;
var accuracy = 100;
if(position.timeout > earliest && accuracy > position.coords.accuracy) {
// We're good, do the things we want!
} else {
// Initiate a new position request
navigator.geolocation.getCurrentPosition(showMap, handleError, {
maximumAge: 0,
timeout: 10000
});
}
}
navigator.geolocation.getCurrentPosition(showMap, handleError,
{
maximumAge: Infinity,
timeout: 0
}
);

37. WATCHING

38. // Success callback
function showMap(position) {
// Hooray!
}
// Error callback
function handleError(error) {
// Sad face :(
}
// Start watching the user’s location
navigator.geolocation.watchPosition(
showMap,
handleError
);

39. // Success callback
function showMap(position) {
// Check the accuracy
if (position.coords.accuracy < 100)
{
// We're happy with the position, so stop watching
navigator.geolocation.clearWatch(watcher);
}
}
// Start watching the users' location
var watcher = navigator.geolocation.watchPosition(showMap);

40. WHAT NOW?

41. MAKE IT
MEANINGFUL

42. REVERSE
GEOCODING

43. http://tinygeocoder.com/
http://code.google.com/apis/maps/documentation/geocoding/
http://developer.yahoo.com/geo/placefinder

44. <script
src='http://maps.google.com/maps/api/js?sensor=false'>
</script>
<script>
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{ location: new google.maps.LatLng(lat, lng) },
callBack
);
function callback(response, status) { };
</script>

45. DEMO

46. GEOCODING

47. <script
src='http://maps.google.com/maps/api/js?sensor=false'>
</script>
<script>
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{ address: "Sydney Convention Centre" },
callBack
);
function callback(response, status) { };
</script>

48. YQLGEO
A wrapper for Geolocation services
http://isithackday.com/hacks/geo/yql‐geo‐library/

50. BULLETPROOF

51. A USE CASE

58. IT’S ABOUT
INFORMATION

59. 1. Which cafés are
good?
2. Where are they?
3. In relation to me?

60. MAPS ARE
A BIG STICK

61. 1. Simple
2. Fast
3. Intelligent

62. 1. Which are good?
2. Where are they?
3. In relation to me?

66. DEMO

67. MAPS ARE GOOD

68. SIMPLE MAPS

70. STANDARD MAPS

71. “With great power
comes great
responsibility”

74. THANKS

75. @MAKENOSOUND