Accessing child properties data from a cluster

[mattbbc]

I have a data set that I coerce into geojson format, like so:

function toGeoJson(locations) {
  const features = [];

  locations?.forEach(location => {
    features.push({
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [location.geolocation.lon, location.geolocation.lat],
      },
      properties: {
        _id: location._id, // add this property
      }
    })
  });

  return {
    type: 'FeatureCollection',
    features,
  }
}

The important part is that each feature has a custom _id property.

I then create a cluster-enabled map with two layers - one symbol-type with a cluster configuration (i.e. filter: ['has', 'point_count']) and another with for single unclustered points/symbols (filter: ['!', ['has', 'point_count']]) and feed the geojson data into it.

    <Map
      ...
      onClick={onClick}
      interactiveLayerIds={['points', 'clusters']}
    >
      <Source id="my-data" type="geojson" data={mapLocations} cluster={true} clusterRadius={50}>
        <Layer {...pointLayerStyle} />
        <Layer {...clusterLayerStyle} />
      </Source>
    </Map>

Setting interactiveLayerIds means that if I click a cluster or a point, I can access the features property in the event of the onClick handler. If I click a single point rather than a cluster, I can see the _id property from the geojson in the output (console.log(e.features) in the click handler), but if I click a cluster I can only see the immediate properties of the cluster.

Is there a way to access the properties of the child points in a cluster on click, i.e. if I click a cluster am I able to access an array of all the _id properties of the children of that cluster?

[mattbbc]

I've answered my own question - in the onClick handler you can get a reference to the map, retrieve the source data and query using getClusterLeaves():

if (mapRef.current) {
    const map = mapRef.current.getMap();

    const selectedFeatures = e.features[0];

    const src = map.getSource('my-data');

    src.getClusterLeaves(selectedFeatures.properties.cluster_id, selectedFeatures.properties.cluster_id, 0, (err, features) => {
      if (err) console.log(err);
      console.log('features from cluster', features);
    });
  }