Mapbox-gl-native: Custom icon per cluster

[samiede]

I have implemented clustering of GeoJSON data as per the example, and it does work. The cluster data consists of a number of locations with an associated photo, which are to be shown on the map. The icon of the cluster should now represent one of the points included in the cluster, i.e. I have the points

[ 
    { id: 1, point: ..., photo: 'url1'}, 
    { id: 2, point: ..., photo: 'url2'}, 
    { id: 3, point: ..., photo: 'url3'}
].

The cluster needs to reflect that by having an icon that is a bitmap of one of those 3 urls provided.
I have managed to draw custom icons for sources managed by a SymbolManager, but I can not figure out how to transfer that to the clustering algorithm.

Is this possible in any shape or form?

Thanks!

[tobrun]

First step is to link the layer to the photo property with:

iconImage(get("photo"))

If the image needs to be rendered an event is emitted, you can listen to this event with:

      mapView.addOnStyleImageMissingListener {
        val bitmap =  // load bitmap with an image loader from url
        mapboxMap.style!!.addImage(it, bitmap)
      }

Let us know if you have any issues with getting this working.

[samiede]

Hey tobrun, thanks for the quick answer!
using the addOnStyleMissingListener works fine, but the property that is emitted from the event is just an empty string. I guess that is because the clustering that is created by using the source with the .withCluster(true) option loses the reference to the properties of the original data?

[tobrun]

@samiede in https://github.com/mapbox/mapbox-gl-native/tree/tvn-style-image-missing-example, I adapted our current clustering example to do what I outlined in https://github.com/mapbox/mapbox-gl-native/issues/15196#issuecomment-514255515. Atm it's a work as designed, not getting any empty values and the icons are loading up nicely as expected.

[samiede]

Hey Tobrun, thank you very much for your quick reply and effort! I will check it out thoroughly and try to get it working in my application! I really appreciate the quick replies!

[samiede]

I've read through the source code of the example app, and I've found a lot of useful stuff. Adding the image on demand for the un-clustered data is now perfectly possible, the only problem I still have is that the addOnStyleImageListener receives and empty string for the images that are requested by the clustered data.

Maybe I have not expressed the issue correctly:
Given the unclustered data, I can display the images I need with no problem:

[ 
    { id: 1, point: ..., photo: 'url1'}, 
    { id: 2, point: ..., photo: 'url2'}, 
    { id: 3, point: ..., photo: 'url3'}
]

When the data is now arranged in clusters by the system like this:

cluster1 = [ 
    { id: 1, point: ..., photo: url1},
    { id: 2, point: ..., photo: url2},
]
cluster2 = [
    { id: 3, point: ..., photo: 'url3'}
]

the images I need to show are:
cluster1 : url1 || url2 (here it is not important as long as the image comes from any item within the cluster)
cluster2 : url3

I understand that the connection between data and clusters gets lost, but is there a way to reconnect the two?

[tobrun]

Ah, I now understand what you are trying to achieve.

I understand that the connection between data and clusters gets lost, but is there a way to reconnect the two?

I believe such functionality will be unlocked with https://github.com/mapbox/mapbox-gl-native/issues/14043 though atm can't think of a workaround. Closing this issue as this is being tracked in the former mentioned issue.

[samiede]

Thanks for the time and effort!