T#005 – Usare le mappe di google

Con il tutorial di oggi vedremo come usare le mappe di google all’interno delle nostre applicazioni. Il programma che creeremo ci permetterà di visualizzare la mappa di google, scegliere il tipo di visualizzazione mostrata tra standard, satellite o ibrida, abilitare o disabilitare le funzioni di zoom e scroll utilizzabili tramite il multitouch e mostrare la nostra posizione sulla mappa. Tutto ciò è reso possibile grazie Framework MapKit, che dovremo ovviamente aggiungere al nostro progetto.

Creiamo un nuovo progetto, scegliendo dai template proposti “View-based Application”, diamo il nome alla nostra applicazione, ad esempio “mappe”, scegliamo la posizione dove salvare e proseguiamo. Prima di tutto aggiungiamo il framework. Per farlo cliccate col pulsante destro del mouse sulla cartella “Resources” dentro “Groups & Files”, cliccate quindi su “Add” e infine su “Existing Frameworks…”. Selezionate mapKit.framework, quindi cliccate su Add:

Apriamo ora il file “mappeViewController.h” e inseriamo il codice seguente:

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
 
@interface mappeViewController : UIViewController <MKMapViewDelegate> {
	IBOutlet MKMapView *mapView;
	IBOutlet UISwitch *switchZoom;
	IBOutlet UISwitch *switchScroll;
	IBOutlet UIButton *cmdMiaPosizione;
	IBOutlet UISegmentedControl *segmentTipoMappa;
}
 
- (IBAction)gestioneZoom:(id)sender;
- (IBAction)gestioneScroll:(id)sender;
- (IBAction)visualizzaMiaPosizione:(id)sender;
- (IBAction)mostraTipoMappa:(id)sender;
 
@end

Come potete vedere, abbiamo provveduto ad importare il framework grazie all’istruzione “#import MapKit/MapKit.h” e a specificare il protocollo “MKMapViewDelegate”. Abbiamo inoltre dichiarato 5 oggetti di tipo IBOutlet, che collegheremo poi ad altrettanti oggetti creati in Interface Builder. Le dichiarazioni comprendono la vista della mappa di tipo MKMapView, due controlli switch per il controllo di zoom e scroll di tipo UISwitch, un pulsante UIButton che useremo per mostrare la nostra posizione e un UISegmentedControl che useremo infine per scegliere il tipo di visuale per la mappa. Dopodichè abbiamo dichiarato i 4 metodi che ci permetteranno di eseguire le operazioni appena descritte.

Apriamo ora il file “mappeViewController.m” e andiamo a scrivere il codice dei nostri metodi.

- (IBAction)gestioneZoom:(id)sender{
	if (switchZoom.on){
		mapView.zoomEnabled=TRUE;
	} else {
		mapView.zoomEnabled=FALSE;
	}
 
}
 
- (IBAction)gestioneScroll:(id)sender{
	if (switchScroll.on){
		mapView.scrollEnabled=TRUE;
	} else {
		mapView.scrollEnabled=FALSE;
	}
 
}
 
- (IBAction)visualizzaMiaPosizione:(id)sender{
	mapView.showsUserLocation=TRUE;
}
 
- (IBAction)mostraTipoMappa:(id)sender{
	if ([segmentTipoMappa selectedSegmentIndex]==0) {
		mapView.mapType = MKMapTypeStandard;
	} else if ([segmentTipoMappa selectedSegmentIndex]==1) {
		mapView.mapType = MKMapTypeSatellite;
	} else if ([segmentTipoMappa selectedSegmentIndex]==2) {
		mapView.mapType = MKMapTypeHybrid;
	}
}

Il codice è molto semplice, analizziamolo brevemente. Per quanto riguarda il controllo di zoom e scroll, non facciamo altro che verificare se lo switch è in stato ON e in quel caso abilitiamo la relativa funzione settandola a TRUE, in caso contrario, grazie a FALSE, la funzione cesserà di funzionare. Anche il codice inerente la visualizzazione della propria posizione sulla mappa è molto semplice e non facciamo altro che impostare la proprietà showsUserLocation della mapView a TRUE. L’ultimo medoto, infine, verifica quale pulsante dell’UISegnmentedControl è stato premuto e imposta la visuale corrispondende tramite “MKMapTypeStandard” per la visuale Standard, “MKMapTypeSatellite” per quella dal satellite e “MKMapTypeHybrid” per la visuale ibrida, un mix delle due precedenti.

A questo punto non ci resta che disegnare la nostra interfaccia grafica con Interface Builder ed effettuare i rispettivi collegamenti tra gli oggetti IB e quelli creati via codice da Xcode. Apriamo il file “mappeViewController.xib” e trasciniamo nella View i seguenti oggetti:

• N. 1 MKMapView
• N. 2 UISwitch
• N. 1 UIButton
• N. 1 UISegmentedControl
• N. 2 UILabel

Posizioniamoli quindi in modo che la vostra vista sia simile a quella mostrata in figura:

Le impostazioni di default per questi controlli vanno più che bene per questo tutorial. Unica accortezza la proprietà “Segments” dell’UISegmentedControl che dovrete settare a 3 in quanto saranno proprio 3 le scelte selezionabili dall’utente durante l’esecuzione della nostra applicazione. Ricordate inoltre di modificare il testo delle UILabel settandole a “Zoom” e “Scrool”. Settate il testo del pulsante inserendo “Mostra mia posizione” come testo visualizzato e infine inserite, tramite semplice doppio-click, le scritte “Standard”, “Satellite” e “Ibrida” nell’UISegmentedControl.

Ora cliccate su “File’s Owner” e tramite la finestra “Connections” effettuate i rispettivi collegamenti tra gli oggetti IB e quelli creati da codice, come mostrato nella prossima figura:

Ora potete salvare, chiudere Interface Builder e tornare ad Xcode. Cliccate su Build and Run e testate il programmino appena creato su iPhone Simulator o sul vostro dispositivo.