THIS SDK ISDEPRECATED.

We rolled out a new and better SDK for you.

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)

Clusters and images