HTML 5 – GeoLocation and Maps

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

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 API function 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 API function 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 API function getLocation() { if (navigator.geolocation) { // timeout at 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 API function 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:

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 map var map; // Create a ”Google coordinate” var gLatLon = new google.maps.LatLng(lat,lon); // Set up the map options var 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 map map = 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:

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 – Take a walk