Sorry, you need to enable JavaScript to visit this website.

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 FeatureCollection type provided in geojson.

To enable clustering you need to set: :

"cluster": true,

and set desired cluster radius:

"clusterRadius": 70,

Here you can see how 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 need also add new Layer to 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 feature "properties": {"icon": "jet_airplane_landing"} is set you need to add image to Style as follow:

val image = ImageFactory.createImage(imageId, context.resources.getDrawable(imageResId))
tomtomMap.styleSettings.addImage(image)

 

Sample use case: You want to add 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 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 how 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 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

You are here