0
HELLO
MAX WHEELER
   @makenosound
LOCATION,
 LOCATION,
GEOLOCATION
I KNOW WHERE
   YOU LIVE
What is

GEOLOCATION?
IT’S ABOUT
 CONTEXT
-35.282441,
149.125022
-33.87585,
151.20015
GEODESIC
CIVIC
Where On Earth IDentifiers

   WOEIDs
http://where.yahooapis.com/v1/place/28584769
HOW IT WORKS
GPS (or Assisted-
GPS)
Cellular network ID
WiFi networks
IP sniffing
GEOLOCATION API
“Is this that
HTML5 thing I’ve
 heard so much
    about?”
NO
But that’s OK
THE BASICS
navigator.geolocation
if
(!!navigator.geolocation)
{


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

 //
Hooray!
}
.no‐geolocation
button
{

 display:
none
}
ONE-SHOT
 REQUEST
//
Success
callback
function
showMap(position)
{

 alert("I
see
you!");
}

//
Make
a
one‐off
position
request
navigator.ge...
position
=
{


coords:
{




accuracy:
80,




altitude:
null,




altitudeAccuracy:
null,




heading:
null,




latitude...
position
=
{


coords:
{




accuracy:
80,















 
 //
in
metres




altitude:
null,













 
 //
in
metres...
//
Success
callback
function
showMap(position)
{

 alert("I
see
you!");
}

//
Error
callback
function
handleError(error)
{...
error
=
{

 code:




1,

 message:

"User
says
no."
}

0:
UNKNOWN_ERROR
1:
PERMISSION_DENIED
2:
POSITION_UNAVAILABLE
3:
T...
//
Success
callback
function
showMap(position)
{

 console.log(position);
}

//
Error
callback
function
handleError(error)...
navigator.geolocation.getCurrentPosition(

 showMap,

 handleError,

 {






enableHighAccuracy:
false,

//
boolean





...
navigator.geolocation.getCurrentPosition(

 showMap,

 handleError,

 {

 
 maximumAge:
Infinity,

 
 timeout:



0

 }
);
//
Success
callback
function
showMap(position)
{


//
Thresholds
for
accuracy
and
the
freshness


var
earliest
=
Date.now(...
WATCHING
//
Success
callback
function
showMap(position)
{

 //
Hooray!
}

//
Error
callback
function
handleError(error)
{

 //
Sad
...
//
Success
callback
function
showMap(position)
{


//
Check
the
accuracy


if
(position.coords.accuracy
<
100)



{




//...
WHAT NOW?
MAKE IT
MEANINGFUL
REVERSE
GEOCODING
http://tinygeocoder.com/

http://code.google.com/apis/maps/documentation/geocoding/

http://developer.yahoo.com/geo/placef...
<script

 src='http://maps.google.com/maps/api/js?sensor=false'>
</script>


<script>


   var
geocoder
=
new
google.maps....
DEMO
GEOCODING
<script

 src='http://maps.google.com/maps/api/js?sensor=false'>
</script>


<script>


   var
geocoder
=
new
google.maps....
YQLGEO
    A wrapper for Geolocation services

http://isithackday.com/hacks/geo/yql‐geo‐library/
BULLETPROOF
A USE CASE
IT’S ABOUT
INFORMATION
1. Which cafés are
good?
2. Where are they?
3. In relation to me?
MAPS ARE
A BIG STICK
1. Simple
2. Fast
3. Intelligent
1. Which are good?
2. Where are they?
3. In relation to me?
DEMO
MAPS ARE GOOD
SIMPLE MAPS
STANDARD MAPS
“With great power
  comes great
 responsibility”
THANKS
@MAKENOSOUND
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
×

Location, location, geolocation

3,115

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,115
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×