Location, location, geolocation

3,218
-1

Published on

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

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,218
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Location, location, geolocation

  1. 1. HELLO
  2. 2. MAX WHEELER @makenosound
  3. 3. LOCATION, LOCATION, GEOLOCATION
  4. 4. I KNOW WHERE YOU LIVE
  5. 5. What is GEOLOCATION?
  6. 6. IT’S ABOUT CONTEXT
  7. 7. -35.282441, 149.125022
  8. 8. -33.87585, 151.20015
  9. 9. GEODESIC
  10. 10. CIVIC
  11. 11. Where On Earth IDentifiers WOEIDs
  12. 12. http://where.yahooapis.com/v1/place/28584769
  13. 13. HOW IT WORKS
  14. 14. GPS (or Assisted- GPS) Cellular network ID WiFi networks IP sniffing
  15. 15. GEOLOCATION API
  16. 16. “Is this that HTML5 thing I’ve heard so much about?”
  17. 17. NO But that’s OK
  18. 18. THE BASICS
  19. 19. navigator.geolocation
  20. 20. if
(!!navigator.geolocation)
{ 

//
Hooray! }
  21. 21. if
(Modernizr.geolocation)
{ 
 //
Hooray! }
  22. 22. .no‐geolocation
button
{ 
 display:
none }
  23. 23. ONE-SHOT REQUEST
  24. 24. //
Success
callback function
showMap(position)
{ 
 alert("I
see
you!"); } //
Make
a
one‐off
position
request navigator.geolocation.getCurrentPosition(showMap);
  25. 25. position
=
{ 

coords:
{ 



accuracy:
80, 



altitude:
null, 



altitudeAccuracy:
null, 



heading:
null, 



latitude:
‐35.28211547444445, 



longitude:
149.12501867666666, 



speed:
null 

}, 

timestamp:
307770135 }
  26. 26. 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 }
  27. 27. //
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 );
  28. 28. error
=
{ 
 code:




1, 
 message:

"User
says
no." } 0:
UNKNOWN_ERROR 1:
PERMISSION_DENIED 2:
POSITION_UNAVAILABLE 3:
TIMEOUT
  29. 29. //
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 );
  30. 30. navigator.geolocation.getCurrentPosition( 
 showMap, 
 handleError, 
 { 





enableHighAccuracy:
false,

//
boolean 





timeout:











10000,


//
in
milliseconds 





maximumAge:








60000


//
in
milliseconds 
 } );
  31. 31. navigator.geolocation.getCurrentPosition( 
 showMap, 
 handleError, 
 { 
 
 maximumAge:
Infinity, 
 
 timeout:



0 
 } );
  32. 32. //
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 
 } );
  33. 33. WATCHING
  34. 34. //
Success
callback function
showMap(position)
{ 
 //
Hooray! } //
Error
callback function
handleError(error)
{ 
 //
Sad
face
:( } //
Start
watching
the
user’s
location navigator.geolocation.watchPosition( 
 showMap, 
 handleError );
  35. 35. //
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);
  36. 36. WHAT NOW?
  37. 37. MAKE IT MEANINGFUL
  38. 38. REVERSE GEOCODING
  39. 39. http://tinygeocoder.com/ http://code.google.com/apis/maps/documentation/geocoding/ http://developer.yahoo.com/geo/placefinder
  40. 40. <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>
  41. 41. DEMO
  42. 42. GEOCODING
  43. 43. <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>
  44. 44. YQLGEO A wrapper for Geolocation services http://isithackday.com/hacks/geo/yql‐geo‐library/
  45. 45. BULLETPROOF
  46. 46. A USE CASE
  47. 47. IT’S ABOUT INFORMATION
  48. 48. 1. Which cafés are good? 2. Where are they? 3. In relation to me?
  49. 49. MAPS ARE A BIG STICK
  50. 50. 1. Simple 2. Fast 3. Intelligent
  51. 51. 1. Which are good? 2. Where are they? 3. In relation to me?
  52. 52. DEMO
  53. 53. MAPS ARE GOOD
  54. 54. SIMPLE MAPS
  55. 55. STANDARD MAPS
  56. 56. “With great power comes great responsibility”
  57. 57. THANKS
  58. 58. @MAKENOSOUND

×