HTML5 GEOLOCATION Where am I?

Location-aware apps and websites are all the rage today

Quiz: Geolocation must be done on the ____________

a. Server b. Browser

Remember how a page is delivered

3. Browser renders the page

2. Server responds with that

page

1. Browser requests a page

How does geolocation know where I am?

How does geolocation know where I am?

No, but seriously ... Google Location Services (via Skyhook Wireless) • mac_address is the mac address of the WiFi node. •  signal_strength is current signal strength measured in

dBm. •  age is the number of milliseconds since the WiFi node

was detected. • SSID is the name or ESSID of the WiFi node. GPS Cell towers

Geolocation only works with the user's permission

Geolocation requires these JavaScript steps 1.  Detect if geolocation is supported 2.  Request current position from the user 3.  If if fails, handle the error 4.  If it succeeds, do something with the coordinates

Use the geolocation object to determine browser support if (typeof navigator.geolocation == 'undefined') {! alert("No geolocation");!}!else {! //Do geolocation stuff here!}!

Request the current location from the browser • Uses the async pattern •  navigator.geolocation.getCurrentPosition(success,failure)

If the request fails, handle the problem function failure(error) {! switch(error.code) {! case 1:! alert('Permission denied'); break;! case 2:! alert('Position unavailable'); break;! case 3:! alert('Timed out'); break;! case 4:! alert('Unknown error'); break;! }!}!

If the request succeeds, grab the position from coords.latitude and coords.longitude function success (pos) {! var out = "lat: " + pos.coords.latitude + " lon: " + pos.coords.longitude; console.log(out); }!

The precision is contained in coords.accuracy

•  position.coords.accuracy

Hands on geolocation

Conclusion • Geolocation can be determined with just a few lines of

JavaScript • We determine if it is supported by looking at

browser.geolocation • Get the location with geolocation.getCurrentPosition(a,b) •  Failure gives us one of four failure codes •  Location comes from position.coords.latitude and

position.coords.longitude