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

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

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