Creating a Selectable Cluster Map
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!
