Get all markers in a cluster when a cluster is pressed

[KalebMatthews]

Is there any way to get all GeoJSON features in a cluster when the cluster marker is pressed with an onPress listener on the ShapeSource?

If not then a good enhancement would be to return a FeatureCollection in that scenario or an array of the Feature ids in the properties of the cluster Feature. This is the only thing missing from this package that is preventing me from using it in my current project. Timely assistance is greatly appreciated.

Thanks!

[KalebMatthews]

I have found a solution to this. For all those who run into this issue, you can easily implement SuperCluster to handle the clustering for you. You will have to create your normal GeoJSON object and pass those into SuperCluster then you can use SuperCluster to get all children needed by using their functions. It integrates very nicely with Mapbox's ShapeSource.

Closing this issue since a solution was found.

[guizmo]

hi @KalebMatthews ,
Any chance you could show how to integrate supercluster to react-native-mapbox-gl please ?

[KalebMatthews]

I actually moved to react-native-maps with Supercluster for clustering. I can not remember the reason but I remember this package missing something I needed desperately.

However, to add supercluster to this project you simply have to use the Shape source with the geojson generated by supercluster. The supercluster function GetCluster(bbox, zoom) returns an array of geojson objects. You can pass those into the Shape source to generate the makers you need. You will need to create the first layer of the geojson object and add the clustered geojson object to that parent object then you can add it to the Shape source easily.

You need to create a FeatureCollection of Points (FeatureCollection) for the proper geojson objects. Feature Collections is an object that contains a type ('FeatureCollection') and an array of features which is where the output from GetCluster should be loaded into. You can then modify the icon depending on if the feature has the cluster (boolean) flag set or not.

You then have to modify the code to detect the zoom level when it changes and recalculate the markers that are needed at that zoom level. If you notice the supercluster getCluster function has a zoom level argument so it's super easy to modify to get the new geojson list.

I am pretty sure I remembered all of that correctly but I could have missed something. Sorry I no longer have the old code to reference.

[itzsaga]

For others who might find this, I recently implemented Supercluster to gain access to the underlying point information. Granted, we're using @react-native-mapbox-gl/maps but the approach should be similar. You can read about it at Supercluster with @react-native-mapbox-gl/maps