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

Juliana Chahoud!@jchahoud

Juliana Chahoud

Aplicações com mapas

• Essenciais nos dispositivos móveis

• MapKit: Framework que permite trabalhar com mapas em iOS

• Alguns apps que usam o MapKit:

Quem fornece dados nos mapas da Apple?

!

• http://gspa21.ls.apple.com/html/attribution.html

• TomTom

• DigitalGlobe

• Waze

• Yelp

• Diversos outros…

Suporte para: Annotations

• Marcações no mapa

Overlays

• "Desenhar" camadas no mapa

3D e visão de satélite

• Tipos podem ser padrão, satélite ou híbridos

Rotas

• Suporta rotas por automóveis ou a pé

Buscas baseadas em mapa

• Buscas por endereços, pontos de interesse…

• Veremos como montar um app que faz busca por pontos de interesse

O que preciso para começar?

• Habilitar MapKit Framework

• Importar o framework para utilização: import MapKit

Xcode 6

Habilitando o MapKit

• Em target -> Capabilities: habilitar Maps

MKMapView

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

Outlet e delegate

Tipos de mapa

!

!

!

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

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)

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

Mostrar localização do usuário

• Passo 2: É preciso solicitar autorização:

! self.locationManager.requestWhenInUseAuthorization()

User Location: Onde é dada a permissão

Simulando a localização do usuário

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

Annotations

• Marcações no Mapa, tipicamente feitas com:

• algum tipo de imagem (ex: pin) e

• um “callout bubble” (balão com informações)

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”

• Depois de criadas, basta adicionar anotações no mapa com o método addAnnotations

! self.mapView.addAnnotations([ibiraAnnotation])

Como adicionar annotations no mapa

Anotações customizadas

!

!

!

• Para criar uma anotação customizada é necessário basicamente seguir 3 passos… ->

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 } } !

Passo 2: como representar essa nova annotation

• Definir 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

Passo 3: Implementar mapView: viewForAnnotation:

• Nesse método, primeiro verificar 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)

Demo: Annotation customizada

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

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) } }

Demo: Toque no callout

MKLocalSearch

• Permite encontrar pontos de interesse tomando como referência uma região geográfica (map.region). Basicamente dividido entre:

• MKLocalSearchRequest: o que deve ser buscado e em que região

• MKLocalSearchResponse: itens encontrados (MKMapItems)

MKLocalSearchRequest

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

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

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)

Demo: Busca por POIs

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/

http://www.factual.com/

Mais InformaçõesDocumentaçã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

Material da palestra

• Apresentação:

• http://www.slideshare.net/julianachahoud

!

• Projeto exemplo:

• https://github.com/jchahoud/TDC-POIs-Swift

Obrigada! Dúvidas?

Juliana Chahoud !

jchahoud@gmail.com @jchahoud

http://jchahoud.com !