Maps Zen - Effetti grafici
1 dicembre 2015
Nota dell’editore: sono finiti i giorni in cui gli utenti restavano impressionati da un marcatore su una mappa. La serie di post sul blog Maps Zen descrive le integrazioni delle API di Google Maps che consentono alle app di offrire un’esperienza d’uso delle mappe ottimale. Cos’è uno schema zen? In parole povere si tratta di uno schema di progettazione che genera un’esperienza utente armoniosa.
I marcatori sono molto più utili dell’identificazione di punti su una mappa. Possono essere utilizzati anche come un modo per comunicare visivamente le informazioni su di un luogo. Se un utente è alla ricerca di un ristorante con una buona valutazione, attiverà la vostra app per scoprire poi che nelle vicinanze ci sono svariati ristoranti. Ma non è facile capire quali meritino in effetti una visita. Per vederne le singole valutazioni in ultima analisi sarà necessario toccarli prima uno alla volta.
Ecco allora che la selezione con un marcatore e le animazioni dei marcatori possono diventare un ottimo sistema per mostrare queste informazioni. In questo esempio, i marcatori dai colori spenti indicano una valutazione bassa e quelli dai colori vivaci indicano valutazioni elevate. Su alcuni marcatori è presente inoltre il simbolo animato del vapore e anche questo contribuisce a evidenziare i ristoranti con le migliori valutazioni.
Per ottenere l’animazione del simbolo del vapore, l’icona del marcatore viene modificata richiamando periodicamente il metodo setIcon(). Un ritardo di 32 ms corrisponde a 30 aggiornamenti dell’icona del marcatore al secondo, con un’animazione dell’icona alla frequenza di 30 frame al secondo.
Per ridurre il numero delle icone dei marcatori si utilizza un filtro ColorMatrixColorFilter del framework Android. Innanzitutto si deve impostare il filtro colore in base alla scala di valutazione dei ristoranti tramite una ColorMatrix. In questo caso, qualsiasi ristorante con una valutazione di 3 stelle sarà presentato con un’icona interamente in scala di grigi. I ristoranti con una valutazione pari o superiore a 4,5 stelle saranno presentati completamente a colori. La scala dei ristoranti è impostata su un oggetto Paint e il filtro si applica all’immagine dei marcatori utilizzando una tela.
I marcatori sono ottimi per la visualizzazione di punti su una mappa, ma a volte si finisce con averne troppi. In questo caso, nelle vicinanze abbiamo troppi ristoranti con una buona valutazione e benché non si tratti esattamente di una brutta notizia, non è comunque d’aiuto all’utente per la scelta di un solo ristorante. In tali situazioni è necessario visualizzare molti marcatori ma continuare a mantenere la visualizzazione comprensibile. Prenderemo in esame due modi per superare queste problematiche.
Il primo metodo ricorre all’uso di raggruppamenti di marcatori. Quando i livelli di zoom della mappa cambiano, i marcatori vengono aggregati per offrire una visualizzazione molto più maneggevole. Ora, con lo zoom all’indietro della mappa, i marcatori si combinano, mostrando il numero di ristoranti presenti nelle aree circostanti.
Questo effetto visivo porrebbe sembrare molto impegnativo, ma non lo è. La libreria Android Maps Util consente l’implementazione in quattro passaggi del raggruppamento dei marcatori:
1. Aggiungere la libreria alla gradle config.
2. Implementare l’interfaccia ClusterItem nella propria classe di dati principale.
3. Creare un’istanza del cluster manager e registrarlo per un paio di map listener.
4. Sostituire il codice di gestione dei marcatori con chiamate al cluster manager - il cluster manager gestisce l’aggiunta e la rimozione dei marcatori per l’utente.
5. Opzionalmente è possibile personalizzare ulteriormente l’effetto fornendo marcatori aggregati personalizzati (che ad esempio mostrano immagini invece di un conteggio).
Esaminiamo adesso il secondo metodo per mostrare l’aggregazione dei marcatori, è davvero brillante! Qui il conteggio dei marcatori è sostituito da una mappa termica che mostra la concentrazione di questi marcatori.
Per ottenere questo effetto sono sufficienti quattro semplici passaggi utilizzando la libreria Android Maps Utils, grazie alle sue mappe termiche.
1. Aggiungere la libreria alla gradle config.
2. Creare un’istanza di un HeatMapTileProvider e passarlo al proprio LatLngs.
3. Utilizzarlo per creare un overlay della mappa.
4. Opzionalmente è possibile personalizzarlo ulteriormente specificando il gradiente e il raggio della mappa termica.
È bene tenere presente che il sovraccarico di informazioni è un problema comune con le app mobili. Nel caso in particolare delle app di localizzazione, quando si devono gestire molte località ne risente l’esperienza utente che risulta insoddisfacente. La libreria Android Maps Utils offre interessanti effetti grafici che consentono di costruire mappe eccezionali.
I marcatori sono molto più utili dell’identificazione di punti su una mappa. Possono essere utilizzati anche come un modo per comunicare visivamente le informazioni su di un luogo. Se un utente è alla ricerca di un ristorante con una buona valutazione, attiverà la vostra app per scoprire poi che nelle vicinanze ci sono svariati ristoranti. Ma non è facile capire quali meritino in effetti una visita. Per vederne le singole valutazioni in ultima analisi sarà necessario toccarli prima uno alla volta.
mAnimHandler.post(new Runnable() {
@Override
public void run() {
marker.setIcon(mSteamFrames.nextFrame());
// Next frame in 32 ms
mAnimHandler.postDelayed(this, 32);
}
});
Per ridurre il numero delle icone dei marcatori si utilizza un filtro ColorMatrixColorFilter del framework Android. Innanzitutto si deve impostare il filtro colore in base alla scala di valutazione dei ristoranti tramite una ColorMatrix. In questo caso, qualsiasi ristorante con una valutazione di 3 stelle sarà presentato con un’icona interamente in scala di grigi. I ristoranti con una valutazione pari o superiore a 4,5 stelle saranno presentati completamente a colori. La scala dei ristoranti è impostata su un oggetto Paint e il filtro si applica all’immagine dei marcatori utilizzando una tela.
ColorMatrix desatMatrix = new ColorMatrix(); desatMatrix.setSaturation(restaurantRating); ColorFilter paintColorFilter = new ColorMatrixColorFilter(desatMatrix); Paint paint = new Paint(); paint.setColorFilter(paintColorFilter); Canvas canvas = new Canvas(newImage); canvas.drawBitmap(oldImage, 0, 0, paint);
I marcatori sono ottimi per la visualizzazione di punti su una mappa, ma a volte si finisce con averne troppi. In questo caso, nelle vicinanze abbiamo troppi ristoranti con una buona valutazione e benché non si tratti esattamente di una brutta notizia, non è comunque d’aiuto all’utente per la scelta di un solo ristorante. In tali situazioni è necessario visualizzare molti marcatori ma continuare a mantenere la visualizzazione comprensibile. Prenderemo in esame due modi per superare queste problematiche.
Il primo metodo ricorre all’uso di raggruppamenti di marcatori. Quando i livelli di zoom della mappa cambiano, i marcatori vengono aggregati per offrire una visualizzazione molto più maneggevole. Ora, con lo zoom all’indietro della mappa, i marcatori si combinano, mostrando il numero di ristoranti presenti nelle aree circostanti.
Questo effetto visivo porrebbe sembrare molto impegnativo, ma non lo è. La libreria Android Maps Util consente l’implementazione in quattro passaggi del raggruppamento dei marcatori:
1. Aggiungere la libreria alla gradle config.
compile 'com.google.maps.android:android-maps-utils:0.3+'
2. Implementare l’interfaccia ClusterItem nella propria classe di dati principale.
public interface ClusterItem {
LatLng getPosition();
}
3. Creare un’istanza del cluster manager e registrarlo per un paio di map listener.
mClusterManager = new ClusterManager<>(this, mMap); mMap.setOnCameraChangeListener(mClusterManager); mMap.setOnMarkerClickListener(mClusterManager);
4. Sostituire il codice di gestione dei marcatori con chiamate al cluster manager - il cluster manager gestisce l’aggiunta e la rimozione dei marcatori per l’utente.
mClusterManager.addItem(clusterItem);
5. Opzionalmente è possibile personalizzare ulteriormente l’effetto fornendo marcatori aggregati personalizzati (che ad esempio mostrano immagini invece di un conteggio).
Esaminiamo adesso il secondo metodo per mostrare l’aggregazione dei marcatori, è davvero brillante! Qui il conteggio dei marcatori è sostituito da una mappa termica che mostra la concentrazione di questi marcatori.
Per ottenere questo effetto sono sufficienti quattro semplici passaggi utilizzando la libreria Android Maps Utils, grazie alle sue mappe termiche.
1. Aggiungere la libreria alla gradle config.
compile 'com.google.maps.android:android-maps-utils:0.3+'
2. Creare un’istanza di un HeatMapTileProvider e passarlo al proprio LatLngs.
mHeatmapTileProvider = new HeatmapTileProvider.Builder() .data(mLatLngCollection) .build();
3. Utilizzarlo per creare un overlay della mappa.
mTileOverlay = mMap.addTileOverlay( new TileOverlayOptions().tileProvider(mHeatmapTileProvider));
4. Opzionalmente è possibile personalizzarlo ulteriormente specificando il gradiente e il raggio della mappa termica.
È bene tenere presente che il sovraccarico di informazioni è un problema comune con le app mobili. Nel caso in particolare delle app di localizzazione, quando si devono gestire molte località ne risente l’esperienza utente che risulta insoddisfacente. La libreria Android Maps Utils offre interessanti effetti grafici che consentono di costruire mappe eccezionali.
