Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-13 Depto. Ciencia de la Computación e IA

Sensores de los dispositivos

Sesión 4: Mapas en iOS

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Índice de contenidos• Introducción• Componente Map View• Implementación

• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso

2

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Introducción• Objetivos: • Incorporar nuevas funcionalidades a la app• Mejorar la experiencia de usuario

• iOS 5 y anterior -> Mapas de Google (servicios de Google)• iOS 6 y posterior -> Mapas de Apple (servicios de Apple y

TomTom)• Disponible framework completo: MapKit.framework

3

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Características principales• Implementación 100% nativa.• Principales funcionalidades:• Geolocalización integrada.• Anotaciones.• Capas.• Diferentes tipos de mapas (clásico, satélite, híbrido).• Búsqueda de puntos de interés (iOS 6.1+)

4

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Nativo vs servicio externo

5

Apple Maps Google Maps

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Nativo vs servicio externo• Decisión del desarrollador: analizar ventajas e inconvenientes

según requerimientos.

• Servicios externos• Gratuitos: Google Maps (limitaciones), Open Street Maps• Pago: Map Box

• Opción interesante: combinar el uso de nativo con servicios externos.• Imágenes (tiles) de Apple Maps (nativo)• Datos de Google (servicio externo, servicios web)• Funcionalidades extra (servicio externo).

6

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Nativo• API muy sencilla de usar y bien documentada.• Fallos (a veces muy grandes) en los datos de los mapas.• Componente propio• Incorporación sencilla a un proyecto XCode.

7

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Servicio externo• Dependencia de otro proveedor de mapas puede ser

problemático en un futuro (se puede dejar de dar soporte...).• Probablemente pocos fallos en datos.• Implementación propia• ¿Uso de un componente web, WebView?

• Funcionalidades extra• Google Maps: Street View• Map Box: personalización muy avanzada

8

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Índice de contenidos• Introducción• Componente Map View• Implementación

• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso

9

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Map View: Características• Opción nativa: incluido en el sistema iOS• Framework propio: MapKit.framework• Buena documentación• Fácil de incorporar a una aplicación• Personalización sencilla.

• Incluido en Interface Builder.• Funcionalidades en la API:• Incorporar anotaciones• Incorporar capas al mapa.• Geolocalización incluida (posición actual).• Otras...

• Esquema de uso: protocolo-delegado.

10

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Map View: Implementación (1)• 1) Incluir framework MapKit.framework al proyecto.• 2) Añadimos un componente Map View a un View Controller.• Por Interface builder (drag&drop)• Por código:

• 3) Añadimos la directiva import al principio del fichero:

• 4) La controladora implementa los métodos del protocolo MKMapViewDelegate:

11

MKMapView  *mapa  =  [[MKMapView  alloc]  init];

#import  <MapKit/MapKit.h>

@interface  ViewController  :  UIViewController  <MKMapViewDelegate>

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Map View: Implementación (2)• Personalizaciones más comunes:• Mostrar posición actual (uso de GPS):

• Cambiar el tipo de mapa:

• Zoom en región dada por coordenadas y distancia:

12

self.mapView.showsUserLocation = YES;

self.mapView.mapType = MKMapTypeStandard;

MKCoordinateRegion  region  =  MKCoordinateRegionMakeWithDistance(coordenadas,  1000,  1000);  [self.mapView  setRegion:region];  

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Índice de contenidos• Introducción• Componente Map View• Implementación

• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso

13

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Anotaciones• Objetivo: Mostrar puntos destacados en el mapa.• Número ilimitado de anotaciones• A más anotaciones -> más carga.

• No mostrar anotaciones innecesarias.• Mostrar sólo las indispensables

• Idea: agrupar anotaciones en una sóla según el zoom del mapa.• Uso de librerias externas.

• Funcionalidades de la anotación:• Navegación a otra vista.• Mostrar información en detalle sobre el punto.• Mostrar posición actual.

• Personalizar las anotaciones -> mejora la experiencia de usuario.

14

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Anotaciones• Clases: • MKAnnotation: Implementa los métodos necesarios para la

implementación de las anotaciones.

• MKAnnotationView: Vista de la anotación. Incluye imagen.

15

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Anotaciones: Implementación• 1) Crear clase propia que implemente el protocolo MKAnnotation

• 2) Implementamos los métodos requeridos por el protocolo.

• 3) Creamos una anotación según unas coordenadas.

