Your SlideShare is downloading. ×
0
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
HTML 5 Geolocation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 5 Geolocation

2,278

Published on

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

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,278
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
63
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 Geolocation<br />Scott Ryan March 2011<br />HTML5 Meetup Group<br />
  • 2. Agenda<br />Geo-location Basics<br />Privacy<br />Error Handling<br />Positioning<br />Fall-Back<br />Mapping<br />
  • 3. Basics<br />
  • 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. 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. 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. Example<br />Google Maps<br />3 circles<br />Outside Circle (One tower) <br />Inside Circle (multiple tower)<br />Push Pin GPS<br />
  • 8. Google Maps<br />
  • 9. Privacy<br />
  • 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. Sample Output<br />
  • 12.
  • 13.
  • 14.
  • 15. Error Handling<br />
  • 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. Demo<br />
  • 18.
  • 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. 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. 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. Sample Code<br />function error_callback(positionError) {<br /> alert("Error" + positionError.code + " Message "<br />+ positionError.message);<br />}<br />
  • 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. 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.
  • 26. Demo<br />
  • 27. Sample IP Data<br />
  • 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. 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. Sample Code<br />function stop_watch(){<br />varwatchNumber = localStorage.getItem("watch");<br />navigator.geolocation.clearWatch(watchNumber);<br />}<br />
  • 31. Demo<br />
  • 32. Fallbacks<br />
  • 33. Fall Back Alternatives<br />Geo.js<br />Google Gears<br />IP Resolution<br />
  • 34. Mapping <br />Google<br />Yahoo<br />Open Street Map<br />Microsoft<br />OpenLayers<br />Cloudmade<br />Mapstraction<br />

×