Your SlideShare is downloading. ×
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Location, location, geolocation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Location, location, geolocation

3,069

Published on

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

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,069
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

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

coords:
{ 



accuracy:
80, 



altitude:
null, 



altitudeAccuracy:
null, 



heading:
null, 



latitude:
‐35.28211547444445, 



longitude:
149.12501867666666, 



speed:
null 

}, 

timestamp:
307770135 }
  • 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. //
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. error
=
{ 
 code:




1, 
 message:

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





enableHighAccuracy:
false,

//
boolean 





timeout:











10000,


//
in
milliseconds 





maximumAge:








60000


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



0 
 } );
  • 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. WATCHING
  • 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. //
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. WHAT NOW?
  • 37. MAKE IT MEANINGFUL
  • 38. REVERSE GEOCODING
  • 39. http://tinygeocoder.com/ http://code.google.com/apis/maps/documentation/geocoding/ http://developer.yahoo.com/geo/placefinder
  • 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. DEMO
  • 42. GEOCODING
  • 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. YQLGEO A wrapper for Geolocation services http://isithackday.com/hacks/geo/yql‐geo‐library/
  • 45. BULLETPROOF
  • 46. A USE CASE
  • 47. IT’S ABOUT INFORMATION
  • 48. 1. Which cafés are good? 2. Where are they? 3. In relation to me?
  • 49. MAPS ARE A BIG STICK
  • 50. 1. Simple 2. Fast 3. Intelligent
  • 51. 1. Which are good? 2. Where are they? 3. In relation to me?
  • 52. DEMO
  • 53. MAPS ARE GOOD
  • 54. SIMPLE MAPS
  • 55. STANDARD MAPS
  • 56. “With great power comes great responsibility”
  • 57. THANKS
  • 58. @MAKENOSOUND

×