how to customise cluster icon in mapbox-gl?

Question

I want to implement clustering in my map.

I found example of simple clustering from Mapbox Cluster Example but

My code is here, where marker ==> {marker-symbol} is from studio.

but it is not working. Is it possible to achieve output of cluster?

Answer 1

Solved By following code

var layers = [
    [150],
    [20],
    [0]
];
layers.forEach(function(layer, i) {
    map.addLayer({
        "id": "cluster-" + i,
        "source": "markers",
        "type": "symbol",
        "layout": {
            "text-field": "{point_count}",
            "text-font": [
                "Arial Unicode MS Bold"
            ],
            "text-size": 13,
            "text-anchor": "bottom",
            "icon-image": "emptyMarker",
            "icon-size": 0.25
        },
        "paint": {
            "text-color": "white"
        },
        "filter": i === 0 ? [">=", "point_count", layer[0]] : ["all", [">=", "point_count", layer[0]],
            ["<", "point_count", layers[i - 1][0]]
        ]
    });
});
map.addLayer({
    "id": "cluster-count",
    "type": "symbol",
    "source": "markers"
});

Answer 2

I think the solution is:
1. You calculate all the center's bound of the children's marker,
and store them as clusters's marker
2. You have to control the Zoom action,
if it is greater than 15 then you only show the children's marker
else if it lesser than 15 then you only show the clusters's marker