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?