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.geolocation.getCurrentPosition(showMap);
position
=
{


coords:
{




accuracy:
80,




altitude:
null,




altitudeAccuracy:
null,




heading:
null,




latitude:
‐35.28211547444445,




longitude:
149.12501867666666,




speed:
null


},


timestamp:
307770135
}
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
}
//
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
);
error
=
{

 code:




1,

 message:

"User
says
no."
}

0:
UNKNOWN_ERROR
1:
PERMISSION_DENIED
2:
POSITION_UNAVAILABLE
3:
TIMEOUT
//
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
);
navigator.geolocation.getCurrentPosition(

 showMap,

 handleError,

 {






enableHighAccuracy:
false,

//
boolean






timeout:











10000,


//
in
milliseconds






maximumAge:








60000


//
in
milliseconds

 }
);
navigator.geolocation.getCurrentPosition(

 showMap,

 handleError,

 {

 
 maximumAge:
Infinity,

 
 timeout:



0

 }
);
//
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

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

 //
Hooray!
}

//
Error
callback
function
handleError(error)
{

 //
Sad
face
:(
}

//
Start
watching
the
user’s
location
navigator.geolocation.watchPosition(

 showMap,

 handleError
);
//
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);
WHAT NOW?
MAKE IT
MEANINGFUL
REVERSE
GEOCODING
http://tinygeocoder.com/

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

http://developer.yahoo.com/geo/placefinder
<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>
DEMO
GEOCODING
<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>
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