Clustering in Maplibre

[Bhavishya9]

Hi,
I have a specific requirement for a project I am working in. Where I have to cluster the data on two different keys.

Lets say the data in the below format.

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "id": "ak16994521", "mag": 2.3, "time": 1507425650893, "felt": null, "tsunami": 0, "zone": "Tokyo" }, "geometry": { "type": "Point", "coordinates": [ -151.5129, 63.1016, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16994517", "mag": 1.6, "time": 1507424832518, "felt": null, "tsunami": 0,  "zone': "Osaka"}, "geometry": { "type": "Point", "coordinates": [ -151.3597, 63.0781, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38021336", "mag": 1.42, "time": 1507423898710, "felt": null, "tsunami": 0, "zone": "Tokyo" }, "geometry": { "type": "Point", "coordinates": [ -118.497, 34.299667, 7.64 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2nn", "mag": 4.2, "time": 1507422626990, "felt": null, "tsunami": 0, "zone": "Tokyo" }, "geometry": { "type": "Point", "coordinates": [ -87.6901, 12.0623, 46.41 ] } },
{ "type": "Feature", "properties": { "id": "ak16994510", "mag": 1.6, "time": 1507422449194, "felt": null, "tsunami": 0, "zone": "Fuiji" }, "geometry": { "type": "Point", "coordinates": [ -151.5053, 63.0719, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2nb", "mag": 4.6, "time": 1507420784440, "felt": null, "tsunami": 0, "zone": "Fuiji" }, "geometry": { "type": "Point", "coordinates": [ -178.4576, -20.2873, 614.26 ] } },
{ "type": "Feature", "properties": { "id": "ak16994519", "mag": 1.7, "time": 1507425289659, "felt": null, "tsunami": 0, "zone": "Tokyo" }, "geometry": { "type": "Point", "coordinates": [ -150.4048, 63.1224, 105.5 ] } }
]

I have referred to the example in the docs https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
But in my scenario I need to first cluster the data based on the key "zone". i.e. based on the above example all the points with zone "tokyo" should be one cluster, "Fuiji" is another cluster, and so on. Then create a html marker based on the key "mag" like in the example at the mentioned link. I am not sure how to go about this. Any help is much appreciated.

Thanks

[HarelM]

You can pre-process that I guess into areas according to the zone, foreach zone display one point?
I'm having a hard time understanding the UX requirements I guess...