• 4) Añadimos la anotación al mapa:

16

CustomAnnotation  *customAnnotation  =  [[CustomAnnotation  alloc]  initWithCoordinate:coordenadas];

[self.mapView  addAnnotation:customAnnotation];

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Anotaciones• Anotación por defecto (pin) en mapa:

17

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Anotaciones: Personalización• Método del protocolo MKMapViewDelegate:

18

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Índice de contenidos• Introducción• Componente Map View• Implementación

• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso

19

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Capas• Objetivo: destacar una región determinada del mapa.

20

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Capas• Clases: • MKOverlay: Implementa los métodos necesarios para la

implementación de las capas.• MKOverlayView: Vista de la capa. Incluye la imagen que se

mostrará sobre el mapa.

• Definir una clase que implemente el protocolo MKOverlay

• Definir una clase que herede de MKOverlayView• Implementar el método drawMapRect:zoomScale:inContext

21

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Capas• Uso:• 1) Definir un objeto MKOverlay.• 2) Añadir el objeto MKOverlay al mapa:

• 3) Implementar el método mapView:viewForOverlay: del protocolo MKMapViewDelegate que devolverá un objeto de la clase MKOverlayView.

• (*) La clase MapOverlay implementa el protocolo MKOverlay.

22

MapOverlay  *  mapOverlay  =  [[MapOverlay  alloc]  init];

[self.mapView  addOverlay:mapOverlay];

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Índice de contenidos• Introducción• Componente Map View• Implementación

• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso

23

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Servicios de geocodificación• Servicios web nativos e incluidos en el SDK de iOS.• Funcionalidades:• Obtener datos sobre direcciones postales a partir de unas

coordenadas determinadas. -> Geocodificación inversa.• Obtener posiciones (coordenadas) a partir de una dirección postal

determinada. -> Geocodificación común.

• Usos:• Búsqueda de sitios en un mapa a partir de una dirección concreta.• Mostrar la situación (calle, localidad...) actual en el mapa.• etc...

24

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Servicios de geocodificación• Framework: CoreLocation.framework• Clase: CLGeocoder

• Ejemplo geocodificación común:

25

NSString  *address  =  @"Avda.  General  Marvá,  20,  Alicante";          CLGeocoder  *geocoder  =  [[CLGeocoder  alloc]  init];[geocoder  geocodeAddressString:address    completionHandler:^(NSArray  *placemarks,  NSError  *error)  {        if  ([placemarks  count]  >  0)  {                CLPlacemark  *placemark  =  [placemarks  objectAtIndex:0];                                  NSLog(@"Lugar  encontrado:  %@",  [placemark  description]);        }}];

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Servicios de geocodificación• Ejemplo geocodificación inversa:

26

CLLocationCoordinate2D  coordinates  =  CLLocationCoordinate2DMake(38.362404,  -­‐0.411748);

CLLocation *location = [[CLLocation alloc] initWithLatitude:coordinates.latitude longitude:coordinates.longitude];          

CLGeocoder  *geocoder  =  [[CLGeocoder  alloc]  init];[geocoder  reverseGeocodeLocation: location      completionHandler:^(NSArray  *placemarks,  NSError  *error){                                                        if(!error){                                                                  for(CLPlacemark  *placemark  in  placemarks){                                NSLog(@"%@",[placemark  description]);                                                                            }                }                                      }];

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Índice de contenidos• Introducción• Componente Map View• Implementación

• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso

27

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Navegación paso a paso• Funcionalidad similar a la de un GPS

común (TomTom, Navigon...).

• Disponible a partir de iOS 6.

• Navegación por voz.

• API disponible muy sencilla de usar.

28

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

Navegación paso a paso• Ejemplo de uso:

29

MKMapItem  *mapItem1  =  [[MKMapItem  alloc]  initWithPlacemark:placemark];                NSArray  *mapItems  =  @[mapItem1];  //  Puntos  de  navegación  NSDictionary  *options  =  @{      MKLaunchOptionsDirectionsModeKey:    MKLaunchOptionsDirectionsModeDriving,

 MKLaunchOptionsMapTypeKey:[NSNumber  numberWithInteger:MKMapTypeSatellite],

       MKLaunchOptionsShowsTrafficKey:YES};  //  Lanzamos  la  aplicación  de  mapas[MKMapItem  openMapsWithItems:mapItems  launchOptions:options];

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas

¿Preguntas?

30