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

Like this? Share it with your network

Share

Location, location, geolocation

on

  • 3,357 views

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.

Statistics

Views

Total Views
3,357
Views on SlideShare
3,064
Embed Views
293

Actions

Likes
1
Downloads
36
Comments
0

4 Embeds 293

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

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Location, location, geolocation Presentation 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