Creating a Selectable Cluster Map

Android Mobile App Development
We explored using Google Maps to create a map with selectable markers that cluster together.

The challenge

We recently built a mobile app for a client who needed their users to be able to select a beach from a list. There are a large number of beaches to choose from across the country, so naturally our minds went straight to a map, with markers representing these locations.

Performance

We had a large list of locations so performance was a concern. We wanted our map to be responsive and easy to use.

As you can see, adding so many markers amounts to a noticeable amount of “jank”. Not the premium experience we were looking for.

Let's talk clustering

The solution to this “jank” is to have less markers on your map. But how do you have less markers and still represent the same data? By using clusters.

Code

Thankfully, we don’t have to spend the agonising hours calculating when to cluster, creating all the those markers and handling the cluster clicks. Google has written a set of utility classes to help.

Add import

implementation ‘com.google.maps.android:android-maps-utils:0.5'

ClusterItem

You will need to create a class which represents your location. It will implement ClusterItem and provide the information you might expect. Namely latitude, longitude, title and snippet. This is also where you will need to add your selected boolean.

We gave our ClusterItem a property of a Beach, meaning we can access it later.

ClusterManager

Next, we create a ClusterManager and connect it up with our GoogleMap, within our Activity or Fragment.

ClusterRender

We want our markers to have a slightly different appearance depending on whether they are selected or not. We also want to tweak the color of the clusters. To achieve this we supply a cluster renderer.

We added a method onClusterItemChange to help us to tweak the marker upon user click. We then set it on our ClusterManager we created above.

Clicks

For our map we want our items to be selectable upon click. We would also like our map to zoom in when you click on a cluster.

We keep a reference to the last selected marker using the LastSelectedBeachMarker property. This means we know which maker is currently selected.

Items

Lastly, we add our items to the map.

clusterManager.addItems(markers)

markers being a list of the ClusterItem’s we defined earlier.

Summary

Initially, this can be a daunting task to take on. But thanks to the Google maps utility library, creating a clustering map isn’t too time consuming. You get great performance and a customisable look and feel.

Links

https://developer.android.com/training/maps/

https://developers.google.com/maps/documentation/android-sdk/utility/setup

https://developers.google.com/maps/documentation/android-sdk/utility/marker-clustering


Looking for something else?

Search over 400 blog posts from our team

Want to hear more?

Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!