HTML5 Geolocalizacion


Published on

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The following steps are shown in the diagram: A user navigates to a location-aware application in the browser.The application web page loads and requests coordinates from the browser by making a Geolocation function call. The browser intercepts this and requests user permission. Let's assume that the permission is granted.The browser retrieves coordinate information from the device it is running on. For example, the IP address, Wi-Fi, or GPS coordinates. This is an internal function of the browser.The browser sends these coordinates to a trusted external location service, which returns a detailed location that can now be sent back to the host of the HTML5 Geolocation application.
  • The successCallback function parameter tells the browser which function you want called when the location data is made available. This is important because operations such as fetching location data may take a long time to complete. No user wants the browser to be locked up while the location is retrieved, and no developer wants his program to pause indefinitely—especially because fetching the location data will often be waiting on a user to grant permission. The successCallback is where you will receive the actual location information and act on it.However, as in most programming scenarios, it is good to plan for failure cases. It is quite possible that the request for location information may not complete for reasons beyond your control, and for those cases you will want to provide an errorCallback function that can present the user with an explanation, or perhaps make an attempt to try again. While optional, it is recommended that you provide one.Finally, an options object can be provided to the HTML5 Geolocation service to fine-tune the way it gathers data. This is an optional parameter that we will examine later.
  • HTML5 Geolocalizacion

    1. 1. HTML5 Geolocalizacion Rodolfo Finochietti
    2. 2. HTML5 Geolocalizacion
    3. 3. Geolocalizacion• Permite a los usuarios compartir su ubicación• Muestra la posición de un usuario en el mapa• Util para Tagging de contenido (fotos/videos)• Navegación Turn-by-turn• Alertar de puntos de interés• Social networking
    4. 4. Demo
    5. 5. Arquitectura
    6. 6. Informacion de localizacionLa informacion de localizacion consisteen coordendas de latitud y longitud, einformacion de presicion
    7. 7. Informacion de localizacion• Dependiendo del dispositivo, metadata adicional puede ser provista: • Altitud • Velocidad• Si no hay informacion adicional se recibe a null
    8. 8. Fuentes de informacion de localizacion• Un dispositivo puede usar alguna de las siguientes fuentes: • IP Address • Coordinate triangulation • Global Positioning System (GPS) • Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth • GSM or CDMA cell phone IDs • User defined
    9. 9. Privacidad
    10. 10. Usando la API de Geolocalizacion Copyright © 2010, Kaazing Corporation,. All rights reserved.
    11. 11. JavaScript //Checking for browser support: if(navigator.geolocation) { document.getElementById("support").innerHTML = "HTML5 Geolocation is supported."; } else { document.getElementById("support").innerHTML = "HTML5 Geolocation is not supported."; }
    12. 12. Tipos• Hay dos tipos: 1. Por unica vez (getCurrentPosition) 2. Actualizacion de la posicion (watchPosition)
    13. 13. JavaScript //One shot request void getCurrentPosition( in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options); //Access user’s position navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);
    14. 14. JavaScript //Update the UI function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; document.getElementById("latitude").innerHTML = latitude; document.getElementById("longitude").innerHTML = longitude; document.getElementById(“accuracy”).innerHTML = “This location is accurate within “ + accuracy + “ meters.” }
    15. 15. Codigos de error• UNKNOWN_ERROR (code 0)• PERMISSION_DENIED (code 1)• POSITION_UNAVAILABLE (code 2)• TIMEOUT (code 3) Copyright © 2010, Kaazing Corporation,. All rights reserved.
    16. 16. JavaScript //Repeated position updates var watchId = navigator.geolocation.watchPosition( updateLocation, handleLocationError); // do something with the location updates! // ... // Stop receiving location updates navigator.geolocation.clearWatch(watchId); Copyright © 2010, Kaazing Corporation,. All rights reserved.
    17. 17. Integración de con Google Maps• Las coordenadas no son fáciles de descifrar sin verlas en un mapa• Google Maps tiene soporte para HTML5 Geolocation
    18. 18. JavaScript //Show coordinates on a Google Map // Create a Google Map //See Google API for more detail var map = new google.maps.Map2(document.getElementById("map")); function updateLocation(position) { //pass the position to the Google Map and center it map.setCenter(new google.maps.LatLng( position.coords.latitude, position.coords.longitude, 13); // zoom level } navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);
    19. 19. Browser Support• Firefox 3.5• Safari 5.0• Chrome 5.0• Opera 10.6• IE 9+
    20. 20. ¿Preguntas?
    21. 21. rodolfof@lagash.com ¡GRACIAS!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.