HTML5 Geolocalizacion

Rodolfo Finochietti

HTML5 Geolocalizacion

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

Demo

Arquitectura

Informacion de localizacion

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

Informacion de localizacion

• Dependiendo del dispositivo, metadata adicional puede ser provista:• Altitud• Velocidad

• Si no hay informacion adicional se recibe a null

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

Privacidad

Usando la API de Geolocalizacion

Copyright © 2010, Kaazing Corporation,. All rights reserved.

//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."; }

JavaScript

Tipos

• Hay dos tipos:1. Por unica vez

(getCurrentPosition)2. Actualizacion de la posicion

(watchPosition)

//One shot requestvoid getCurrentPosition( in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);

//Access user’s positionnavigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);

JavaScript

//Update the UIfunction 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.”}

JavaScript

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.

//Repeated position updatesvar watchId =navigator.geolocation.watchPosition( updateLocation, handleLocationError);

// do something with the location updates!// ... // Stop receiving location updatesnavigator.geolocation.clearWatch(watchId);

JavaScript

Copyright © 2010, Kaazing Corporation,. All rights reserved.

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

//Show coordinates on a Google Map// Create a Google  Map//See Google API for more detailvar 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);

JavaScript

Browser Support

• Firefox 3.5• Safari 5.0• Chrome 5.0• Opera 10.6• IE 9+

¿Preguntas?

rodolfof@lagash.com http://twitter.com/rodolfof

http://shockbyte.net

¡GRACIAS!