Colour clusters based on an alternative aggregation value

[IlariaCallegari]

Hello! 👋🏻

I have been working on this issue for quite a while and could not find a way to solve this.

I am using the clustering functionality and wondering how can I colour the clusters based on a custom aggregated property - in my case the net_exposure - of the underlying points, instead of the point_count property?

I've tried passing net_exposure in the GeoJSON properties, but I'm unable to access it within the case expression in the style layer for setting the cluster colours, as it seems that the GeoJSON properties get lost in the clustering process.

Ideally, I'd like to be able to aggregate the net_exposure while clustering and then use the aggregated value to determine the colour of each cluster.

Here's a simplified version of my code - I use react-map-gl:

 const createGeoJson = (locationData: Array<any>) => ({
    type: 'FeatureCollection',
    features: locationData.map((location) => ({
      type: 'Feature',
      properties: {
        id: location.location_id,
        net_exposure: location.net_exposure,
      },
      geometry: {
        type: 'Point',
        coordinates: [location.lon, location.lat],
      },
    })),
  });

  const dataSource =  createGeoJson(locationData)

<Source
      id="locations-clusters"
      type="geojson"
      data={dataSource}
      cluster
      clusterMaxZoom={21}
      clusterRadius={40}
    >
      {clusterLayerStyles.map((layer) => (
        <Layer
          key={layer.id}
          {...layer}
          layout={{ ...layer.layout, visibility: isLayerVisible ? 'visible' : 'none' }}
          paint={
                layer.id === 'clusters-circle'
                  ? {
                    ...layer.paint,
                    'circle-color': [
                      'case',
                      ['<', ['to-number', ['get', 'net_exposure']], totExposure * 0.4], '#008000', // Green if < 40%
                      ['<', ['to-number', ['get', 'net_exposure']], totExposure * 0.9], '#ffff00', // Yellow if < 90%
                      '#ff0000', // Red if >= 90%
                    ],
                  }
                  : layer.paint
              }
        />
      ))}
    </Source>

As for the example above, in the circle-color expression, I'd like to use the accumulated net_exposure to colour my clusters instead of point_count. Is there a way to achieve this? Or would it be possible to add a second aggregation value to the clusters that can then be retrieved in the style layer?

Just to be extra clear - what I am looking at is that the clustering gets performed based on radius/proximity as it is done currently, but then, under the hood, there is also another property that can be set, if required, that gets aggregated whilst the main clustering happens.

Apologies if this question had already been answered somewhere else. I probably missed the discussion during my search.

Thanks!
Ilaria

[HarelM]

You should be able to use clusterProperties of the geojson source options:

maplibre-gl-js/src/source/geojson_source.ts

Line 184 in 5093bf4

clusterProperties: options.clusterProperties,

See the following example:
https://maplibre.org/maplibre-gl-js/docs/examples/cluster-html/

[IlariaCallegari]

Thanks so much Harel! Found the solution :)