12.2: Personalizzare mappa, segnaposto e zoom

Condividi su:

Nel precedente articolo abbiamo introdotto Google Maps e visto come sfruttare questo servizio all’interno delle nostre app. Non ci siamo scostati dal codice di default generato da Android Studio, inizieremo a farlo da questo articolo, iniziando a personalizzare la mappa.





Così come viene suggerito dal commento presente nel codice generato da Android Studio, la mappa va manipolata all’interno del metodo “onMapReady()”, poiché questo viene invocato quando la mappa è disponibile.

Muovere la camera ed effettuare uno zoom

Provando l’app avrete notato che la vista inquadra l’intero continente, costringendo l’utente ad effettuare un pinch per focalizzarsi sulla zona in cui è presente il segnaposto. In genere invece le mappe vengono aperte già con un adeguato livello di zoom e noi possiamo facilmente ottenere la stessa cosa all’interno delle nostre app.

Le viste sono gestite dal metodo “moveCamera()“, richiamato sull’istanza della mappa, che di fatto ci permette di spostare e regolare la fotocamera virtuale che riprende la mappa. Questo metodo è già stato utilizzato per posizionare la camera sulla zona del segnaposto. Come parametro necessita di un oggetto di tipo “CameraUpdate“, che appunto definisce i movimenti della camera. Questi particolari oggetti possono essere generati tramite i metodi della classe “CameraUpdateFactory“. Tra questi, nel codice di default, è stato sfruttato “newLatLng()” che muove verso il centro dello schermo la posizione fornita tramite un oggetto LatLng (che ricordo contiene le coordinate del luogo). Volendo effettuare anche uno zoom, oltre che centrare la vista sul luogo di interesse, sarà sufficiente chiamare il metodo “newLatLngZoom()“, che richiede le coordinate tramite un oggetto LatLng e il livello di zoom espresso con un float nel range che va da 2.0 a 21.0. Valori al di fuori di questo range vengono settati automaticamente al valore limite corrispondente.
Ad esempio:

//Spostiamo la visuale sopra le coordinate da mostrare ed effettuiamo uno zoom
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(colosseo, 15));

Ovviamente la classe CameraUpdateFactory fornisce anche altri metodi per decidere lo spostamento della camera, li trovate tutti nella documentazione ufficiale.

Settare il tipo di mappa

Un’altra cosa che avrete notato è che di default abbiamo una semplice mappa, mentre tutti sono a conoscenza del fatto che Google fornisce anche mappe altimetriche, satellitari o ibride.
Per stabilire il tipo di mappa da utilizzare possiamo richiamare il metodo “setMapType()“, che fa parte della classe GoogleMap, come “moveCamera()”, quindi va richiamato attraverso l’istanza della mappa. Come parametro va fornito un intero che stabilisce il tipo di mappa da utilizzare. Ovviamente non dobbiamo ricordare numeri, poiché nella stessa classe sono codificati all’interno di costanti. Ad esempio, se vogliamo visualizzare una mappa ibrida sfrutteremo l’istruzione:

//Settiamo il tipo di mappa da visualizzare, ad esempio una mappa ibrida
mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);

Per le altre costanti disponibili potete consultare la documentazione oppure osservare i suggerimenti di Android Studio.

Personalizzare il segnaposto

Un’altro elemento personalizzabile è il segnaposto, l’abbiamo notato anche col codice di default in cui settiamo su questo un’etichetta come titolo.

Per aggiungere un segnaposto alla mappa si sfrutta il metodo “addMarker()“, che richiede come parametro un oggetto di tipo “MarkerOptions“. Con questo oggetto si possono definire appunto le opzioni del segnaposto. Come abbiamo visto, il metodo “position()” setta la posizione del segnaposto; mentre “title()” setta un titolo che verrà visualizzato al click sul segnaposto.

Ad esempio possiamo richiamare anche il metodo “icon()“, sempre della classe MarkerOptions, che setta l’icona del marker. Questo metodo richiede come parametro un oggetto “BitmapDescriptor” che definisce un’immagine bitmpap. Per generare questo oggetto possono essere sfruttati i metodi della classe “BitmapDescriptorFactory“. Possiamo ad esempio richiamare il metodo “defaultMarker()” che crea un oggetto BitmapDescriptor col segnaposto di default e di colore stabilito tramite il parametro. Questo deve essere un float e anche in questo caso i colori disponibili sono codificati all’interno di costanti della stessa classe. Ad esempio per aggiungere un segnaposto color cyano sul Colosseo e con un determinato titolo sfrutteremo l’istruzione:

//Aggiungiamo il segnaposto, specificando colore, etichetta e colore
mMap.addMarker(new MarkerOptions().position(colosseo).title("Colosseo")
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)));



Conclusioni

Con questo articolo possiamo terminare. Abbiamo aggiunto qualche ulteriore metodo di personalizzazione a quelli presenti di default e approfondito il tutto, poiché nell’introduzione è stata data una spiegazione generica. Col prossimo articolo continueremo su questa strada, vedendo come aggiungere più segnaposti.

Condividi su:

label, ,

About the author