HTML 5 Geolocation

2,741 views
2,543 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,741
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML 5 Geolocation

  1. 1. HTML5 Geolocation<br />Scott Ryan March 2011<br />HTML5 Meetup Group<br />
  2. 2. Agenda<br />Geo-location Basics<br />Privacy<br />Error Handling<br />Positioning<br />Fall-Back<br />Mapping<br />
  3. 3. Basics<br />
  4. 4. Geo-location Basics<br />Five Methods<br />Cell Tower Triangulation or Trilateration<br />1 – X Towers Used (Accuracy Varies) ~3000m<br />Quick Startup and lower power consumption<br />No sky view required<br />GPS<br />4 - X Satellites Used of 24 available<br />Slower startup and higher battery consumption<br />Sky view required<br />Better Accuracy ~3m<br />Elevation Possible<br />
  5. 5. Basics<br />Wi fi Triangulation<br />Requires Wi fi Access<br />Higher Battery Consumption<br />IP Lookup<br />Requires IP Access<br />Can be very inaccurate<br />A-GPS<br />Combination of GPS and Land Based System<br />Altitude Accuracy<br />
  6. 6. Cell Tower Techniques<br />CID – Cell tower Id<br />AOA – Angle of Arrival<br />TOA – Time of Arrival<br />TDOA – Time Difference of Arrival<br />RSS – Received Signal Strength<br />Multi path Fingerprint<br />OTDOA – Observed Time Difference of Arrival<br />U-TDOA – Uplink Time Difference Of Arrival<br />
  7. 7. Example<br />Google Maps<br />3 circles<br />Outside Circle (One tower) <br />Inside Circle (multiple tower)<br />Push Pin GPS<br />
  8. 8. Google Maps<br />
  9. 9. Privacy<br />
  10. 10. Privacy<br />Prompt for every domain<br />Cannot bypass via code<br />Non modal and tab specific<br />Display requesting website with help<br />Allow, Don’t Allow and Remember<br />Errors are handled in the error callback<br />
  11. 11. Sample Output<br />
  12. 12.
  13. 13.
  14. 14.
  15. 15. Error Handling<br />
  16. 16. Error Handling<br />Handled in Error Callback<br />Code<br />PERMISSION_DENIED (1)<br />POSITION_UNAVAILABLE (2)<br />TIMEOUT (3)<br />UNKNOWN_ERROR (0)<br />Message<br />
  17. 17. Demo<br />
  18. 18.
  19. 19. Get Position<br />getCurrentPosition(function, error_function,options)<br />Latitude, longitude, altitude (optional)<br />Accuracy<br />Altitude Accuracy(optional)<br />Heading (optional)<br />Speed (optional)<br />timestamp<br />
  20. 20. Options<br />Javascript object<br />enableHighAccuracy<br />Can fail on some phones due to permission<br />Timeout (After permission is handled)<br />maximumAge (caching)<br />
  21. 21. Sample Code<br />function get_position() {<br />vars = document.querySelector('#status');<br />s.innerHTML= "Checking for your location";<br /> if (Modernizr.geolocation) {<br />navigator.geolocation.getCurrentPosition(success_callback,error_callback);<br />} else {<br />alert("No Geo-location Support. Falling back to Gears");<br />}<br />}<br />
  22. 22. Sample Code<br />function error_callback(positionError) {<br /> alert("Error" + positionError.code + " Message "<br />+ positionError.message);<br />}<br />
  23. 23. Sample Code<br />function success_callback(position) {<br />varlatitude = position.coords.latitude;<br />varlongitude = position.coords.longitude;<br />varelevation = position.coords.altitude;<br />varaccuracy = position.coords.accuracy;<br />varaltitudeAccuracy = position.coords.altitudeAccuracy;<br />varheading = position.coords.heading;<br />varspeed = position.coords.speed;<br />vartimestamp = position.timestamp;<br />}<br />
  24. 24. Sample Code<br />function get_accurate_position() {<br /> if (Modernizr.geolocation) {<br />varoptions = { enableHighAccuracy:true,<br /> timeout:20000,maximumAge:300000};<br />navigator.geolocation.getCurrentPosition(success_callback,<br />error_callback,options);<br />} else {<br />alert("No Geo-location Support. Falling back to Gears");<br />}<br />}<br />
  25. 25.
  26. 26. Demo<br />
  27. 27. Sample IP Data<br />
  28. 28. Watch Position<br />Same call as getPosition<br />Returns a number that should be stored<br />Returns position when location changes<br />Device determines sample interval<br />Use number to stop watching<br />ClearWatch(number)<br />
  29. 29. Sample Code<br />function watch_position() {<br />if (Modernizr.geolocation) {<br />watchNumber= navigator.geolocation.watchPosition (success_callback,error_callback);<br />} else {<br /> alert("No Geo-location Support. Falling back to Gears");<br />}<br />localStorage.setItem("watch",watchNumber);<br />}<br />
  30. 30. Sample Code<br />function stop_watch(){<br />varwatchNumber = localStorage.getItem("watch");<br />navigator.geolocation.clearWatch(watchNumber);<br />}<br />
  31. 31. Demo<br />
  32. 32. Fallbacks<br />
  33. 33. Fall Back Alternatives<br />Geo.js<br />Google Gears<br />IP Resolution<br />
  34. 34. Mapping <br />Google<br />Yahoo<br />Open Street Map<br />Microsoft<br />OpenLayers<br />Cloudmade<br />Mapstraction<br />

×