CODEWITHSUNDEEP
mapboxmarkerclusterermapbox-glmapbox-gl-js
Bhavan Patel
Bhavan Patel

Reputation: 1755

how to customise cluster icon in mapbox-gl?

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?

Upvotes: 2

Views: 2586

Answers (2)

Bhavan Patel
Bhavan Patel

Reputation: 1755

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"
});

Upvotes: 1

Chien_Khmt
Chien_Khmt

Reputation: 257

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

Upvotes: 0

Related Questions