PARTE 4

GEOLOCALIZACIN
La geolocalizacin es un servicio muy til para los dispositivos mviles, ya que podemos ofrecer al
usuario servicios personalizados a su localizacin. Esta localizacin se calcula por varios mtodos:
desde un componente hardware especfico, el GPS, hasta la triangulacin de antenas mviles o la
posicin de puntos de acceso WiFi. De esta forma, conseguimos una localizacin muy precisa del
usuario, y podemos ofrecerle desde restaurantes cercanos hasta videojuegos basados en localizacin.
 4.1 Geolocalizacin /
GEOLOCALIZACIN

Para empezar, partimos de la plantilla que venimos usando que

tiene preparado un esqueleto de la aplicacin en HTML / CSS, y las
libreras bsicas cargadas: zepto, fastclick y hammer.

Hacemos la conexin con el dispositivo.

GPS sistema basado en satlite que permite
Vamos a aadir el plugin de geolocalizacin para cordova. geolocalizar un dispositivo

Vamos a pintar en pantalla las coordenadas (latitud, longitud)
donde se encuentra el usuario.
Para ello usamos el mtodo getCurrentPosition que recibe
como parmetros las funciones a ejecutar si la posicin se obtuvo
con xito, o si no fue as.
En la funcin de xito nos llega como parmetros un objeto
position con mucha informacin. As, pintaremos en la pantalla
un mensaje con las coordenadas que encontramos en position.
coords.
Triangulacin mtodo de geolocalizacin basado en la
distancia a las antenas a las que se conecta
un terminal mvil para acceder a la red
Geolocalizacin posicin geogrfica de un elemento, en
nuestro caso un terminal mvil
Latitude del ingls latitud geogrfica
Longitude del ingls longitud geogrfica
Current position del ingls posicin actual
 4.2 Geolocalizacin /
MAPAS CON LEAFLET

Ahora vamos a meter el uso de mapas para mostrar la informacin
de localizacin. Para ello vamos a usar la librera leaflet1 que nos
facilita el uso de mapas.
Importamos la librera JS, el CSS de leaflet y las imgenes en la
carpeta css.
Con el token de mapbox ya podemos pintar el mapa centrado en
una localizacin concreta. Por ejemplo Londres.

Finalmente usaremos las coordenadas de getcurrentPosition

para centrar el mapa en esa posicin
Para esto, adems, necesitaremos un proveedor de tiles (imgenes
usadas para dibujar el mapa). En leaflet sugieren el uso de mapbox
como proveedor de tiles. As que nos creamos una cuenta, y
accedemos a la nuestra informacin para consultar nuestro token
de acceso (medida de seguridad).

Leaflet librera que ayuda a pintar mapas en una web

Tile pequea imagen usada para pintar un mapa

(1) Web de Leaflet http://leafletjs.com/ Mapbox librera que ofrece tiles para nuestro mapa
 4.3 Geolocalizacin /
MARCADORES EN UN MAPA

En nuestro mapa de leaflet podemos crear marcadores con la

funcin marker con la posicin de dnde queremos ponerlo. Y
aadirles un texto en un pop-up, usando la funcin de bindPopUp
sobre el marcador.

Lo usamos para poner un marcador y un popup con estoy aqu en

nuestra posicin.

Finalmente, para poder crear marcadores sobre una posicin

concreta del mapa vamos a detectar los eventos click (que aqu son
tap) para pintar un marcador en esa posicin. Adems, podemos
aadir un texto al popup con la informacin de latitud y longitud
del punto seleccionado.

(2) Repositorio de la app https://github.com/h4ckademy/mooc-

Marker marcador en un mapa
mobile-maps
Popup componente grfico que puede abrirse y cerrarse y
(3) Leaflet http://leafletjs.com

tiene un contenido HTML que puede ser un texto
(4) Mapbox https://www.mapbox.com