Geo Using a device’s location as an input

Why Because the user might not know where they are Because typing is the worst on small devices

HTML5 Supports a browser’s (navigator) location as a property

Test for GEO if(typeof(navigator.geolocation) != 'undefined'){ //do your geo stuff here }else{ //do something else (ask user to enter a zipcode, perhaps?) }

Get a Geolocation object var geo = navigator.geolocation; ! You can’t act on geo directly (not a static object/array)

Act on the geo object geo.getCurrentPosition(successfx, errorfx); Callback functions

Error function errorfx(positionError) { alert("error: " + positionError.code + “ “ + positionError.message); } Error codes: 1: user didn’t share browser’s location 2: location unavailable (browser doesn’t know its location) 3: timeout

Success function successfx (position) { //html proposed std has the following properties: position.coords.latitude (dec degress) position.coords.longitude (dec degress) position.coords.accuracy (meters) }

Ok… What do you do after you know the client’s browser location? 1)Call home (ajax) and get some location specific info 2)Append location data to links 3)Send user geo data ahead of time (json), use position data to sort this info

In Class 1.Locate someone near you with a smart phone 2.Inspect the code at Get it working in your public webspace 4.Test with desktop + mobile clients

In Practice It can take a while to get the browser location – Provide the visitor with something (spinning wheel, &c) to let them know things are processing If you need high accuracy – There are additional parameters for that – You might need to check back a few times until the phone gets a good fix on satellites

Accuracy Inform the browser how new the data needs to be (clears the cache) maximumAge Tells the browser to get a GPS fix if it can (rather than some other means it may have) enableHighAccuracy Tells the browser how long you are willing to wait for info timeout

Accuracy geo.getCurrentPosition( displayPosition, displayError, {enableHighAccuracy:true, timeout:10000, maximumAge:60000} );

Accuracy Browser might fail in high accuracy mode and succeed in low accuracy mode. If one fails, do you want to fail down?

Accuracy If the browser succeeds, it might report an accuracy lower than your needs On success, if position.coords.accuracy is lower than a threshold Retry N times (3?) Use setTimeout to try again (greater number of ms than you set timeout)

Doing something useful App that reports name/info of nearest building – If you use building centers: it is possible to be closer to the center of one building when you are standing next to the edge of another! >> bad time – GPS gets super terrible indoors (and whenever there is no clear view of the sky) Use other plans indoors (QR codes?)

In Class Alter to: – After the first success, get the geo location ever 30 seconds – Every time a location is returned, use Ajax / JSONP to call the following service: Output the lat/lon/userID generated on the screen. Jsonp example here:

Outside Go outside with a mobile device Walk around with your web app open Observe that it is working

Lab Call your data from today Plot it on Google maps as a line