Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML 5 Geolocation

3.074 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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 />

×