MapKit na prática: Desenvolvendo um aplicativo iOS que exibe Pontos de Interesse (POIs)

1. Juliana Chahoud! @jchahoud

2. Juliana Chahoud

3. Aplicações com mapas • Essenciais nos dispositivos móveis • MapKit: Framework que permite trabalhar com mapas em iOS • Alguns apps que usam o MapKit:

4. Quem fornece dados nos mapas da Apple? ! • http://gspa21.ls.apple.com/html/ attribution.html • TomTom • DigitalGlobe • Waze • Yelp • Diversos outros…

5. Suporte para: Annotations • Marcações no mapa

6. Overlays • "Desenhar" camadas no mapa

7. 3D e visão de satélite • Tipos podem ser padrão, satélite ou híbridos

8. Rotas • Suporta rotas por automóveis ou a pé

9. Buscas baseadas em mapa • Buscas por endereços, pontos de interesse… • Veremos como montar um app que faz busca por pontos de interesse

10. O que preciso para começar? • Habilitar MapKit Framework • Importar o framework para utilização: import MapKit

11. Xcode 6

12. Habilitando o MapKit • Em target -> Capabilities: habilitar Maps

13. MKMapView • Exibe os mapas e permite manipulação dos mesmos

14. Outlet e delegate

15. Tipos de mapa ! ! ! • Pode ser alterado via código: ! ! self.mapView.mapType = MKMapType.Standard ! self.mapView.mapType = MKMapType.Satellite ! self.mapView.mapType = MKMapType.Hybrid

16. Elementos do Mapa • Coordenadas: latitude e longitude de um local no mapa ! let tdcLocation:CLLocationCoordinate2D = CLLocationCoordinate2DMake(-23.600463,-46.674605) • Região: área do mapa ! self.mapView.region = MKCoordinateRegionMakeWithDistance(tdcLocation, 1000, 1000)

17. Mostrar localização do usuário • Passo 1: Adicionar a chave NSLocationWhenInUseUsageDescription no plist • Permite descrever o motivo pelo qual a localização do usuário é necessária

18. Mostrar localização do usuário • Passo 2: É preciso solicitar autorização: ! self.locationManager.requestWhenInUseAuthorization()

19. User Location: Onde é dada a permissão

20. Simulando a localização do usuário

21. Demo: Localização do usuário e região do mapa

22. Annotations • Marcações no Mapa, tipicamente feitas com: • algum tipo de imagem (ex: pin) e • um “callout bubble” (balão com informações)

23. Anotações padrão: MKPointAnnotation • Classe que cria uma marcação padrão (pin) ! let ibiraAnnotation:MKPointAnnotation = MKPointAnnotation() ! ibiraAnnotation.coordinate = CLLocationCoordinate2DMake(-23.587416, -46.657634) ! ibiraAnnotation.title = "Parque do Ibirapuera”

24. • Depois de criadas, basta adicionar anotações no mapa com o método addAnnotations ! self.mapView.addAnnotations([ibiraAnnotation]) Como adicionar annotations no mapa

25. Anotações customizadas ! ! ! • Para criar uma anotação customizada é necessário basicamente seguir 3 passos… ->

26. Passo 1: MKAnnotation • Criar uma classe que implemente o protocolo MKAnnotation ! ! ! ! ! class TDCAnnotation: NSObject, MKAnnotation { var coordinate: CLLocationCoordinate2D var title: String var subtitle: String ! init(coordinate: CLLocationCoordinate2D, title: String, subtitle: String) { self.coordinate = coordinate self.title = title self.subtitle = subtitle } } !

27. Passo 2: como representar essa nova annotation • Deﬁnir uma nova View para representar essa nova classe de annotations no mapa (MKAnnotationView) ! ! ! func viewForTDCAnnotation //... ! ! var anView:MKAnnotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseIdentifier) anView.image = UIImage(named:"TDCLogo") ! anView.canShowCallout = true

28. Passo 3: Implementar mapView: viewForAnnotation: • Nesse método, primeiro veriﬁcar se a view já existe antes de criá-la ! ! ! if annotation is TDCAnnotation{ //se a view ja existir reutilize... var anView = mapView.dequeueReusableAnnotationViewWithIdentifier ! //senao... anView = self.viewForTDCAnnotation(annotation, reuseIdentifier: reuseId)

29. Demo: Annotation customizada

30. Ação de toque no “balão" (callout) ! ! • Quando ocorre um toque no ‘callout’ é disparado o método: ! mapView:, annotationView:, calloutAccessoryControlTapped: ! • Portanto, ações no toque do callout devem ser implementadas nesse método

31. calloutAccessoryControlTapped • Quando o callout do TDC for selecionado, vamos abrir o site da conferência ! ! func mapView(mapView: MKMapView!, annotationView view: MKAnnotationView!, calloutAccessoryControlTapped control: UIControl!) { ! if view.annotation is TDCAnnotation { let url:NSURL = NSURL(string: “http://www.thedevelopersconference.com.br") UIApplication.sharedApplication().openURL(url) } }

32. Demo: Toque no callout

33. MKLocalSearch • Permite encontrar pontos de interesse tomando como referência uma região geográﬁca (map.region). Basicamente dividido entre: • MKLocalSearchRequest: o que deve ser buscado e em que região • MKLocalSearchResponse: itens encontrados (MKMapItems)

34. MKLocalSearchRequest ! ! ! var request:MKLocalSearchRequest = MKLocalSearchRequest() ! request.naturalLanguageQuery = “Restaurantes" ! request.region = self.mapView.region

35. MKLocalSearchResponse • Retorna um array com 10 itens encontrados (MKMapItem) • MKMapItem: contem informações como nome, telefone e URL do item • Possui uma propriedade do tipo placemark, que contem as coordenadas e endereço do item

36. Adicionar itens no mapa search.startWithCompletionHandler { (response:MKLocalSearchResponse!, error:NSError!) in if !error { var placemarks:NSMutableArray = NSMutableArray() for item in response.mapItems { let place:MKPointAnnotation = MKPointAnnotation() place.coordinate = (item as MKMapItem).placemark.coordinate place.title = (item as MKMapItem).name placemarks.addObject(place) } ! self.mapView.addAnnotations(placemarks)

37. Demo: Busca por POIs

38. Gostou da idéia de POIs? Algumas outras APIs • Com limitações de uso • https://developers.google.com/places/ documentation/ • https://developer.foursquare.com/ • http://www.yelp.com/developers • http://developer.factual.com/

39. Mais Informações Documentação Location and Maps Programming Guide https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/LocationAwarenessPG/Introduction/ Introduction.html ! Vídeos WWDC 2013 - What’s New in Map Kit https://developer.apple.com/videos/wwdc/2013/#304 ! Sample Code https://developer.apple.com/library/ios/samplecode/MapCallouts/ Introduction/Intro.html#//apple_ref/doc/uid/DTS40009746

40. Material da palestra • Apresentação: • http://www.slideshare.net/julianachahoud ! • Projeto exemplo: • https://github.com/jchahoud/TDC-POIs-Swift

41. Obrigada! Dúvidas? Juliana Chahoud ! jchahoud@gmail.com @jchahoud http://jchahoud.com !