Reputation: 1
We are showing cluster points on our map based on the lat, long values according to the zoom level. We are having 3 different colors which will be shown based on some condition, colors are red, green and yellow.
Initially all are showing as red circles which is as expected but after changing different zoom levels some clusters(circles) are turning into yellow color even though it should be red color.
We verified in the console window it is showing red color code but while displaying the circle on the map it is showing as yellow.
sample code which we are using:
const clusters = map.querySourceFeatures('points', { filter: ['has', 'point_count'] });
clusters.forEach(cluster => {
const clusterId = cluster.properties.cluster_id;
if (!map.getLayer(clusterId)) {
addClusterLayer(clusterId);
}
if (test == 1)
{
clusterColor = '#50d264';
}
else if (test == 2)
{
clusterColor = '#FFEE17';
} else
{
clusterColor = '#D20532';
}
map.setPaintProperty(clusterLayerId, 'circle-color', clusterColor);
});
function addClusterLayer(clusterLayerId) {
map.addLayer({
id: clusterLayerId,
type: 'circle',
source: 'points',
filter: ['==', 'cluster_id', parseInt(clusterLayerId.split('-')[1])], // Filter features by cluster_id
paint: {
'circle-color': '#FFFF00',
'circle-radius': 10
}
});
}
Based on the condition it is going to else part and taking red color code but while showing on the map when we zoom in few clusters are showing in yellow color.
Tried this code map.triggerRepaint(); but it doesn't show any difference.
Please help me how can we solve this issue.
Upvotes: 0
Views: 14