Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG

© Juan Quemada, DIT, UPM
Geolocalización en HTML5
1
Juan Quemada, DIT, UPM

HTML5 puede soportar geolocalización
n En todo tipo de clientes
w PCs, móviles tabletas, .....
El interfaz de geolocaclización
n da acceso tambien a otros sensores
w Brujula, acelerometro, .....
Geolocalización y Sensores
2

La geolocalización se realiza siguiendo jerarquia de consultas
n GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .....
w Se devuelve la respuesta más precisa
La geolocalización está accesible en del objeto navigator.geolocation
n con método getCurrentPosition(successFunction, errorFunction)
w Permite conocer
n Latitud y longitud en formato decimal
n Altitud y precisión de la altitud
n Dirección y velocidad
Norma y tutoriales
n http://dev.w3.org/geo/api/spec-source.html
n http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
n http://code.google.com/apis/maps/index.html
OJO! Geolocalización puede no funcionar por restricciones de seguridad
n Usar el navegador Firefox para probar los ejemplos geolocalizados en local
Geolocalización
3

<!DOCTYPE html>
<html>
<head>
<title>Example of W3C Geolocation API</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
} else { alert('Geolocation is not supported in this browser.'); }
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}
function errorFunction(position) { alert('Error!'); }
</script>
</head>
<body>
<p>If your browser supports Geolocation, you should get an alert with your coordinates.</p>
<p>Read the <a href="http://dev.opera.com">Dev.Opera</a> article <a
href="http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/">"How
to use the W3C Geolocation API"</a>.
</body>
</html> © Juan Quemada, DIT, UPM
Ejemplo
Geolocation
4

Aplicación HTML5 geolocalizada en
Google Maps
5

Geolocalización con gmaps.js
Aplicacion de geolocalización
n Carga un mapa centrado en nuestra posición
w que se indica con un marcador
Usamos librería gmaps.js para acceso a Google Maps
n librería muy potente y sencilla de utilizar
w http://hpneo.github.io/gmaps/
n Se recomienda consultar documentación y ejemplos
n La librería de Google es bastante mas compleja
Se añade al mapa un manejador de eventos click/tap
n que calcula la ruta hasta el punto indicado
6

Geo-mapa
7

Geo-mapa
8

Geo-mapa
9

10
Estilo CSS multi-terminal

HTML5 SVG: Scalable Vector
Graphics
11

Formato de representación de gráficos vectoriales
n Pueden cambiar de tamaño sin perdida de calidad
Recursos
n Galeria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject
n Editor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
n Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG
n Tutorial: http://www.w3schools.com/svg/
SVG: Scalable Vector Graphics
http://commons.wikimedia.org/wiki/File:Compass.svg
http://commons.wikimedia.org/wiki/SVG_examples
12
© Juan Quemada, DIT, UPMJuan Quemada, DIT, UPM

Ejemplo “Ajuste SVG”
“Ajuste SVG” ilustra como reescalar una imagen SVG
n Las imagenes en SVG reescalan sin perder calidad
w porque son gráficos vectoriales
w tutorial: http://www.w3schools.com/svg/
n Las imágenes GIT, JPEG o PNG no reescalan bien
w porque tienen una resolución determinada
Esta WebApp tiene 2 botones: “+” y “-”
Cada vez que pulsamos uno de estos botones
n el tamaño de la imagen debe aumentar o disminuir un 10%
w según pulsemos “+” y “-”
13

Ejemplo SVG
14

Ejempo “Reloj SVG”
“Reloj SVG” genera un reloj sencillo con SVG
n El reloj se compone de
w Un círculo negro
w Tres lineas para las manecillas del reloj
SVG puede animarse con javaScript
n modificando la representación DOM del reloj
w Versión 1: las manecillas se mueven con transform
w https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
w Version 2: Calcula las coordenadas de las manecillas
Se añade estilo CSS
n Mejora el aspecto y adapta al tamaño de la pantalla
15

Reloj SVG
16

SVG: Reloj animado
con “transform”
17

Animar manecillas con coordenadas
Para animar las manecillas del reloj
n se incluye un script que cada segundo
w recalcula las coordenadas exteriores
n de las manecillas del reloj
n El secundero tiene una longitud de 50 pixels
n El minutero tiene una longitud de 40 pixels
n La manecilla horaria de 30 pixels
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
n x2(tiempo, unidades_por_vuelta, x1, radio)
n y2(tiempo, unidades_por_vuelta, y1, radio)
18

SVG: Reloj animado
con coordenadas
19

Relojes con “estilo”
Usando CSS e imágenes se pueden diseñar
n Las capturas muestran pequeños cambios de diseño
w que cambian muy significativamente la apariencia del
reloj
n Hacer clic en estos URLs para verlos
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/09-clock_CSS.htm
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_a.html
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_b.htm
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_c.htm
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_d.htm
20

SVG: Reloj con estilo CSS
21

Los objetos SVG se pueden definir también como objetos externos en XML
n Para importarlos con:
w <img>, <object>, <embed>, <iframe>
n Tutorial: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html
Objetos SVG
22
© Juan Quemada, DIT, UPMJuan Quemada, DIT, UPM

Final del tema
Muchas gracias!
23

Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG

Más contenido relacionado

Destacado (20)

Similar a Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG (20)

Último (20)

Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG