html 5 – geolocation and maps. geolocation api what is a ”geolocation”…? a geographical...
TRANSCRIPT
Geolocation API
• What is a ”geolocation”…?• A geographical location, defined in terms of– Latitude (north/south)– Longitude (east/west)– Altitude (in meters)
• Usually, we are only interested in lat/lon• Smørum: 55.741396, 12.298768
Geolocation API
• Why is a users location interesting…?• Already exists a wealth of location-oriented
applications, particularly interesting for mobile applications– ”Where is the nearest xxx…?”– ”How long was my bike trip…?”– ”Where are my kids right now…?
Geolocation API
• How can a device know its location…?• Device-specific– GPS– IP Address– WiFi– Cell Phone towers
Geolocation API
• GPS – Global Positioning System– Satellite-based– Uses triangulation– Precision? ≈10 meter– GPS device available in (almost) all
modern mobile devices– Can have problems indoors– Somewhat slow to ”kick in”
Geolocation API
• IP Address– Lookup-based, maps IP to a location– Robust, fast, works everywhere– Precision? Depends… Can be anything from very
accurate to ”city-level”– May resolve to e.g. ISP, company…
Geolocation API
• WiFi– Based on Wireless Network lookup– Uses triangulation– Precision? Depends…– Fast, works indoors– Depends entirely on the availability of
wireless networks
Geolocation API
• Cell Phone towers– Based on Cell phone tower lookup– Uses triangulation– Precision? Depends… Best precision lower
than e.g. GPS– Fast, works indoors (and outdoors)– Depends entirely on the availability of cell
phone towers
Geolocation API
• Good news – you do not need to worry about the device-specific details
• You can obtain– The location itself– The estimated accurary– The time at which the location was retrieved
Geolocation API
• How do you get hold of your location?• Through the Geolocation API (JavaScript)!– All browsers support a global navigator object– If the navigator object contains a geolocation
property, the browser supports Geolocation
Geolocation API
if (navigator.geolocation){ // Do Geolocation stuff}else{ // No Geolocation support}
Geolocation API
• I have Geolocation support, now what…?• On the geolocation object, you can call the
getCurrentPosition method• Note that the getCurrentPosition method
takes a callback method as a parameter!• The callback method must take a position
object as a parameter
Geolocation APIfunction handleLocation(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; // Do stuff with latitude and longitude }
if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(handleLocation);}else{ // No Geolocation support}
Geolocation APIfunction showLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; alert("Latitude : " + latitude + " Longitude: " + longitude); }
function errorHandler(err) { if(err.code == 1) { alert("Error: Access is denied!"); } else if( err.code == 2) { alert("Error: Position is unavailable!"); } }
Geolocation APIfunction getLocation(){ if (navigator.geolocation) { // timeout at 60000 milliseconds (60 seconds) var options = {timeout:60000}; navigator.geolocation.getCurrentPosition( showLocation, errorHandler, options); } else { alert("Sorry, browser does not support geolocation!"); } }
Geolocation API
• Note that– The callback method does not get called
immediately, but when a location is available– The user may have to explicitly permit that a
location is retrieved (privacy protection)– You may wish to include an error handler method
to gracefully handle errors
Geolocation API
• When the callback is called, a position object is provided
• From the position object, we can extract– Latitude– Longitude– Accurary– …(and a bit more)
Geolocation APIfunction handleLocation(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy; // In meters}
• The given accuracy is within a 95 % confidence interval
Geolocation API
• What ”options” are available, and what are they good for?– timeout: how long are we willing to wait for an answer (in
millisecs). Default is infinite– maximumAge: how old a cached location may be, in order
to be acceptable as the ”current” location. Default is 0.– enableHighAccuracy: If more than one ”device” for
obtaining a position is available, will we want the most accurate one. Default is false.
Using Maps
• A very obvious use for a position is to display it on a map
• This is quite easy to do using the Google Map API
• A third-party tool, not part of HTML5 as such
Using Maps
• Steps to use Google Maps– Step 1: Link to the Google Map API, by including
the below line in your HTML document:
<script src="http://maps.google.com/maps/api/js?sensor=true">
Using Maps
• Steps to use Google Maps– Step 2: Given a coordinate (lat/lon) and some
option values, create a Map object
Using Maps// We have a global variable referring to a mapvar map;
// Create a ”Google coordinate”var gLatLon = new google.maps.LatLng(lat,lon);
// Set up the map optionsvar mapOptions = { zoom: 10, center: gLatLon,
mapTypeId: google.maps.MapTypeId.ROADMAP}
// Suppose we have a div in the document, with the Id ”map”var mapDiv = document.getElementById(”map”);
// Now create the actual mapmap = new google.maps.Map(mapDiv, mapOptions);
// All this could go into the handleLocation method...
Using Maps
• Nice, but…where are we?• At the center of the map • Would be nicer if location was more
explicitly indicated• We can do this by adding a marker
Using Maps
• Using a marker requires more code than adding a map…
• Need to specify– The marker position– Some marker options– Some information window options– An event handler for cliking on the marker
• Se book for further details
Using Maps
• More fun with maps:
http://code.google.com/apis/maps/documentation/javascript
Geolocation API
• You can also also the Geolocation API for tracking a position
• We can obviously do this ”manually” by repeated calls of getCurrentPosition
• Somewhat tedious, is ”automated” by using the watchPosition method
Geolocation API
• getCurrentPosition: calls the callback method once, and is done
• watchPosition: calls the callback method whenever the position changes, until…
• …we call the clearWatch method
Geolocation API
• watchPosition takes the same parameters as getCurrentPosition, but returns an int.
• This int is the watch identifier• When we wish to stop the watch, we must call
clearWatch with the watch identifier as argument
Geolocation API
• If you wish to see location tracking in action– On your mobile phone, go to
http://wickedlysmart.com/hfhtml5/chapter5/watchmepan/myLoc.html
– Take a walk