I have an am4maps chart with certain data points as custom HTML markers. When there are multiple data points nearby, they appear quite convoluted. It would be great if there's a way to group or cluster the markers at a certain zoom level, and then de-group or show the individual points when zoomed in.
For example, there seems to be a lot of closely related points in South-East Asia:
const pins = [{
"title": "Singapore",
"lat": 1.233,
"lng": 103.739,
"value": 5
}, ....
]
// Initialise am4maps and populate the series
const imageSeries = chart.series.push(new am4maps.MapImageSeries());
const imageSeriesTemplate = imageSeries.mapImages.template;
const circle = imageSeriesTemplate.createChild(am4core.Circle);
// format the circle
// add a pin or marker for all the points in the array
for (const pin of pins) {
imageSeries.addData(pin);
}
Similar to the clustering that Google Maps provide. I searched the docs for AmCharts but couldn't find a helpful example.
How do I cluster the data points(or marker) in the image series, at a zoom level?
Also, how do I label the marker with a value?
Here's a working CodePen: https://codepen.io/chechs/pen/ZEEexMN
