HTML 5 Geolocation

34
HTML5 Geolocation Scott Ryan March 2011 HTML5 Meetup Group

description

An introduction to HTML5 Geolocation support as well as a general overview of Geolocation and Mobile Application Development implications

Transcript of HTML 5 Geolocation

Page 1: HTML 5 Geolocation

HTML5 Geolocation

Scott Ryan March 2011HTML5 Meetup Group

Page 2: HTML 5 Geolocation

AgendaGeo-location Basics

Privacy

Error Handling

Positioning

Fall-Back

Mapping

Page 3: HTML 5 Geolocation

Basics

Page 4: HTML 5 Geolocation

Geo-location Basics

Five MethodsCell Tower Triangulation or Trilateration

1 – X Towers Used (Accuracy Varies) ~3000m

Quick Startup and lower power consumption

No sky view required

GPS4 - X Satellites Used of 24 available

Slower startup and higher battery consumption

Sky view required

Better Accuracy ~3m

Elevation Possible

Page 5: HTML 5 Geolocation

BasicsWi fi Triangulation

Requires Wi fi Access

Higher Battery Consumption

IP LookupRequires IP Access

Can be very inaccurate

A-GPSCombination of GPS and Land Based System

Altitude Accuracy

Page 6: HTML 5 Geolocation

Cell Tower Techniques

CID – Cell tower Id

AOA – Angle of Arrival

TOA – Time of Arrival

TDOA – Time Difference of Arrival

RSS – Received Signal Strength

Multi path Fingerprint

OTDOA – Observed Time Difference of Arrival

U-TDOA – Uplink Time Difference Of Arrival

Page 7: HTML 5 Geolocation

ExampleGoogle Maps

3 circlesOutside Circle (One tower)

Inside Circle (multiple tower)

Push Pin GPS

Page 8: HTML 5 Geolocation

Google Maps

Page 9: HTML 5 Geolocation

Privacy

Page 10: HTML 5 Geolocation

PrivacyPrompt for every domain

Cannot bypass via code

Non modal and tab specific

Display requesting website with help

Allow, Don’t Allow and Remember

Errors are handled in the error callback

Page 11: HTML 5 Geolocation

Sample Output

Page 12: HTML 5 Geolocation
Page 13: HTML 5 Geolocation
Page 14: HTML 5 Geolocation
Page 15: HTML 5 Geolocation

Error Handling

Page 16: HTML 5 Geolocation

Error HandlingHandled in Error Callback

CodePERMISSION_DENIED (1)

POSITION_UNAVAILABLE (2)

TIMEOUT (3)

UNKNOWN_ERROR (0)

Message

Page 17: HTML 5 Geolocation

Demo

Page 18: HTML 5 Geolocation
Page 19: HTML 5 Geolocation

Get PositiongetCurrentPosition(function, error_function,options)

Latitude, longitude, altitude (optional)

Accuracy

Altitude Accuracy(optional)

Heading (optional)

Speed (optional)

timestamp

Page 20: HTML 5 Geolocation

OptionsJavascript object

enableHighAccuracyCan fail on some phones due to permission

Timeout (After permission is handled)

maximumAge (caching)

Page 21: HTML 5 Geolocation

Sample Codefunction get_position() {

var s = document.querySelector('#status');s.innerHTML = "Checking for your location";if (Modernizr.geolocation) {

navigator.geolocation.getCurrentPosition(success_callback,error_callback);

} else {alert("No Geo-location Support. Falling

back to Gears");}

}

Page 22: HTML 5 Geolocation

Sample Codefunction error_callback(positionError) {

alert("Error" + positionError.code + " Message "

+ positionError.message);}

Page 23: HTML 5 Geolocation

Sample Codefunction success_callback(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

var elevation = position.coords.altitude;

var accuracy = position.coords.accuracy;

var altitudeAccuracy = position.coords.altitudeAccuracy;

var heading = position.coords.heading;

var speed = position.coords.speed;

var timestamp = position.timestamp;

}

Page 24: HTML 5 Geolocation

Sample Codefunction get_accurate_position() {

if (Modernizr.geolocation) {

var options = { enableHighAccuracy:true,

timeout:20000,maximumAge:300000};

navigator.geolocation.getCurrentPosition(success_callback,

error_callback,options);

} else {

alert("No Geo-location Support. Falling back to Gears");

}

}

Page 25: HTML 5 Geolocation
Page 26: HTML 5 Geolocation

Demo

Page 27: HTML 5 Geolocation

Sample IP DataF 39.530002

4-104.9121483

56

O 39.529999 -104.9120898

52

S 39.52988602714286

-104.91237721714286

80

A 39.5299819

-104.911786

Page 28: HTML 5 Geolocation

Watch PositionSame call as getPosition

Returns a number that should be stored

Returns position when location changesDevice determines sample interval

Use number to stop watchingClearWatch(number)

Page 29: HTML 5 Geolocation

Sample Codefunction watch_position() {

if (Modernizr.geolocation) {

watchNumber = navigator.geolocation.watchPosition(success_callback,error_callback);

} else {

alert("No Geo-location Support. Falling back to Gears");

}

localStorage.setItem("watch",watchNumber);

}

Page 30: HTML 5 Geolocation

Sample Codefunction stop_watch(){ var watchNumber = localStorage.getItem("watch"); navigator.geolocation.clearWatch(watchNumber);}

Page 31: HTML 5 Geolocation

Demo

Page 32: HTML 5 Geolocation

Fallbacks

Page 33: HTML 5 Geolocation

Fall Back Alternatives

Geo.js

Google Gears

IP Resolution