Your SlideShare is downloading. ×
  • Like
04 geolocation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

04 geolocation



  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. HTML5 GEOLOCATIONWhere am I?
  • 2. Location-aware apps and websitesare all the rage today
  • 3. Quiz: Geolocation must be done onthe ____________a. Serverb. Browser
  • 4. Remember how a page is delivered1. Browser 2. Serverrequests a respondspage with that page3.Browserrendersthe page
  • 5. How does geolocation know where I am?
  • 6. How does geolocation know where I am?
  • 7. No, but seriously ...Google Location Services (via Skyhook Wireless)•  mac_address is the mac address of the WiFi node.•  signal_strength is current signal strength measured in dBm.•  age is the number of milliseconds since the WiFi node was detected.•  SSID is the name or ESSID of the WiFi node.GPSCell towers
  • 8. Geolocation onlyworks with the userspermission
  • 9. Geolocation requires these JavaScriptsteps1.  Detect if geolocation is supported2.  Request current position from the user3.  If if fails, handle the error4.  If it succeeds, do something with the coordinates
  • 10. Use the geolocation object to determinebrowser supportif (typeof navigator.geolocation == undefined) {! alert("No geolocation");!}!else {! //Do geolocation stuff here!}!
  • 11. Request the current location from thebrowser•  Uses the async pattern•  navigator.geolocation.getCurrentPosition(success,failure)
  • 12. If the request fails, handle the problemfunction failure(error) {! switch(error.code) {! case 1:! alert(Permission denied); break;! case 2:! alert(Position unavailable); break;! case 3:! alert(Timed out); break;! case 4:! alert(Unknown error); break;! }!}!
  • 13. If the request succeeds, grab the positionfrom coords.latitude and coords.longitudefunction success (pos) {! var out = "lat: " + pos.coords.latitude +
 " lon: " + pos.coords.longitude;
  • 14. The precision iscontained incoords.accuracy•  position.coords.accuracy
  • 15. Hands on geolocation
  • 16. Conclusion•  Geolocation can be determined with just a few lines of JavaScript•  We determine if it is supported by looking at browser.geolocation•  Get the location with geolocation.getCurrentPosition(a,b)•  Failure gives us one of four failure codes•  Location comes from position.coords.latitude and position.coords.longitude