Juliana Chahoud!
@jchahoud
Juliana Chahoud
Aplicações com mapas
• Essenciais nos dispositivos móveis
• MapKit: Framework que permite trabalhar com
mapas em iOS
• Alg...
Quem fornece dados nos
mapas da Apple?
!
• http://gspa21.ls.apple.com/html/
attribution.html
• TomTom
• DigitalGlobe
• Waz...
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...
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 =...
Elementos do Mapa
• Coordenadas: latitude e longitude de
um local no mapa
!
let tdcLocation:CLLocationCoordinate2D =
CLLoc...
Mostrar localização do usuário
• Passo 1: Adicionar a chave
NSLocationWhenInUseUsageDescription no plist
• Permite descrev...
Mostrar localização do usuário
• Passo 2: É preciso solicitar
autorização:
!
self.locationManager.requestWhenInUseAuthoriz...
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
c...
Anotações padrão:
MKPointAnnotation
• Classe que cria uma marcação padrão (pin)
!
let ibiraAnnotation:MKPointAnnotation = ...
• Depois de criadas, basta adicionar
anotações no mapa com o método
addAnnotations
!
self.mapView.addAnnotations([ibiraAnn...
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, ...
Passo 2: como representar essa
nova annotation
• Definir uma nova View para representar essa nova
classe de annotations no ...
Passo 3: Implementar
mapView: viewForAnnotation:
• Nesse método, primeiro verificar se a view já
existe antes de criá-la
!
...
Demo: Annotation
customizada
Ação de toque no “balão" (callout)
!
!
• Quando ocorre um toque no ‘callout’ é
disparado o método:
!
mapView:, annotationV...
calloutAccessoryControlTapped
• Quando o callout do TDC for selecionado,
vamos abrir o site da conferência
!
!
func mapVie...
Demo: Toque no callout
MKLocalSearch
• Permite encontrar pontos de interesse tomando
como referência uma região geográfica
(map.region). Basicamen...
MKLocalSearchRequest
!
!
!
var request:MKLocalSearchRequest = MKLocalSearchRequest()
!
request.naturalLanguageQuery = “Res...
MKLocalSearchResponse
• Retorna um array com 10 itens encontrados
(MKMapItem)
• MKMapItem: contem informações como nome,
t...
Adicionar itens no mapa
search.startWithCompletionHandler {
(response:MKLocalSearchResponse!, error:NSError!) in
if !error...
Demo: Busca por POIs
Gostou da idéia de POIs?
Algumas outras APIs
• Com limitações de uso
• https://developers.google.com/places/
documentation...
Mais Informações
Documentação
Location and Maps Programming Guide
https://developer.apple.com/library/ios/documentation/
U...
Material da palestra
• Apresentação:
• http://www.slideshare.net/julianachahoud
!
• Projeto exemplo:
• https://github.com/...
Obrigada!
Dúvidas?
Juliana Chahoud
!
jchahoud@gmail.com
@jchahoud
http://jchahoud.com
!
Próximos SlideShares
Carregando em…5
×

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

2.215 visualizações

Publicada em

Apresentação efetuada na Trilha de iOS do TDC 2014. http://www.thedevelopersconference.com.br/tdc/2014/saopaulo/trilha-ios em 08/08/2014:

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

Aplicativos com mapas e localização do usuário se tornaram essenciais nos dispositivos móveis. Nesta palestra será demonstrado na prática como criar um aplicativo iOS, que exibe em um mapa a localização do usuário e pontos de interesse (restaurantes, bares e atrações turísticas), utilizando o framework MapKit. O aplicativo será todo construído com a nova linguagem de programação da Apple, o Swift.

Publicada em: Celular

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

  1. 1. Juliana Chahoud! @jchahoud
  2. 2. Juliana Chahoud
  3. 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. 4. Quem fornece dados nos mapas da Apple? ! • http://gspa21.ls.apple.com/html/ attribution.html • TomTom • DigitalGlobe • Waze • Yelp • Diversos outros…
  5. 5. Suporte para: Annotations • Marcações no mapa
  6. 6. Overlays • "Desenhar" camadas no mapa
  7. 7. 3D e visão de satélite • Tipos podem ser padrão, satélite ou híbridos
  8. 8. Rotas • Suporta rotas por automóveis ou a pé
  9. 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. 10. O que preciso para começar? • Habilitar MapKit Framework • Importar o framework para utilização: import MapKit
  11. 11. Xcode 6
  12. 12. Habilitando o MapKit • Em target -> Capabilities: habilitar Maps
  13. 13. MKMapView • Exibe os mapas e permite manipulação dos mesmos
  14. 14. Outlet e delegate
  15. 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. 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. 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. 18. Mostrar localização do usuário • Passo 2: É preciso solicitar autorização: ! self.locationManager.requestWhenInUseAuthorization()
  19. 19. User Location: Onde é dada a permissão
  20. 20. Simulando a localização do usuário
  21. 21. Demo: Localização do usuário e região do mapa
  22. 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. 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. 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. 25. Anotações customizadas ! ! ! • Para criar uma anotação customizada é necessário basicamente seguir 3 passos… ->
  26. 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. 27. 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
  28. 28. 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)
  29. 29. Demo: Annotation customizada
  30. 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. 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. 32. Demo: Toque no callout
  33. 33. 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)
  34. 34. MKLocalSearchRequest ! ! ! var request:MKLocalSearchRequest = MKLocalSearchRequest() ! request.naturalLanguageQuery = “Restaurantes" ! request.region = self.mapView.region
  35. 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. 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. 37. Demo: Busca por POIs
  38. 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. 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. 40. Material da palestra • Apresentação: • http://www.slideshare.net/julianachahoud ! • Projeto exemplo: • https://github.com/jchahoud/TDC-POIs-Swift
  41. 41. Obrigada! Dúvidas? Juliana Chahoud ! jchahoud@gmail.com @jchahoud http://jchahoud.com !

×