Your SlideShare is downloading. ×
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,199
views

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,199
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
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
    Scott Ryan March 2011
    HTML5 Meetup Group
  • 2. Agenda
    Geo-location Basics
    Privacy
    Error Handling
    Positioning
    Fall-Back
    Mapping
  • 3. Basics
  • 4. Geo-location Basics
    Five Methods
    Cell Tower Triangulation or Trilateration
    1 – X Towers Used (Accuracy Varies) ~3000m
    Quick Startup and lower power consumption
    No sky view required
    GPS
    4 - X Satellites Used of 24 available
    Slower startup and higher battery consumption
    Sky view required
    Better Accuracy ~3m
    Elevation Possible
  • 5. Basics
    Wi fi Triangulation
    Requires Wi fi Access
    Higher Battery Consumption
    IP Lookup
    Requires IP Access
    Can be very inaccurate
    A-GPS
    Combination of GPS and Land Based System
    Altitude Accuracy
  • 6. 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
  • 7. Example
    Google Maps
    3 circles
    Outside Circle (One tower)
    Inside Circle (multiple tower)
    Push Pin GPS
  • 8. Google Maps
  • 9. Privacy
  • 10. Privacy
    Prompt 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
  • 11. Sample Output
  • 12.
  • 13.
  • 14.
  • 15. Error Handling
  • 16. Error Handling
    Handled in Error Callback
    Code
    PERMISSION_DENIED (1)
    POSITION_UNAVAILABLE (2)
    TIMEOUT (3)
    UNKNOWN_ERROR (0)
    Message
  • 17. Demo
  • 18.
  • 19. Get Position
    getCurrentPosition(function, error_function,options)
    Latitude, longitude, altitude (optional)
    Accuracy
    Altitude Accuracy(optional)
    Heading (optional)
    Speed (optional)
    timestamp
  • 20. Options
    Javascript object
    enableHighAccuracy
    Can fail on some phones due to permission
    Timeout (After permission is handled)
    maximumAge (caching)
  • 21. Sample Code
    function get_position() {
    vars = 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");
    }
    }
  • 22. Sample Code
    function error_callback(positionError) {
    alert("Error" + positionError.code + " Message "
    + positionError.message);
    }
  • 23. Sample Code
    function success_callback(position) {
    varlatitude = position.coords.latitude;
    varlongitude = position.coords.longitude;
    varelevation = position.coords.altitude;
    varaccuracy = position.coords.accuracy;
    varaltitudeAccuracy = position.coords.altitudeAccuracy;
    varheading = position.coords.heading;
    varspeed = position.coords.speed;
    vartimestamp = position.timestamp;
    }
  • 24. Sample Code
    function get_accurate_position() {
    if (Modernizr.geolocation) {
    varoptions = { enableHighAccuracy:true,
    timeout:20000,maximumAge:300000};
    navigator.geolocation.getCurrentPosition(success_callback,
    error_callback,options);
    } else {
    alert("No Geo-location Support. Falling back to Gears");
    }
    }
  • 25.
  • 26. Demo
  • 27. Sample IP Data
  • 28. Watch Position
    Same call as getPosition
    Returns a number that should be stored
    Returns position when location changes
    Device determines sample interval
    Use number to stop watching
    ClearWatch(number)
  • 29. Sample Code
    function 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);
    }
  • 30. Sample Code
    function stop_watch(){
    varwatchNumber = localStorage.getItem("watch");
    navigator.geolocation.clearWatch(watchNumber);
    }
  • 31. Demo
  • 32. Fallbacks
  • 33. Fall Back Alternatives
    Geo.js
    Google Gears
    IP Resolution
  • 34. Mapping
    Google
    Yahoo
    Open Street Map
    Microsoft
    OpenLayers
    Cloudmade
    Mapstraction