Download presentation
Presentation is loading. Please wait.
1
Geo Using a device’s location as an input
2
Why Because the user might not know where they are Because typing is the worst on small devices
3
HTML5 Supports a browser’s (navigator) location as a property
4
Test for GEO if(typeof(navigator.geolocation) != 'undefined'){ //do your geo stuff here }else{ //do something else (ask user to enter a zipcode, perhaps?) }
5
Get a Geolocation object var geo = navigator.geolocation; ! You can’t act on geo directly (not a static object/array)
6
Act on the geo object geo.getCurrentPosition(successfx, errorfx); Callback functions
7
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
8
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) }
9
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
10
In Class 1.Locate someone near you with a smart phone 2.Inspect the code at http://www.rpi.edu/~gillw3/websys/geo.html http://www.rpi.edu/~gillw3/websys/geo.html 3.Get it working in your public webspace 4.Test with desktop + mobile clients
11
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
12
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
13
Accuracy geo.getCurrentPosition( displayPosition, displayError, {enableHighAccuracy:true, timeout:10000, maximumAge:60000} );
14
Accuracy Browser might fail in high accuracy mode and succeed in low accuracy mode. If one fails, do you want to fail down?
15
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)
16
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?)
17
In Class Alter http://www.rpi.edu/~gillw3/websys/geo.html to:http://www.rpi.edu/~gillw3/websys/geo.html – 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: http://128.113.124.10/geodemo/?lat=52&lon=78.25&callback=displayresults Output the lat/lon/userID generated on the screen. Jsonp example here: http://www.rpi.edu/~gillw3/websys/jsonp.htmlhttp://www.rpi.edu/~gillw3/websys/jsonp.html
18
Outside Go outside with a mobile device Walk around with your web app open Observe that it is working
19
Lab Call your data from today Plot it on Google maps as a line
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.