CODEWITHSUNDEEP
mapbox-gl-jsmaplibre-gl
Oliver
Oliver

Reputation: 111

Mapbox GL JS / Maplibre : Style cluster regarding child properties

I have a geojson dataset with a property "status" that has the value active or inactive. From this dataset, I want to create a clusters layer. These clusters should be of a different color depending on the majority value. If there's a majority of active, color blue, otherwise color red.

Regarding the documentation, I have to set a property in the clusters layer to have something like this:

this.map.addSource('projects', {
        type: 'geojson',
        data: myData,
        cluster: true,
        clusterMaxZoom: 11,
        clusterRadius: 20,
        clusterProperties: {
          dominantStatus: [Expression that returns dominant value in status attribut],
        },
      });

I have absolutely no idea how to write an expression that returns this type of result. Does anyone know how?

Upvotes: 1

Views: 334

Answers (1)

fallaciousreasoning
fallaciousreasoning

Reputation: 521

I think the example here gives a rough approach: https://maplibre.org/maplibre-gl-js/docs/examples/cluster-html/

On clusterProperties add an expression for counting the number of inactive and active items:

customProperties: {
    // A number which will be:
    // Negative, if there are more inactive statuses
    // Positive, if there are more active statuses
    // 0 if there are the same number of active and inactive items
    dominantStatus: ['+', ['match', ['get', 'status'], 'inactive', -1, 'active', 1]],
}

Upvotes: 0

Related Questions