Location, location, geolocation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Location, location, geolocation

  • 3,400 views
Uploaded 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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,400
On Slideshare
3,107
From Embeds
293
Number of Embeds
4

Actions

Shares
Downloads
36
Comments
0
Likes
1

Embeds 293

http://icelab.com.au 164
http://www.webdirections.org 97
http://www.icelab.com.au 25
http://lanyrd.com 7

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