![Page 1: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/1.jpg)
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
![Page 2: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/2.jpg)
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
![Page 3: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/3.jpg)
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
![Page 4: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/4.jpg)
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
![Page 5: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/5.jpg)
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
![Page 6: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/6.jpg)
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
![Page 7: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/7.jpg)
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
![Page 8: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/8.jpg)
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
![Page 9: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/9.jpg)
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
![Page 10: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/10.jpg)
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
![Page 11: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/11.jpg)
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>
![Page 12: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/12.jpg)
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];
![Page 13: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/13.jpg)
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
![Page 14: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/14.jpg)
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
![Page 15: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/15.jpg)
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
![Page 16: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/16.jpg)
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];
![Page 17: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/17.jpg)
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
![Page 18: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/18.jpg)
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
![Page 19: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/19.jpg)
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
![Page 20: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/20.jpg)
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
![Page 21: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/21.jpg)
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
![Page 22: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/22.jpg)
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];
![Page 23: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/23.jpg)
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
![Page 24: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/24.jpg)
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
![Page 25: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/25.jpg)
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]); }}];
![Page 26: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/26.jpg)
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]); } } }];
![Page 27: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/27.jpg)
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
![Page 28: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/28.jpg)
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
![Page 29: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/29.jpg)
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];
![Page 30: Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2) Añadimos un componente Map View a un View Controller. • Por Interface builder](https://reader033.vdocumento.com/reader033/viewer/2022042606/5f657e782dd833002a5275df/html5/thumbnails/30.jpg)
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
¿Preguntas?
30