📍Multiple Clusters on Huawei Map 🗺️
Tags: Maps, Huawei, Huawei Mobile Service, Google, Clustering

After going through weeks of rigorous testing on the marker clustering library. It has been used by one of our important clients :)

The use case of the multiple clusters could be different types of restaurants, cars, animals and so on.

Now I have received another request to create not just one, but multiple categories of markers and grouping them via clusters.

I have thought of several ways to do it.

When the clustered area consist of different categories of markers, it will show it on the cluster via pictures of the markers. The cluster changes to a 3rd color when 2 different categories of markers are under one cluster. Simply create another ClusterManager for another category of markers.

As option 3 would be the easiest, most feasible and non-UX deterioration solution compared the other 2 solutions. Here I will show you how!

We can create a class on our App folder by referring to DefaultIconGenerator . This class generates the icon of the marker and the cluster.

In this example, I have created a class called CustomIconGenerator for which I simply modify the class from DefaultIconGenerator. The only method we need to modify is createClusterBackground() . The color of the cluster is now set to black #000000.

@NonNull

private Drawable createClusterBackground() {

GradientDrawable gradientDrawable = new GradientDrawable();

gradientDrawable.setShape(GradientDrawable.OVAL);

String color = "#000000";

gradientDrawable.setColor(Color.parseColor(color));

gradientDrawable.setStroke(mIconStyle.getClusterStrokeWidth(),

mIconStyle.getClusterStrokeColor());

return gradientDrawable;



Back to MainActivity.java. Under onMapReady, implement the methods getClusterIcon & getMarkerIcon. Here I have changed the color of the cluster and replaced the icon of the markers from the 2nd clusterManager.

@Override

public void onMapReady(final HuaweiMap huaweiMap) {

.......

clusterManager2.setIconGenerator(new IconGenerator<MyItem>() {

@NonNull

@Override

public BitmapDescriptor getClusterIcon(@NonNull Cluster<MyItem> cluster) {

int bucket = getClusterIconBucket(cluster);

BitmapDescriptor descriptor = mClusterIcons.get(bucket);

if (descriptor == null) {

CustomIconGenerator customIconGenerator = new CustomIconGenerator(getApplicationContext());

descriptor = customIconGenerator.createClusterIcon(bucket);

mClusterIcons.put(bucket, descriptor);

}

return descriptor;

}



@NonNull

@Override

public BitmapDescriptor getMarkerIcon(@NonNull MyItem clusterItem) {

//BitmapDescriptor icon = BitmapDescriptorFactory.fromResource(R.mipmap.ic_launcher);

BitmapDescriptor icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE);

return icon;

}

});

}

That’s it for customizing your Cluster & Marker Icons! 🥳

For more details on how to allocate markers into ClusterManager & create multiple ClusterManager, check out the Github Repo below.

Full working source code under MultipleCluster folder. Simply git clone and it will run. No configuration needed:

Thank you for using your precious time to reading this article, If you liked the article, Clap your 👏👏 to say “thanks!” and help others find this article by sharing it. Also, you can follow me on Medium!! #KeepLearning