Sorry, you need to enable JavaScript to visit this website.
FeedbackPricingContact
Maps SDK for Android

Image clustering

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:

"IC-app-test-source": {
    "type": "geojson",
    "cluster": true,
    "clusterRadius": 70,
    "data": {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              4.710759,
              52.340415
            ]
          },
          "properties": {
            "icon": "jet_airplane_landing"
          }
        }
      ]
    }
  }

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

{
  "id": "IC-layer-cluster-image",
  "filter": ["!has", "point_count"],
  "type": "symbol",
  "layout": {
    "icon-image":  "{icon}",
    "icon-allow-overlap": true
  },
  "source": "IC-clustering-source"
}

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:

{
  "id": "IC-layer-clustered",
  "filter": ["has", "point_count"],
  "type": "symbol",
  "layout": {
    "icon-image":  "ic_cluster",
    "icon-allow-overlap": true,
    "icon-ignore-placement": true
  },
  "source": "IC-clustering-source"
}

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:

{
  "filter": ["has", "point_count"],
  "id": "IC-layer-symbol-count",
  "source": "IC-clustering-source",
  "type": "symbol",
  "layout": {
    "text-field": "{point_count}",
    "text-font": [
      "Noto-Bold"
    ],
    "text-size": 14,
    "text-offset": [0.0, 0.0]
  },
  "paint": {
    "text-color": "#FFFFFF"
  }
}

and add it to current map style.

Code Example

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

  • adding map source

val imageSourceJson = AssetUtils.getAssetFile(context, SOURCE_PATH)
val source = SourceFactory.createSource(imageSourceJson)
tomtomMap.styleSettings.addSource(source)

  • adding map layer with a given file name

val imageLayerJson = AssetUtils.getAssetFile(context, LAYER_CLUSTER_IMAGE_PATH)
val imageLayer = LayerFactory.createLayer(imageLayerJson)
tomtomMap.styleSettings.addLayer(imageLayer)
image

Clusters and images