Developer
THIS SDK ISDEPRECATED.

We rolled out a new and better SDK for you.

CHECK IT OUT

Image clustering

Allow your users to cluster image annotations for better visualization. By default clustering is disabled.

Sample use case 1: You want to cluster images in the FeatureCollection type provided in GeoJSON.

To enable clustering you need to set:

"cluster": true,

and set the desired cluster radius:

"clusterRadius": 70,

Here you can see what the GeoJSON Source style file with enabled clustering looks like:

1"IC-app-test-source": {
2    "type": "geojson",
3    "cluster": true,
4    "clusterRadius": 70,
5    "data": {
6      "type": "FeatureCollection",
7      "features": [
8        {
9          "type": "Feature",
10          "geometry": {
11            "type": "Point",
12            "coordinates": [
13              4.710759,
14              52.340415
15            ]
16          },
17          "properties": {
18            "icon": "jet_airplane_landing"
19          }
20        }
21      ]
22    }
23  }

You also need to add a new Layer to the current style that defines behaviour when your features do not fulfill clustering constraints.

1{
2  "id": "IC-layer-cluster-image",
3  "filter": ["!has", "point_count"],
4  "type": "symbol",
5  "layout": {
6    "icon-image": "{icon}",
7    "icon-allow-overlap": true
8  },
9  "source": "IC-clustering-source"
10}

Please also remember if the feature "properties": {"icon": "jet_airplane_landing"} is set you need to add an image to Style as follows:

val image = ImageFactory.createImage(imageId, drawable)
tomtomMap.styleSettings.addImage(image)

Sample use case: You want to add a background overlay under the cluster size.

You need to create Layer with given content:

1{
2  "id": "IC-layer-clustered",
3  "filter": ["has", "point_count"],
4  "type": "symbol",
5  "layout": {
6    "icon-image":  "ic_cluster",
7    "icon-allow-overlap": true,
8    "icon-ignore-placement": true
9  },
10  "source": "IC-clustering-source"
11}

and add it to current map style.

Sample use case: You want to customize the cluster symbol text color, text size, and offset.

You need to define Layer with given JSON content:

1{
2  "filter": ["has", "point_count"],
3  "id": "IC-layer-symbol-count",
4  "source": "IC-clustering-source",
5  "type": "symbol",
6  "layout": {
7    "text-field": "{point_count}",
8    "text-font": [
9      "Noto-Bold"
10    ],
11    "text-size": 14,
12    "text-offset": [0.0, 0.0]
13  },
14  "paint": {
15    "text-color": "#FFFFFF"
16  }
17}

and add it to current map style.

Code Example

Here you can check what an example implementation may look like:

  • adding map source
1val imageSourceJson = AssetUtils.getAssetFile(context, SOURCE_PATH)
2val source = SourceFactory.createSource(imageSourceJson)
3tomtomMap.styleSettings.addSource(source)
  • adding map layer with a given file name
1val imageLayerJson = AssetUtils.getAssetFile(context, LAYER_CLUSTER_IMAGE_PATH)
2val imageLayer = LayerFactory.createLayer(imageLayerJson)
3tomtomMap.styleSettings.addLayer(imageLayer)
image

Clusters and images