1. HTML5 Geolocalizacion
Rodolfo Finochietti

2. HTML5 Geolocalizacion

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. Demo

5. Arquitectura

6. Informacion de localizacion
La informacion de localizacion consiste
en coordendas de latitud y longitud, e
informacion de presicion

7. Informacion de localizacion
• Dependiendo del dispositivo, metadata
adicional puede ser provista:
• Altitud
• Velocidad
• Si no hay informacion adicional se recibe
a null

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. Privacidad

10. Usando la API de Geolocalizacion
Copyright © 2010, Kaazing Corporation,. All rights reserved.

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. Tipos
• Hay dos tipos:
1. Por unica vez
(getCurrentPosition)
2. Actualizacion de la posicion
(watchPosition)

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. 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. 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. 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. 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. 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. Browser Support
• Firefox 3.5
• Safari 5.0
• Chrome 5.0
• Opera 10.6
• IE 9+

20. ¿Preguntas?

21. rodolfof@lagash.com
http://twitter.com/rodolfof
http://shockbyte.net
¡GRACIAS!